Android自定義View實現(xiàn)簡易畫板功能
更新時間：2022年05月17日 15:35:42 作者：仙氣兒飄飄w
這篇文章主要介紹了Android自定義View實現(xiàn)簡易畫板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Android自定義View實現(xiàn)簡易畫板的具體代碼，供大家參考，具體內(nèi)容如下
自定義VIew實現(xiàn)簡易畫板效果，功能包括清空、選擇顏色，選擇大小，效果如下
畫板布局：
<?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"/> ? ? <!-- 右側(cè)三個按鈕 清空、顏色、粗細 --> ? ? <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};// 顏色數(shù)組
? ? private final int[] sizes = {5,10,15,20};// 畫筆size數(shù)組
? ? 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();// 初始化并設(shè)置點擊事件
? ? }
? ? 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 -> {
? ? ? ? ? ? ? ? ?? ?// 設(shè)置畫筆顏色
? ? ? ? ? ? ? ? ? ? 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 -> {
? ? ? ? ? ? ? ? ?? ?// 設(shè)置畫筆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();
? ? }
? ? /**
? ? ?* 設(shè)置畫筆顏色
? ? ?* @param resource id
? ? ?*/
? ? public void setPaintColor(int resource){
? ? ? ? mPaint.setColor(mContext.getColor(resource));
? ? }
? ? /**
? ? ?* 設(shè)置畫筆大小
? ? ?* @param size size
? ? ?*/
? ? 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;
? ? }
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Flutter配置代理抓包實現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Android用 Mob 實現(xiàn)發(fā)送短信驗證碼實例
這篇文章主要介紹了Android用 Mob 實現(xiàn)發(fā)送短信驗證碼實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Android 架構(gòu)之數(shù)據(jù)庫框架升級
上一篇講解了# Android 架構(gòu)之數(shù)據(jù)框架搭建 ，里面含有數(shù)據(jù)庫最基礎(chǔ)的增刪改查功能，不過只考慮了單數(shù)據(jù)庫，開發(fā)者可以舉一反三按照對應思路設(shè)計多數(shù)據(jù)庫架構(gòu)。 在本篇里，將會講解令開發(fā)者比較頭疼的數(shù)據(jù)庫升級,需要的朋友可以參考下面文章內(nèi)容2021-09-09
這篇文章主要為大家詳細介紹了ListView仿微信聊天界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Android啟動初始化方案App StartUp的應用詳解
這篇文章主要介紹了Android啟動初始化方案App StartUp的使用方法，StartUp是為了App的啟動提供的一套簡單、高效的初始化方案，下面我們來詳細了解2022-09-09
Android ListView實現(xiàn)上拉加載更多和下拉刷新功能
這篇文章主要為大家詳細介紹了Android ListView實現(xiàn)上拉加載更多和下拉刷新功能，介紹了ListView刷新原理及實現(xiàn)方法，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了Android自定義控件通用驗證碼輸入框的實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
PullToRefreshListView實現(xiàn)多條目加載上拉刷新和下拉加載
這篇文章主要為大家詳細介紹了PullToRefreshListView實現(xiàn)多條目加載上拉刷新和下拉加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
Android編程實現(xiàn)對話框Dialog背景透明功能示例
這篇文章主要介紹了Android編程實現(xiàn)對話框Dialog背景透明功能,涉及Android對話框的布局、屬性及事件處理相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Android開發(fā)之自動文本框輸入識別提示功能代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07