andorid自定义组件,涂鸦的实现

来源：互联网发布：32单片机蜂鸣器程序编辑：程序博客网时间：2024/05/22 14:25

最近看了很多关于自定义控件的博客,其中有个关于涂鸦的博文中的例子在我的手机上就无法合适的使用,例如,我手指移动在屏幕右侧,结果线却画在了中间的位置,还以为是我手机的问题,结果发现只是代码中对各种大小和布局都是写死的。

非常难说像android自带控件一般,随便设大小,边距这些,功能也不会变样,所以在此要做一个比较正常的涂鸦控件,主要是能够像普通android控件一般,能够在xml中设置样式直接控制该控件外观。

首先该View从onMeasure()方法中获得自己的大小,接着再根据这个大小初始化Bitmap cacheBitmap,这个bitmap用来保存画的笔画的,同时也是该view的draw方法中需要画出来,展现给用户看的效果的bitmap

然后,就是用OnTouch()方法来获得用户滑动的位置和状态来不断在cacheBitmap的画出路径

最后,调用invalidate(),通知View调用自己的draw()方法

直接上代码吧,里面也有比较详细的注释了

<span style="font-size:18px;">public class TuyaView extends View {private Canvas canvas = null;private Paint paint = null;private Bitmap cacheBitmap = null;private Path path = null;// 记录路径path的起始位置float x, y;public TuyaView(Context context) {super(context);// TODO Auto-generated constructor stub}public TuyaView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stub}public TuyaView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// TODO Auto-generated constructor stub}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stub// widthMeasureSpec、heightMeasureSpec是有高16位模式和低16位size,所以看起来会很大// 获得模式int mode = MeasureSpec.getMode(widthMeasureSpec);// AT_MOST限制最大尺寸,EXACTLY则是确定好尺寸了,例如在xml文件中设置了大小if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.EXACTLY) {// 获得View实际大小int width = MeasureSpec.getSize(widthMeasureSpec);int height = MeasureSpec.getSize(heightMeasureSpec);init(width , height);// 以下方法是设置View大小的方法,除非想在代码中控制大小,不然不应该在这里填写大小// 如果希望其生效则不要调用super.onMeasure(widthMeasureSpec, heightMeasureSpec);这句了// setMeasuredDimension(400, height);} else if (mode == MeasureSpec.UNSPECIFIED) { // View的大小不确定时Log.d("WOGU", "mode=UNSPECIFIED");}super.onMeasure(widthMeasureSpec, heightMeasureSpec);}private void init(int width , int height) {cacheBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);paint = new Paint(Paint.DITHER_FLAG);path = new Path();paint.setColor(Color.RED);paint.setStyle(Paint.Style.FILL_AND_STROKE);//设置画笔笔画宽度paint.setStrokeWidth(1);paint.setAntiAlias(true);paint.setDither(true);canvas = new Canvas();canvas.setBitmap(cacheBitmap);}@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubfloat curX = event.getX();float curY = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:x = curX;y = curY;path.moveTo(x, y);break;case MotionEvent.ACTION_UP:path.quadTo(x, y, curX, curY);canvas.drawPath(path, paint);path.reset();break;case MotionEvent.ACTION_MOVE:path.quadTo(x, y, curX, curY);canvas.drawPath(path, paint);x = curX;y = curY;path.moveTo(x, y);break;}invalidate();return true;}@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubcanvas.drawBitmap(cacheBitmap, 0, 0 ,paint);super.onDraw(canvas);}}</span>

直接在xml文件中控制大小和背景等,不影响该自定义view的使用

<com.example.tuyaview.TuyaView         android:layout_width="fill_parent"        android:layout_height="300dp"        android:background="@color/default_bg"        android:layout_gravity="center_horizontal|center"        />

完整应用在这里,不过基本没什么其他内容了

0 0