文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android自定义View实现简易画板功能

2024-04-02 19:55

关注

本文实例为大家分享了Android自定义View实现简易画板的具体代码,供大家参考,具体内容如下

自定义VIew实现简易画板效果,功能包括清空、选择颜色,选择大小,效果如下

画板布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <!-- 这是一个自定义组合控件,包含涂鸦板及右边三个按钮 -->
    <com.android.mytest.GraffitiBroadLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

自定义view GraffitiBroadLayout 布局文件 view_graffiti.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:baselineAligned="false">
    <!-- 自定义涂鸦板View -->
    <com.android.mytest.GraffitiView
        android:id="@+id/graffiti_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:visibility="gone"
        android:layout_gravity="right"
        android:layout_marginRight="100dp"
        android:layout_width="80dp"
        android:layout_height="wrap_content"/>
    <!-- 右侧三个按钮 清空、颜色、粗细 -->
    <LinearLayout
        android:layout_gravity="right"
        android:orientation="vertical"
        android:layout_width="100dp"
        android:layout_height="match_parent">
        <Button
            android:id="@+id/clear_all"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/select_color"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/select_size"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</FrameLayout>

画板布局中包括一个 自定义涂鸦view,recyclerView用于显示选择颜色、大小,三个按钮,分别是:
清空、选择颜色、选择大小

// 继承LinearLayout 
public class GraffitiBroadLayout extends LinearLayout {
    
    private final int[] colors = {R.color.red,R.color.green,R.color.blue};// 颜色数组
    private final int[] sizes = {5,10,15,20};// 画笔size数组

    private Context mContext;
    private View mView;
    private GraffitiView mGraffitiView;
    private RecyclerView mRecyclerView;

    public GraffitiBroadLayout(Context context) {
        super(context);
    }

    public GraffitiBroadLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        // 获取布局View
        mView = LayoutInflater.from(context).inflate(R.layout.view_graffiti, this,true);
        initView();// 初始化并设置点击事件
    }

    private void initView() {
        Button clearAllBtn = mView.findViewById(R.id.clear_all);
        Button selectColorBtn = mView.findViewById(R.id.select_color);
        Button selectSizeBtn = mView.findViewById(R.id.select_size);
        mGraffitiView = mView.findViewById(R.id.graffiti_view);
        mRecyclerView = mView.findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext));

        // 点击清空 画板
        clearAllBtn.setOnClickListener(v -> mGraffitiView.clearAllPath());
        // 选择画笔颜色
        selectColorBtn.setOnClickListener(v -> {
            GraffitiAdapter adapter = new GraffitiAdapter(mContext,colors,1);
            mRecyclerView.setAdapter(adapter);
            mRecyclerView.setVisibility(VISIBLE);
        });
        // 选择画笔大小
        selectSizeBtn.setOnClickListener(v -> {
            GraffitiAdapter adapter = new GraffitiAdapter(mContext,sizes,2);
            mRecyclerView.setAdapter(adapter);
            mRecyclerView.setVisibility(VISIBLE);
        });

    }
    // 自定义adapter
    class GraffitiAdapter extends RecyclerView.Adapter<GraffitiViewHolder>{

        Context mContext;
        int[] cs;
        int type;// 用于判断显示颜色 还是 选择大小

        public GraffitiAdapter(Context mContext, int[] cs,int type) {
            this.mContext = mContext;
            this.cs = cs;
            this.type = type;
        }

        @NonNull
        @Override
        public GraffitiViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            // 获取 item 布局
            View view = LayoutInflater.from(mContext).inflate(R.layout.item_recycler_graffiti,parent,false);
            return new GraffitiViewHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull GraffitiViewHolder holder, int position) {
            if(type == 1){// 颜色
                holder.view.setBackgroundResource(cs[position]);
                holder.click.setOnClickListener(v -> {
                    // 设置画笔颜色
                    mGraffitiView.setPaintColor(cs[position]);
                    mRecyclerView.setVisibility(GONE);
                });
            }else if(type == 2){// size
                ViewGroup.LayoutParams lp = holder.view.getLayoutParams();
                lp.height = sizes[position]*2;
                holder.view.setLayoutParams(lp);
                holder.view.setBackgroundResource(R.color.black);
                holder.click.setOnClickListener(v -> {
                    // 设置画笔size
                    mGraffitiView.setPaintSize(sizes[position]);
                    mRecyclerView.setVisibility(GONE);
                });
            }

        }

        @Override
        public int getItemCount() {
            return cs.length;
        }
    }

    static class GraffitiViewHolder extends RecyclerView.ViewHolder{
        View view;
        LinearLayout click;
        public GraffitiViewHolder(@NonNull View itemView) {
            super(itemView);
            view = itemView.findViewById(R.id.item_view);
            click = itemView.findViewById(R.id.click_view);
        }
    }

}

item_recycler_graffiti.xml 布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_marginTop="10dp"
    android:layout_height="50dp"
    android:gravity="center">
    <LinearLayout
        android:id="@+id/click_view"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="UselessParent">
        <View
            android:id="@+id/item_view"
            android:layout_width="match_parent"
            android:layout_height="40dp"/>
    </LinearLayout>

</LinearLayout>

自定义涂鸦View:

public class GraffitiView extends View {

    private final Context mContext;
    private Canvas mCanvas;// 
    private Bitmap mBitmap;// 用于保存绘制过的路径的 bitmap
    private Paint mPaint;// 画笔
    private Path mPath;// 触摸时的路径

    private int width,height;

    public GraffitiView(Context context) {
        this(context,null);
    }

    public GraffitiView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
    }

    private void init() {
        // 初始化 画笔
        mPaint = new Paint();
        mPaint.setColor(mContext.getColor(R.color.green));//画笔颜色
        mPaint.setAntiAlias(true);// 抗锯齿
        mPaint.setDither(true);// 抖动处理
        mPaint.setStrokeJoin(Paint.Join.ROUND);//画笔连接处 圆弧
        mPaint.setStrokeCap(Paint.Cap.ROUND);//画笔拐弯处风格 圆弧
        mPaint.setStyle(Paint.Style.STROKE);//画笔格式
        mPaint.setStrokeWidth(10f);//画笔宽度

        mPath = new Path();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth();
        height = getMeasuredHeight();
        if(mBitmap == null){
            // 初始化 bitmap
            mBitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_4444);
        }
        if(mCanvas == null){
            mCanvas = new Canvas(mBitmap);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制路径 
        // 因为每次触摸都会生成一条新的路径,直接绘制会使原路径消失,因此
        mCanvas.drawPath(mPath,mPaint);// 先将路径绘制到 bitmap 上,再绘制到当前画布中
        canvas.drawBitmap(mBitmap, 0,0,mPaint);// 将bitmap绘制到当前画布中
    }

    
    public void clearAllPath(){
        mBitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_4444);
        mCanvas = new Canvas(mBitmap);
        mPath.reset();
        invalidate();
    }

    
    public void setPaintColor(int resource){
        mPaint.setColor(mContext.getColor(resource));
    }

    
    public void setPaintSize(int size){
        mPaint.setStrokeWidth(size);
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float x = event.getX();
        float y = event.getY();
        switch (action){
            case MotionEvent.ACTION_DOWN:
                mPath = new Path();// 每次触摸 生成一条新的路径
                mPath.moveTo(x,y);
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(x,y);
                invalidate();
                break;
        }
        return true;
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯