前言
角标的需求在app是经常需要用到的,比如未读通知/信息等,一般,我们可以通过嵌套相对布局的方式来设置角标,但是除了TextView,可能Button,ImageView等也需要,那只能写多次这类布局了,而且角标的位置,颜色,形状的多变,自然而然,我们就需要把这些类似的需求归纳后,做出一个通用大部分情况的自定义View.今天给大家介绍我自己定义的角标库和基本构思过程.
特性:
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参数作为宽度指标;.
导入:
使用
1.TipTextView
(1).自定义属性
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)环绕方式:
a.固定模式,角标会显示在View的固定位置,和View的宽高有关,不会随文本在View中的位置的改变而改变:
b.环绕模式:角标会一直环绕在文本的四周,与View的宽高没有直接关系:
c.垂直环绕:当View的gravity=center_vertical时,推荐使用该模式。 水平环绕:当View的gravity=center_horizontal时,推荐使用该模式。
注:所有模式都可以通过 ttv_surround_padding 属性设置对角标和文本的间距作调整.
(3)属性方法
除了xml,也支持在代码中使用相应的set方法进行设置(请看文尾).
(4)构建思路:
一般的角标颜色,形状之类的都是会想到和加入的,但是一些其他的特性,我们可以从实际开发中慢慢归纳进来,这样自定义的控件适应性才会更高.
a.首先,TetxView的角标是用的最多的,比如导航栏和选项卡,都会用它作为文本显示,比如微信钱包,就会有一个小红点作为消息提示;
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也是会有小红点的情况的:
试过自定义这几个控件,但是觉得兼容性不好,比如要加小红点的是第三方的一些ImageView,Button之类的,所以选择了嵌套的方式.
如果有更好的方式,可以告知一下.
3.TipLinearLayout/TipRadioGroup
自定义属性和set方法和TipTextView一致,分别继承至其后缀.
(1)这两个控件里面的Child用到小红点的情况也是蛮多的,一个个设置TipTextView的话,太麻烦了,而且LinearLayout的Child不一定是TextView,一般也不会用TipLayout再去给这些Child包一层,所以这俩货就诞生了:
适合一些需要提示的选项卡.
(2)用起来会有一些限制,
TipLinearLayout和TipRadioGroup都需要用layout_weight作为Child的宽度属性;
最后附上set方法,具体Demo可以down下我Github上的libarary,改成Application和加上Id即可.
注意事项
在使用TipRadioGroup时,使用 setTipSices(int index,float tipsize)/setTipradiuses(int index,float tipradius) 方法给该控件内部的指定的RadioButton设置角标文字大小/角标背景半径时,请务必确保先前已调用 setTipSices(int[] tipsize)/setTipradiuses(int [] tipradius) 方法.