前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义角标库

自定义角标库

作者头像
我就是马云飞
发布2018-02-05 10:33:34
1.9K0
发布2018-02-05 10:33:34
举报
文章被收录于专栏:我就是马云飞我就是马云飞

前言

角标的需求在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) 方法.

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-09-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 我就是马云飞 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档