自定义具有Material Design效果的控件

今日科技快讯

今天是一年一度的购物狂欢节，相信大家的购物车里都装满了许许多多的东西，希望大家都尽量能保持理性消费，毕竟花出去的还是自己的钱。

作者简介

又到了最开心的星期五了，同时今天还是双十一，这个周末很多朋友都可以在家里开心地收包裹了。本周的最后一篇文章来自于 cxmscb 的投稿，讲的是自定义控件方面的知识，将会带大家一起实现一个具有Material效果的EditText。

xingfeng_coder 的博客地址：

http://blog.csdn.net/cxmscb

运行效果预览

按照常规先展示效果图并说明：

主要有以下几个效果：

• edittext中的内容为0时，标签不出现。

• edittext中的内容不为0时，标签开始出现。

• edittext获取焦点时，下划线的颜色/粗细会发生改变。

• edittext失去焦点时，下划线同样发生改变，标签颜色也更改。

• 当限制输入字符个数时，右下角计数文字会进行计数。

• 超过个数后，下划线和计数文字颜色会发生变化。

下面我们来动手开始实现。

继承EditText

为保留EditText的一些独特属性，我们选择继承EditText来实现自定义MaterialEditText。但在原生的EditText动手脚绘制一些文字/线，我们需要进行一些预处理：

1. 原生EditText本身含有下划线，我们需要将原生下划线去掉，这里可以通过设置EditView背景为null来实现：

2. 要绘制文字/下划线，我们需要获得坐标。而EditText的内部是可以滑动的，随着文字的增加，高度也会自动的增长。这里我们获取坐标时，使用 getScrollX() 和 getScrollY() 这两个函数获取输入状态下，我们需要的不断变化的横坐标和纵坐标：

3. 在系统开始绘制MaterialEditText之前，我们需要重新设置原生EditText的padding值，为什么需要重新设置padding值呢？因为我们在原生EditText上绘制文字和下划线等，占用了输入框的高度。重新设置padding值后，我们可以在padding的地方绘制我们的文字和下划线。一般我们设置顶部和底部的padding值就好了：

自定义属性

解决了上面的问题后，我们需要为MaterialEditText自定义一些常用的属性：

• preLineColor: 获取焦点后的下划线颜色

• labelText: 标签的文字

• labelColor: 标签文字的颜色

• maxLength: 最大的字数限制。-1是为不限制字数

• overlengthColor: 超过限制后的下划线和右下角计数文字的颜色

设置标签的动画

从上面的GIF动画可知，label有一个浮现和浮走的动画，这里主要使用了属性动画获取标签文字的透明度和移动的高度比例：

我们发现，浮出动画和浮走动画正是一对相互逆序播放的动画，所以我们只设置一个动画即可，之后再进行逆序播放达到浮走的效果。

对EditText设置监听

因为输入字符的个数不同以及是否得到焦点的不同，需要对下划线、标签文字、右下角计数文字设置不同的颜色和对标签文字播放动画：

最后的onDraw()

对标签的绘制 + 对下划线的绘制 + (对右下角计数文字的绘制) + 原生EditTetx的绘制：

XML使用实例

这里的MaterialEditText使用效果和一开始的GIF图效果是一样的：

完整源码

想要查看或下载完整源码的朋友，点击文章最下方的 阅读原文 即可。

更多

每天学习累了，看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号，每天都会有好心情。

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：