安卓的话,目前也是刚刚入门,做了一个简单的画图板。画图板有两种写法,第一种是用imageView来实现画板,但是有一个弊端就是画图的位置有偏移,第二种是自定义一个组件,有点会是位置准确。在学JAVA的时候,我们也做过画图板,安卓的开发并没有多大区别。当然,我们首先要提到的是Bitmap,Canvas,Paint这三个类。
Bitmap:我们可以把它看作是一个画布
Canvas:相当于就是铅笔
Paint :铅笔头
从它们的关系可以看出,我们想要画出一个图案,在这个过程中,画笔用于决定图案的颜色,然后再在画布上画出来,但仅仅是画出来还不够,我们需要一块屏幕来把图案展现出来
下面重点来介绍一下自定义组件的方法:
1、我们首先需要做的是定义一个自定义组件DrawView,让它继承自View,然后让它来实现View的public DrawView(Context context) { };public DrawView(Context context, AttributeSet attrs) {};public DrawView(Context context, AttributeSet attrs, int defStyle) { }这三个构造方法,最后加到布局上去
2、重写onDraw方法,实例化bitmap和canvas
3、在string.xml中可以添加上需要用到的string
4、添加目录,在menu.xml中可以很简便的实现
3、实现onTouchEvent方法,当做出不同动作时会触发不同的反应
package com.exam.fidraw; import android.os.Bundle; import android.app.Activity; import android.graphics.Color; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends Activity { public DrawView dv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); dv = (DrawView) this.findViewById(R.id.drawView1); dv.paint.setColor(Color.GREEN); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } public boolean onMenuItemSelected(int featureId, MenuItem item) { // super.onMenuItemSelected(featureId, item); int id = item.getItemId(); System.out.println("<<<<<<<<<<<<<<<<<<<<<<<<"); switch (id) { case R.id.color_red: dv.paint.setColor(Color.RED); System.out.println("<<<<<<<<REDREDREDRED<<<<<<<<<<<<<"); break; case R.id.color_green: dv.paint.setColor(Color.GREEN); break; case R.id.color_blue: dv.paint.setColor(Color.BLUE); break; case R.id.width_1: dv.paint.setStrokeWidth(1); break; case R.id.width_3: dv.paint.setStrokeWidth(3); break; case R.id.width_5: dv.paint.setStrokeWidth(5); break; case R.id.width_7: dv.paint.setStrokeWidth(7); break; case R.id.shape_line: dv.shape = "直线"; break; case R.id.shape_oval: dv.shape = "椭圆"; break; case R.id.shape_rect: dv.shape = "矩形"; break; case R.id.shape_pencil: dv.shape = "铅笔"; break; } System.out.println("<<<<<<<<<<switchswitch<<<<<<<<<<<<<<"); return super.onMenuItemSelected(featureId, item); } }
package com.exam.fidraw; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Bitmap.Config; import android.graphics.Paint.Style; import android.graphics.RectF; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; public class DrawView extends View { private Bitmap bitmap; private Canvas canvas; public Paint paint; public String shape = "直线"; private float x1, x2, y1, y2; public DrawView(Context context) { super(context); } public DrawView(Context context, AttributeSet attrs) { super(context, attrs); paint = new Paint(); } public DrawView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawColor(Color.BLUE); // 判断bitmap是否为null if (bitmap == null) { bitmap = Bitmap.createBitmap(this.getWidth(), this.getHeight(), Config.ARGB_8888); this.canvas = new Canvas(bitmap); } // 把图形画在屏幕上 canvas.drawBitmap(bitmap, 0, 0, paint); } public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: x1 = event.getX(); y1 = event.getY(); break; case MotionEvent.ACTION_UP: x2 = event.getX(); y2 = event.getY(); if (shape.equals("直线")) { canvas.drawLine(x1, y1, x2, y2, paint); } else if (shape.equals("椭圆")) { canvas.drawOval(new RectF(x1, y1, x2, y2), paint); } else if (shape.equals("矩形")) { canvas.drawRect(Math.min(x1, x2), Math.min(y1, y2), Math.max(x1, x2), Math.max(y1, y2), paint); } break; case MotionEvent.ACTION_MOVE: x2 = event.getX(); y2 = event.getY(); if (shape.equals("铅笔")) { canvas.drawLine(x1, y1, x2, y2, paint); x1 = x2; y1 = y2; } break; } this.invalidate(); return true; } }
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <com.exam.fidraw.DrawView android:id="@+id/drawView1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_centerHorizontal="true" android:layout_centerVertical="true" /> </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">FiDraw</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string> <string name="color">颜色</string> <string name="color_red">红色</string> <string name="color_green">绿色</string> <string name="color_blue">蓝色</string> <string name="shape">形状</string> <string name="shape_line">直线</string> <string name="shape_pencil">铅笔</string> <string name="shape_rect">矩形</string> <string name="shape_oval">椭圆</string> <string name="width">宽度</string> <string name="width_1">加细</string> <string name="width_3">细</string> <string name="width_5">粗</string> <string name="width_7">加粗</string> </resources>
<menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/color" android:enabled="true" android:title="@string/color"> <menu> <group android:checkableBehavior="single" android:enabled="true" android:visible="true" > <item android:id="@+id/color_red" android:title="@string/color_red"/> <item android:id="@+id/color_green" android:title="@string/color_green"/> <item android:id="@+id/color_blue" android:title="@string/color_blue"/> </group> </menu> </item> <item android:id="@+id/width" android:title="@string/width"> <menu> <group android:checkableBehavior="single" android:enabled="true" > <item android:id="@+id/width_1" android:title="@string/width_1"/> <item android:id="@+id/width_3" android:title="@string/width_3"/> <item android:id="@+id/width_5" android:title="@string/width_5"/> <item android:id="@+id/width_7" android:title="@string/width_7"/> </group> </menu> </item> <item android:id="@+id/shape" android:title="@string/shape"> <menu> <group android:checkableBehavior="single" android:enabled="true" > <item android:id="@+id/shape_line" android:title="@string/shape_line"/> <item android:id="@+id/shape_pencil" android:title="@string/shape_pencil"/> <item android:id="@+id/shape_oval" android:title="@string/shape_oval"/> <item android:id="@+id/shape_rect" android:title="@string/shape_rect"/> </group> </menu> </item> </menu>