本文出自简书：尧沐，如需转载请标明出处，尊重原创谢谢
博客地址：http://www.jianshu.com/p/94cd5021cf3c
1 纯粹的View
概念:继承子View或者系统控件如Textview,Imageview,然后自己画点东西，实现一些动画 这种称之为纯粹的自定义View(其实说法很多自己喜欢就好)
2 系统控件的组合
概念:通过Android中给定的控件组合成的一个新的控件我们加以使用，日历控件就是一个很好的说明
3 步骤 一般分为几步曲？？
1 测量 onMeasure()
2 绘画 onDraw()
3 触摸 onTouch()
........
构造View() --> onFinishInflate() --> onAttachedToWindow() --> onMeasure() --> onSizeChanged() --> onLayout() --> onDraw() --> onDetackedFromWindow()
这是想做出的样子
image.png
手机不会弄动图，2333 后期我会加一些炫酷的效果
一，实现分析
- 1 一个高度满屏也就是match_parent，宽度自定义的一个VIew，不是系统组合控件，需要全部自己绘制
- 2 需要向外抛出自定义属性 文字颜色，选中的文字颜色，文字大小（这里只写3种）
- 3 测量--->onMeasure()
- 4 画出来! --->onDraw()
- 5 onTouch事件处理
- 6 对外接口回掉
分解成若干步骤就可以开始尝试了！
二，具体代码
-
第一步 自定义属性
首先要定义出你三个自定义属性，所以需要在你 values目录下面新建一个attr.xml文件夹
然后打开! 在里面写上你需要的属性比如-->
image.png
-
第二步 初始化操作
你的三个构造方法改一下 都指定到第三个方法去操作
this(context, null);
this(context, attrs, 0);
在你的第三个方法里面就可以进行一下初始化操作了 比如画笔的初始化
image.png
initPaintAndType()代码如下
image.png
这些都是很基础很简单的东西 我就不多说了
-
第三步 测量onMeasure()
测量这里有必要说一下widthMeasureSpec heightMeasureSpec 这两个值
大家都知道测量模式把,有三种 1 UNSPECIFIED || 2 EXACTLY || 3 AT_MOST
分别代表什么意思呢- -很简单那
- UNSPECIFIED 没有做任何限制，他可以是任何大小，说白了就就是没给数字（这个我拿不准，希望有人能告诉我一下）
- EXACTLY 精确数值模式，就是你在xml里面给定了大小 他就走这个模式
- AT_MOST 最大值嘛 就是 match_parent 你父组件多大 他就多大
但是这个View却用不到这个 哈哈哈哈哈哈哈
我们看一下View 他的宽度是什么，不就是 控件宽度 = 左边边距 + 右边边距 + 字母宽度，高度呢？？ 不就是match_parent嘛 所以我们也就测量完成了- -
image.png
如果你问我为什么测量A? 你测量Y也可以- -
-
第四步 画出来--->onDraw()
这里就要涉及一个简单的想法 文字每次绘制的高度怎们递增，或者说按照什么标准来递增，我们看第一个文字 它画的时候是不是 仅仅考虑了他基线的位置（不知道什么是基线的我也帮不了你）
image.png
所以我们计算出第一个基线的位置
baseline = 字母块中心高度 + ascent- descent；
好的 我们知道了位置- -这不就完事了么！ 剩下的不就是看看之前有多少块 然后每块多高然后乘画到第几个了在加上自己基线的高度么- - 所以代码是这样的
每一个字母块的高度 * 当前第几个 + baseline
高度我们知道了，那宽度呢？？ 宽度不就是 控件宽度 / 2 - 字母宽度 / 2
高度，宽度我们都知道了
for循环你还不会么 然后看看效果吧 是不是出来了 美滋滋
for (int i = 0; i < 字母数量; i++) {
canvas.drawText(字母数组[i], 宽度, 字母块的高度 * i + mBaseline, mPaintTouch);
}
-
第五步 onTouchEvent事件处理
这东西你得触摸吧，触摸有几种啊？？无非就是 按下 移动 抬起来
所以基础代码就是 算了 基础代码不想写了 switch case写写吧- -
一点一点分析 - -你触摸上了怎么知道，你当前位置选择得是那个 字母
event.getY() 可以获取你当前触摸得位置
我们还知道每一个字母块的高度 所以啊- - 一个除法就出来了啊
index = (int) (event.getY() / 每一个字母块); index 就是你触摸的26个字母的哪一个
-
第六步 接口回掉处理
到了这一步 也就是最后一步了 需要把你的数据传给外面- - 设置监听
直接上代码了
private OnTouchMyListener mOnTouchMyListener;
public void setOnTouchMyListener(OnTouchMyListener Listener) {
this.mOnTouchMyListener = Listener;
}
/**
* 回调监听
*/
public interface OnTouchMyListener {
/**
* 侧边栏滑动监听
*
* @param nowLetter 选中字母
* @param nowIndex 选中数字
* @param isTouch 是否正在触碰
*/
void SidebarLetterTouchListener(String nowLetter, int nowIndex, boolean isTouch);
}
然后分析一手，我们的这个数字是不是实时改变的呢? 当然是了- -所以在 触摸事件的移动中去发送
if (mOnTouchMyListener != null) {
mOnTouchMyListener.SidebarLetterTouchListener(现在选择的字母, 现在选择的下标, 手指是否离开了);
}
至此也就结束了，我在代码中写了一些注释 可以看一看，东西很简单，但是还是挺有成就感的，我接下来可能会继续做，加一些效果 GitHub：https://github.com/XiaMuYaoDQX/CustomView 给个start吧！
（一个想进阶高级的工程师 一个交流群：233138718 平时交流交流怎么吹牛逼啥的）
网友评论