自定义角标库

前言

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

原文发布于微信公众号 - 我就是马云飞(coding_ma)

原文发表时间:2017-09-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

Flex 布局教程:实例篇

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 ? 我只列出代码,详细的语法解...

42812
来自专栏everhad

Android自定义评分控件:RatingStarView

RatingStarView Android自定义的评分控件,类似RatingBar那样的,使用星星图标(full、half、empty)作为rating值的“...

3989
来自专栏葡萄城控件技术团队

使用CSS 3创建不规则图形

前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解...

24210
来自专栏算法+

pixel art之 hqx 算法

在去年的时候,偶然看到hqx算法。 一个高质量的插值放大算法。 与双线性插值等插值算法相比,这个算法放大后对人眼保护相对比较好。 没有双线性插值看起来模糊,固然...

3686
来自专栏天天

框架设计续集(三)

1053
来自专栏HTML5学堂

CSS3蒙版 — 元旦快乐!

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果,可我们在这里并不打算介绍PS的蒙版效果,而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-w...

38810
来自专栏Android开发那些事

手把手教你用RecyclerView实现猫眼电影选择效果

在官方推出RecyclerView 控件之后,越来越多的人都使用它代替之前的ListView。除了最普通的列表显示,RecyclerView还可以其他的很多效果...

1680
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

2012
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

Painter采用单例模式 优化原型模式,各Shape采用深拷贝来解决构造较长、繁琐的情况 比较new 对象和拷贝的效率问题,拷贝一点。具体见文:来谈谈Ja...

1453
来自专栏黑泽君的专栏

4道html笔试小题

1595

扫码关注云+社区

领取腾讯云代金券