前言

本文面向自定义view新手，但是希望你最好有一定的理论知识，或基础概念，有的地方可能会一笔带过并不会细讲，细讲篇幅就太长了。

本文仿写自鸿洋的自定义View (一)，尽管过去了将近快7年之久，我觉得依然有学习价值。

效果

自定义View分类

简单介绍一下自定义View分类：

组合控件，继承自已有的layout，比如LinearLayout，然后通过LayoutInflater引入布局，然后处理相关事件，这种方式的好处在于，不需要过度关注view内部的绘制机制，而且扩展性也很强。
继承自现有的系统控件，修改或扩展某些属性或方法即可，比如AppCompatTextView
继承自view或viewgroup，这种相对要复杂一些，因为我们要自己控制绘制流程，但是相对的，也有更大的想象空间。

步骤

先分析一下上图中的效果：

带颜色的矩形背景
居中的文本

比较简单，老手稍微想一下就已经有思路了：

1.自定义属性
2.添加构造方法
3.在构造里获取自定义样式
4.重写onDraw计算坐标绘制
5.重写onMeasure测量宽高
6.设置点击事件

先分析效果图，然后构思，随后不断的调整优化。

1.自定义属性

这一步也不一定非要写在前面，可能有些人觉得不一定就能事先知道会用到哪些属性，由于例子比较简单，暂且放在前面吧，看个人习惯。

在res/values/ 下建立一个attrs.xml文件，在里面定义我们的属性和声明我们的整个样式

<?xml version="1.0" encoding="utf-8"?>
<resources><attr name="randomText" format="string"/><attr name="randomTextColor" format="color"/><attr name="randomTextSize" format="dimension"/><declare-styleable name="RandomTextView" ><attr name="randomText"/><attr name="randomTextColor"/><attr name="randomTextSize"/></declare-styleable></resources>

format是值该属性的取值类型:
一共有：string，color，demension，integer，enum，reference，float，boolean，fraction，flag

在xml布局中的引用：

    <com.yechaoa.customviews.randomtext.RandomTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="20dp"app:randomText="1234"app:randomTextColor="@color/colorAccent"app:randomTextSize="50sp" />

注意引入命名空间：

xmlns:app="http://schemas.android.com/apk/res-auto"

2.添加构造方法

新建一个RandomTextView类，继承View，并添加3个构造方法

class RandomTextView : View {//文本private var mRandomText: String//文本颜色private var mRandomTextColor: Int = 0//文本字体大小private var mRandomTextSize: Int = 0private var paint = Paint()private var bounds = Rect()//调用两个参数的构造constructor(context: Context) : this(context, null)//xml默认调用两个参数的构造，再调用三个参数的构造，在三个参数构造里获取自定义属性constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {...}...
}

这里要注意的是，所有的构造方法，都指向的是第三个构造方法，前两个构造的继承是this，而不是super。

第一个构造比如我们可以是new创建的，第二个是xml中默认调用的，我们在第三个构造中去获取自定义属性。

3.在构造里获取自定义样式

    constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {//获取自定义属性val typedArray = context.theme.obtainStyledAttributes(attributeSet,R.styleable.RandomTextView,defStyle,0)mRandomText = typedArray.getString(R.styleable.RandomTextView_randomText).toString()mRandomTextColor = typedArray.getColor(R.styleable.RandomTextView_randomTextColor, Color.BLACK)//默认黑色mRandomTextSize = typedArray.getDimensionPixelSize(R.styleable.RandomTextView_randomTextSize,TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16F, resources.displayMetrics ).toInt())//获取完回收typedArray.recycle()paint.textSize = mRandomTextSize.toFloat()//返回文本边界，即包含文本的最小矩形，没有所谓“留白”，返回比measureText()更精确的text宽高，数据保存在bounds里paint.getTextBounds(mRandomText, 0, mRandomText.length, bounds)}

通过obtainStyledAttributes获取自定义属性，返回一个TypedArray，这里用到了我们在attrs.xml文件中声明的样式（R.styleable.RandomTextView），返回的TypedArray即包含了这里面的属性。

拿到自定义view属性集合，然后赋值，赋值之后就可以用paint去画了。

然后用到了paint的getTextBounds方法：

paint.getTextBounds(mRandomText, 0, mRandomText.length, bounds)

简单理解就是，把文字放在一个矩形里，通过矩形的宽高即可知道文字的宽高，所以宽高会保存在bounds里，bounds是一个矩形Rect，为什么要这么做呢，因为后面我们要计算文字居中的时候会用到。

ok，接下来开始画布局。

4.重写onDraw计算坐标绘制

    @SuppressLint("DrawAllocation")override fun onDraw(canvas: Canvas?) {super.onDraw(canvas)/*** 自定义View时，需要我们自己在onDraw中处理padding，否则是不生效的* 自定义ViewGroup时，子view的padding放在onMeasure中处理*//*** 矩形背景*/paint.color = Color.YELLOW//计算坐标，因为原点是在文字的左下角，左边要是延伸出去就还要往左边去，所以是减，右边和下边是正，所以是加canvas?.drawRect((0 - paddingLeft).toFloat(),(0 - paddingTop).toFloat(),(measuredWidth + paddingRight).toFloat(),(measuredHeight + paddingBottom).toFloat(),paint)/*** 文本*/paint.color = mRandomTextColor//注意这里的坐标xy不是左上角，而是左下角，所以高度是相加的，在自定义view中，坐标轴右下为正//getWidth 等于 measuredWidthcanvas?.drawText(mRandomText,(width / 2 - bounds.width() / 2).toFloat(),(height / 2 + bounds.height() / 2).toFloat(),paint)}

上面的代码就是在onDraw里面显示绘制了一个YELLOW颜色的矩形背景，然后绘制了一个自定义属性颜色的居中的文本。

这里要注意我们计算位置时的坐标，在自定义view中，原点是view的左上角，而在数学坐标系中，原点（0,0）是在中间的，二者是有区别的。

其次，假如xml布局中有padding，或者预判会使用到padding，在重写onDraw的时候也要把padding的数据加上，否则padding是不生效的。如果是继承ViewGroup时，子view的padding放在onMeasure中处理。

来看此时的效果：

此时是不是有疑惑，xml里面的宽高明明是wrap_content，为什么会充满父布局呢？

这就涉及到onMeasure的知识点了，往下看。

5.重写onMeasure测量宽高

我们在xml设置view宽高有3种方式：

match_parent
wrap_content
具体数据，比如100dp

onMeasure中MeasureSpec 的 mode也有3种模式：

EXACTLY：一般是设置了明确的值或者是MATCH_PARENT
AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT
UNSPECIFIED：表示子布局想要多大就多大，很少使用

由于我们xml用的是wrap_content，也就是对应AT_MOST，所以效果就是会占满父布局中的可用空间，而父布局是填充屏幕，所以我们自定义的view也会占满全屏。

而我们实际想要的效果是view包裹自己，而不是铺满全屏，所以我们需要在onMeasure中进行处理

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {super.onMeasure(widthMeasureSpec, heightMeasureSpec)/*** EXACTLY：一般是设置了明确的值或者是MATCH_PARENT* AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT* UNSPECIFIED：表示子布局想要多大就多大，很少使用*/val widthMode = MeasureSpec.getMode(widthMeasureSpec)val widthSize = MeasureSpec.getSize(widthMeasureSpec)val heightMode = MeasureSpec.getMode(heightMeasureSpec)val heightSize = MeasureSpec.getSize(heightMeasureSpec)var width = 0var height = 0//如果指定了宽度，或不限制宽度，用可用宽度即可，如果是WARP_CONTENT，则用文本宽度，再加上左右paddingwhen (widthMode) {MeasureSpec.UNSPECIFIED,MeasureSpec.EXACTLY -> {width = widthSize + paddingLeft + paddingRight}MeasureSpec.AT_MOST -> {width = bounds.width() + paddingLeft + paddingRight}}//如果指定了高度，或不限制高度，用可用高度即可，如果是WARP_CONTENT，则用文本高度，再加上上下paddingwhen (heightMode) {MeasureSpec.UNSPECIFIED,MeasureSpec.EXACTLY -> {height = heightSize + paddingTop + paddingBottom}MeasureSpec.AT_MOST -> {height = bounds.height() + paddingTop + paddingBottom}}//保存测量的宽高setMeasuredDimension(width, height)}

上面的代码呢，主要做了两件事：

获取view宽高的模式
针对不同的模式，对宽高进行重新测量

最后别忘记调用setMeasuredDimension保存新测量的宽高，否则没用哦。

此时再看效果就是效果图中的样子了。

6.设置点击事件

ok，到这，view已经绘制完成了，但是还没有事件，我们在构造中加一个点击事件

    constructor(context: Context, attributeSet: AttributeSet?, defStyle: Int) : super(context, attributeSet, defStyle) {.../*** 添加点击事件*/this.setOnClickListener {mRandomText = randomText()//更新postInvalidate()}}

randomText方法：

    /*** 根据文本长度 随意数字*/private fun randomText(): String {val list = mutableListOf<Int>()for (index in mRandomText.indices) {list.add(Random.nextInt(10))}val stringBuffer = StringBuffer()for (i in list) {stringBuffer.append("" + i)}return stringBuffer.toString()}

触发事件之后，文字更新，然后view重绘更新页面即可。

关于数据获取，也就是变化后的数字，可以写个onTextChanged接口，也可以写个开放方法获取。

总结

其实看效果的话，还不如TextView来的简单，而且TextView也可以轻松的实现效果图中的效果。

所以本文的重点并不是实现效果，而是学习理解自定义View以及其绘制流程。

理论看的再多也需要实践才行，不如跟着敲两遍，理解消化一下。

注释还是非常详细的，甚至有点啰嗦。。

如果对你有一点帮助，点个赞呗 ^ _ ^

Github

https://github.com/yechaoa/CustomViews

参考

Android 自定义View (一)
自定义 View 1-1 绘制基础

Android 自定义View之随机数验证码（仿写鸿洋）相关推荐

android自定义View之(六)------高仿华为荣耀3C的圆形刻度比例图(ShowPercentView)
为什么写这篇文章: 显示当前的容量所占的比例,表现当前计划的进度,一般都会采用百分比的方式,而图形显示,以其一目了然的直观性和赏心悦目的美观形成为了我们的当然的首选. 在图形表示百分比的方法中,我们有 ...
android 随机验证码,Android自定义View实现随机验证码
对于android开发来说自定义View还是一个比较重要的技能,所以在这里写一篇自定义View入门的文章,也是实现一个相对简单的随机产生验证码的功能: 自定义View主要也就分为几步 1.自定义Vie ...
Android自定义View实现滴滴验证码输入框效果
先上效果图让大家看看 1.VerficationCodeInput.Java /** * 輸入验证码的自定义view * */ public class VerificationCodeInput e ...
【Android自定义View实战】之仿去哪儿网App图片按压显示指纹并缩放效果TouchFingerImageView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52986713 [DylanAndroid的csdn博客] 我们发现去哪儿网ap ...
【Android自定义View实战】之仿QQ运动步数圆弧及动画，Dylan计步中的控件StepArcView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52936609 [DylanAndroid的csdn博客] 在之前的Androi ...
完整仿写鸿洋WanAndroid网站客户端
WanAndroid 项目地址 WanAndroidClient 简介本项目是有WanAndroid网站提供数据内容技术 MVP Retrofit Rxjava RxAndroid Room G ...
Android自定义View初探（二）——仿360垃圾清理
明天就是五一劳动节了,在这里先祝各位程序猿劳动节快乐,别在加班了! 自从尝试过写自定义View(Android自定义View初探(一)--饼图)之后,每当看到别人的应用时,总是在想别人的实现方式,或许 ...
Android仿支付宝UI功能开发,Android 自定义view仿支付宝咻一咻功能
支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画还有就是这是好几 ...
android中仿qq最新版抽屉,Android 自定义View实现抽屉效果
Android 自定义View实现抽屉效果说明这个自定义View,没有处理好多点触摸问题 View跟着手指移动,没有采用传统的scrollBy方法,而是通过不停地重新布局子View的方式,来使得子 ...

Android 自定义View之随机数验证码（仿写鸿洋）

前言

效果