Android常用需求三:角标_TipTextView角标库
前言
角标的需求在app是经常需要用到的,比如未读通知/信息等,一般,我们可以通过嵌套相对布局的方式来设置角标,但是除了TextView，可能Button,ImageView等也需要,那只能写多次这类布局了,而且角标的位置,颜色,形状的多变,自然而然，我们就需要把这些类似的需求归纳后，做出一个通用大部分情况的自定义View.今天给大家介绍我自己定义的角标库和基本构思过程.
演示效果
GitHub链接
角标控件库_GitHub
特性:
1.TipTextView______提供四种模式,固定模式，(默认/居中)环绕模式，垂直居中环绕模式和水平居中环绕模式,其中固定模式和居中环绕模式支持Drawable. 角标支持(左 上 右 下 左上 左下 右上 右下)八个方向,支持在xml或java代码控制角标背景颜色和半径,角标文字的颜色和大小, 环绕间隔的大小,角标的形状(圆形，矩形，圆角矩形，椭圆形(5.0适用)),圆角的大小,外环(边框)的颜色和宽度;
2.TipLayout________可以用于嵌套Button ,ImageView ,CheckBox;
3.TipLinearLayout___可用作具有角标功能的LinearLayout使用，内部子View必须使用layout_weight参数作为宽度指标, 否则请使用LinearLayout搭配TipTextView使用;
4.TipRadioGroup____可用作具有角标功能的RadioGroup使用，内部只能包含RadioButton， 且RadioButton必须使用layout_weight参数作为宽度指标;.
导入
compile
使用
1.TipTextView
(1).自定义属性
1-TipTextView
ttv_color——————角标颜色 ttv_outer_color———角标外环(边框)颜色 ttv_radius —————角标半径 ttv_outer_stroke ——角标外环(边框)宽度
ttv_textcolor ————角标文本颜色 ttv_sice ——————角标文本字号大小 ttv_max ——————角标文本数字最大值 ttv_rHeight—————角标矩形高度 ttv_rWidth —————角标矩形宽度 ttv_corner—————角标圆角大小 ttv_max ——————角标文本数字最大值 ttv_rHeight ————角标矩形高度 ttv_rWidth—————角标矩形宽度 ttv_corner—————角标圆角大小 ttv_sbape —————角标形状: 圆形-circle 圆角矩形-round_rectangle 矩形-rectangle 椭圆-oval ttv_type——————角标环绕方式:固定-fixation 环绕-surround 垂直居中环绕-surround_v 水平居中环绕-surround_h
ttv_surround_padding——角标环绕间距 ttv_direction ————角标位置: left top right bottom topLeft topRight bottomLeft bottomRight
其中角标环绕方式和角标位置(即下图中8个红点)见下图
2. 环绕方式
(2)环绕方式:
a.固定模式,角标会显示在View的固定位置，和View的宽高有关，不会随文本在View中的位置的改变而改变:
3.fixation
b.环绕模式:角标会一直环绕在文本的四周,与View的宽高没有直接关系:
4.surround
c.垂直环绕:当View的gravity=center_vertical时,推荐使用该模式
水平环绕:当View的gravity=center_horizontal时,推荐使用该模式。
5.surround_v/h
注:所有模式都可以通过 ttv_surround_padding 属性设置对角标和文本的间距作调整.
(3)属性方法
除了xml,也支持在代码中使用相应的set方法进行设置(请看文尾).
(4)构建思路:
一般的角标颜色，形状之类的都是会想到和加入的，但是一些其他的特性，我们可以从实际开发中慢慢归纳进来，这样自定义的控件适应性才会更高.
a.首先，TetxView的角标是用的最多的,比如导航栏和选项卡,都会用它作为文本显示,比如微信钱包,就会有一个小红点作为消息提示;
11- wechat
b:可以发现,小红点的位置不一定是常见的右上角,所以设计了8个方向,即属性 ttv_direction 之所以不用弧度,因为计算简单嘛(- _ -)!!!;
c:再看看，小红点所在的TextView的gravity属性不一定是center,这个TextView的宽度也是未知,比如上面图中的也可能为center-vertical,为了省掉占位的View,所以加入属性 ttv_type ，其中固定和环绕两种模式可以应付大多数需求;
d:还可以看到钱包前面有个图标,实际上可以给TextView设置Drawable,这样一整行其实就一个TextView控件,所以在计算小红点的位置时,还考虑了Drawable的大小;
e:最后,小红点和文本的距离需要可以自由的调整，那就需要这个环绕间距属性. ttv_surround_padding 了;
一步步下来，我们可以看到，给TextView加小红点,对于一些特殊情况，我们不需要额外的嵌套和其他View的帮助,也可以解决这些情况.
2.TipLayout
自定义属性和set方法和TipTextView一致,继承至FrameLayout.
(1)ImageView,Button,CheckBox也是会有小红点的情况的:
12-wechat
试过自定义这几个控件,但是觉得兼容性不好，比如要加小红点的是第三方的ImageView,Button之类的，所以选择了嵌套的方式.
12-TipLayout
如果有更好的方式，可以告知一下.
3.TipLinearLayout/TipRadioGroup
自定义属性和set方法和TipTextView一致，分别继承至其后缀.
(1)这两个控件里面的Child用到小红点的情况也是蛮多的，一个个设置TipTextView的话,太麻烦了，而且LinearLayout的Child不一定是TextView,一般也不会用TipLayout再去给这些Child包一层,所以这俩货就诞生了:
13-TipLinearLayout/TipRadioGroup
适合一些需要提示的选项卡.
(2)用起来会有一些限制,
TipLinearLayout和TipRadioGroup都需要用layout_weight作为Child的宽度属性;
最后附上set方法,具体Demo可以down下我Github上的libarary,改成Application和加上Id即可.
14-set_method
15- setMethod
注意事项:
在使用TipRadioGroup时,使用 setTipSices(int index,float tipSice)/setTipRadiuses(int index,int tipRadius) 方法给该控件内部的指定的RadioButton设置角标文字大小/角标背景半径时,请务必确保先前已调用 setTipSices(int[] tipSices)/setTipRadiuses(int[] tipRadiuses) 方法.
这种微小而多变的需求，只要我们在开发中慢慢积累并归纳，总会有收获的，觉得我的库好用的话，点下star或提下意见吧 (*0 - 0*)!!!.
