Android自定义控件2-简单的写字板控件
概述
上一篇文章我们对自定义控件进行了一个大体的知识介绍。今天就来学习自定义一个简单的写字板控件。
先来看看效果图
就是简单的根据手指写下的轨迹去画出内容
实现
在上一篇文章里提到了android官方给出的自定义控件需要考虑以下几点:
- 创建View
- 处理View的布局
- 绘制View
- 与用户进行交互
- 优化已定义的View
就按照这个步骤来完成今天的自定义控件
1、创建View
上篇提到创建View这一步的时候要考虑的就是很简单的自定义属性的声明、使用。
今天的控件可以有一些什么自定义属性呢?要实现写字板,其实就是三个东西:写字板的颜色、笔的颜色、笔的粗细。所以接下来自定义属性。
<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="WritingBoardView"><attr name="boardBackground" format="color"></attr> <!--画板颜色--><attr name="paintColor" format="color"></attr> <!--画笔颜色--><attr name="paintWidth" format="dimension"></attr> <!--画笔宽度--></declare-styleable>
</resources>
定义了就是为了要使用
<?xml version="1.0" encoding="utf-8"?>
<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"xmlns:custom="http://schemas.android.com/apk/res-auto"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="com.qiangyu.test.writingboardview.MainActivity"><com.qiangyu.test.writingboardview.view.WritingBoardView
android:layout_width="match_parent"android:layout_height="match_parent"custom:paintColor="@color/colorAccent"custom:boardBackground="@color/colorPrimary"custom:paintWidth="3dp"/>
</RelativeLayout>
简单的设置了boardBackground、paintWidth和paintColor属性
使用这里只需要注意命名空间,android提供给我们的用android,我们可以自定义我们属性的命名空间
写法为:xmlns:你取的名=”http://schemas.android.com/apk/res-auto”,这里的res-auto可以换成你控件的包名
在XML布局文件中设置的属性要在自定义属性中获取到,所以我们必须实现带有Context, AttributeSet的构造方法
private int mBoardBackground;//画板颜色private int mPaintColor;//画笔颜色private int mPaintWidth;//画笔宽度private Path mPath;private Paint mPaint;//画笔public WritingBoardView(Context context) {this(context,null);}public WritingBoardView(Context context, AttributeSet attrs) {this(context, attrs,0);}public WritingBoardView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context,attrs);}private void init(Context context,AttributeSet attrs) {TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.WritingBoardView);mBoardBackground = a.getColor(R.styleable.WritingBoardView_boardBackground,Color.WHITE);mPaintColor = a.getColor(R.styleable.WritingBoardView_paintColor,Color.BLUE);mPaintWidth = a.getDimensionPixelSize(R.styleable.WritingBoardView_paintWidth,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,5,getResources().getDisplayMetrics()));a.recycle();mPaint = new Paint();mPath = new Path();setBackgroundColor(mBoardBackground);mPaint.setColor(mPaintColor);mPaint.setStrokeWidth(mPaintWidth);mPaint.setStyle(Paint.Style.STROKE);mPaint.setAntiAlias(true);}
上面代码确保了每个构造方法最终都调用了第三个构造方法里的init(context,attrs) 方法来获取自定义属性和初始化一些信息
通过固定的写法、简单的获取到自定义属性,并且给当前view设置背景、为Paint设置了样式和颜色。完成写字板很重要的就是这里的Path类。
先来介绍一下Path类
看构造方法的注释
/*** The Path class encapsulates compound (multiple contour) geometric paths* consisting of straight line segments, quadratic curves, and cubic curves.* It can be drawn with canvas.drawPath(path, paint), either filled or stroked* (based on the paint's Style), or it can be used for clipping or to draw* text on a path.*/
public class Path {...}
大体就是说Path封装了由了直线和各种曲线组成几何图形信息。我们可以调用canvas通过drawPath方法来画一些东西。
我们最终的draw就是需要用到drawPath
Path里包含了很多设置几何图形的方法如addRect、addArc。
今天重点说用到的两个方法:
/*** Set the beginning of the next contour to the point (x,y).** @param x The x-coordinate of the start of a new contour* @param y The y-coordinate of the start of a new contour*/public void moveTo(float x, float y) {native_moveTo(mNativePath, x, y);}
moveTo方法就是设置下一个连线或者图形最开始的位置。
/*** Add a line from the last point to the specified point (x,y).* If no moveTo() call has been made for this contour, the first point is* automatically set to (0,0).** @param x The x-coordinate of the end of a line* @param y The y-coordinate of the end of a line*/public void lineTo(float x, float y) {isSimplePath = false;native_lineTo(mNativePath, x, y);}
lineTo方法简单的添加一条上一个点到当前点的线。
有了这两个方法我们就可以实线写字板了
2、处理View的布局
由于这个自定义控件本身就需要一块内容当写字板,所以就不用特别的布局处理了,只是在mode为UNSPECIFIED的时候可能会导致布局显示不出来。
在这里就不进行特殊处理了。
3、绘制View、与用户进行交互
由于该控件本身就需要交互才产生效果,所以之前的两步放在一起考虑了。
上面说到过Canvas有一个drawPath方法。drawPath最后绘制出来什么样其实是看Path里包含的信息。
我们要实现实时显示手写的内容,只需要在滑动的时候获取的坐标通过Path的lineTo方法将线一点一点的连起来。
当手指抬起再落下的时候应该又是一条新的线,所以在落下的时候我们需要调用moveTo方法来为下一条轨迹设置一个起点。
@Overridepublic boolean onTouchEvent(MotionEvent event) {float touchX = event.getX();float touchY = event.getY();switch (event.getAction()){case MotionEvent.ACTION_DOWN:mPath.moveTo(touchX,touchY);//重新设置即将出现的线的起点break;case MotionEvent.ACTION_MOVE:mPath.lineTo(touchX,touchY);//连线break;case MotionEvent.ACTION_UP:break;}invalidate();//通知系统重绘return true;//要处理当前事件}
在onTouch中return true表示要处理当前事件。并且在每一次操作调用invalidate来绘制界面,我们的onDraw 方法只需要简单的调用drawPath就可以了
@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawPath(mPath,mPaint);}
总结
其实就是通过手指的触摸事件来控制轨迹的改变,按照固定的模式,一个简单的自定义控件就大功告成啦!
一个简单的写字板就基本完成了,当然你感兴趣可以扩展一下,加上在运行时改变画笔的颜色、画板的颜色。添加字体擦除去的功能。
最后别忘记给我点个赞评论支持下!哈哈
源码下载
Android自定义控件2-简单的写字板控件相关推荐
- Android自己定义控件2-简单的写字板控件
概述 上一篇文章我们对自己定义控件进行了一个大体的知识介绍. 今天就来学习自己定义一个简单的写字板控件. 先来看看效果图 就是简单的依据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了androi ...
- Android 自定义写字板控件实现用图片做橡皮擦实现擦除功能
在最近的开发项目中,要实现自定义写字板实现签名和用图片做橡皮擦实现擦除功能,这就需要动态添加图片,然后拖动图片的同时,实现擦除的效果,具体步骤如下: 1.自定义写字板: import android. ...
- Android自定义控件入门实践之雷达扫描控件
以前因为工作的关系,对于自定义控件用的少之又少,无非就是把几个控件放置到ViewGroup内部,然后提供开放方法,就成了一个所谓的自定义控件,但是这种小伎俩太简单,面试的时候这点东西根本Hold不住场 ...
- Android自定义控件--图片3D翻转(其他控件或布局可以)
这是一个基础控件,粘贴过去就可以了 import android.graphics.Camera; import android.graphics.Matrix; import android.vie ...
- html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
- 写字板能用html语言吗,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
- android自定义控件不显示,解决Android Studio Design界面不显示layout控件的问题
Android Studio更新到3.1.3后,发现拖到Design中的控件在预览界面中不显示: 解决办法: 在Styles.xml中的parent="..."中的Theme前添加 ...
- php写字板代码,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
- android简单的自定义涂鸦控件
简单的自定义涂鸦控件,没有写自定义属性 java代码中找到view后直接setBitmap(Bitmap bitmap)后就可以使用了 提供清除方法clear() 保存可以参考另一篇view转bitm ...
最新文章
- swift 加载gif 框架图片
- 阿里一面,给了几条SQL,问需要执行几次树搜索操作?
- zookeeper: zkServer.sh status没有到主机的路由
- C语言常用排序方法大全
- 2015山东信息学夏令营 Day4T3 生产
- Elastic-Job中的ScriptJob
- Android 取得 ListView中每一个Item项目的值
- 安装java过程_Java的安装过程
- TIOBE 3月榜单:新功能将加入,C语言仍高居榜首
- java oracle 字符_Oracle转义字符
- 设计模式:单例和简单工厂
- android 京东白条支付,京东网银钱包安卓版上线:整合京东白条和小金库
- 计算机应用头部案例提交,基于头部位置的应用程序放置的制作方法
- 什么是多核电脑?什么是64位电脑?
- 项目投标注意点001---项目投标那点事
- 两种常用的启动和关闭MySQL服务
- 用C#编写ActiveX控件(二) 转载
- 使用CALayer设置图像边框
- Runtime 源码阅读
- 原生php phpmailer 发送邮件 email