溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“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();
}
/**
* 設置畫筆顏色
* @param resource id
*/
public void setPaintColor(int resource){
mPaint.setColor(mContext.getColor(resource));
}
/**
* 設置畫筆大小
* @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;
}
}關于“Android怎么自定義View實現簡易畫板功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
