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

这篇文章主要介绍“Android怎么自定义View实现简易画板功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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;    }}

关于“Android怎么自定义View实现简易画板功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。