当前位置：首页 > 行业动态 > 正文

如何实现Android自定义视图中的画图板功能？

admin
行业动态
2025-03-04
3

实现Android自定义View画图板1. 创建自定义View类，继承自 View。，2. 重写 onDraw(Canvas canvas)方法进行绘图。，3. 使用 Paint对象设置画笔属性。，4. 在 onTouchEvent(MotionEvent event)中处理触摸事件更新绘图。

Android自定义View之画图板实现方法涉及多个关键步骤和细节，以下是详细的实现方法：

一、布局文件定义

1、主布局文件：在res/layout目录下创建主布局文件（如activity_main.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_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>

2、自定义View布局文件：在res/layout目录下创建自定义View的布局文件（如view_graffiti.xml），包含画图区域和控制按钮，示例如下：

如何实现Android自定义视图中的画图板功能？

 <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">
       <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类实现

1、定义属性：在res/values目录下创建attrs.xml文件，定义自定义属性，示例如下：

 <declare-styleable name="DrawImg">
       <attr name="PaintColor" format="color" />
       <attr name="PaintWidth" format="dimension" />
       <attr name="CanvasImg" format="reference" />
   </declare-styleable>

2、创建自定义View类：新建一个继承自View的类（如DrawView.java），并重写构造方法和关键方法，示例如下：

 public class DrawView extends View {
       private float preX, preY;
       private Path path = new Path();
       private Paint paint;
       private Bitmap cacheBitmap;
       private Canvas cacheCanvas;
       public DrawView(Context context, AttributeSet attrs) {
           super(context, attrs);
           init();
       }
       private void init() {
           paint = new Paint(Paint.DITHER_FLAG);
           paint.setColor(Color.GREEN);
           paint.setStyle(Paint.Style.STROKE);
           paint.setStrokeWidth(10);
           paint.setAntiAlias(true);
           paint.setDither(true);
           cacheBitmap = Bitmap.createBitmap(480, 800, Bitmap.Config.ARGB_8888);
           cacheCanvas = new Canvas(cacheBitmap);
       }
       @Override
       protected void onDraw(Canvas canvas) {
           super.onDraw(canvas);
           canvas.drawBitmap(cacheBitmap, 0, 0, null);
           canvas.drawPath(path, paint);
       }
       @Override
       public boolean onTouchEvent(MotionEvent event) {
           float x = event.getX();
           float y = event.getY();
           switch (event.getAction()) {
               case MotionEvent.ACTION_DOWN:
                   path.moveTo(x, y);
                   preX = x;
                   preY = y;
                   break;
               case MotionEvent.ACTION_MOVE:
                   path.quadTo(preX, preY, x, y);
                   preX = x;
                   preY = y;
                   break;
               case MotionEvent.ACTION_UP:
                   cacheCanvas.drawPath(path, paint);
                   break;
           }
           invalidate();
           return true;
       }
   }

3、在活动中使用自定义View：在MainActivity.java中设置自定义View，示例如下：

如何实现Android自定义视图中的画图板功能？

 public class MainActivity extends AppCompatActivity {
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           DrawView drawView = findViewById(R.id.graffiti_view);
           drawView.setOnTouchListener(new View.OnTouchListener() {
               @Override
                   public boolean onTouch(View v, MotionEvent event) {
                   return drawView.onTouchEvent(event);
               }
           });
       }
   }