tabbar简单实现消息提示(小红点)
来源:互联网 发布:js注释快捷键 编辑:程序博客网 时间:2024/05/23 02:03
简单实现消息提示(小红点)
最近有些忙,版本不断叠加,需求一个接一个。这不,其中有一个需求就是在原有的版本上显示一个红点提示,类似于qq未读消息一样,需求图如下:http://www.jianshu.com/p/b6651995397f
没错,看起来好简单,可我们再看下设计师给我们切的图(设计师很周到哈,这里谢谢谢谢,嘿嘿)
设计师是分不同状态来切的,如果我们按照这个思维去根据不同状态判断实现的话,不是不行,而是稍微麻烦了些。我们能不能尽量对以前代码做轻微的改动就能实现新的需求呢?当然是可以的了。看下以前代码是如何实现的:
<RadioGroup android:id="@+id/bottom_radiogroup" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="1px" android:background="@android:color/white" android:gravity="center_vertical" android:orientation="horizontal"> <RadioButton android:id="@+id/home_index" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="true" android:drawablePadding="2dp" android:drawableTop="@drawable/home_index_select" android:gravity="center" android:text="首页" android:textColor="@color/home_select_color" android:textSize="11sp" /> <RadioButton android:id="@+id/home_bx" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawablePadding="2dp" android:drawableTop="@drawable/home_bx_select" android:gravity="center" android:text="保险" android:textColor="@color/home_select_color" android:textSize="11sp" /> <RadioButton android:id="@+id/home_my" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawablePadding="2dp" android:drawableTop="@drawable/home_my_select" android:gravity="center" android:text="我的" android:textColor="@color/home_select_color" android:textSize="11sp" /></RadioGroup>
很简单,就一个RadioGroup 包含了三个RadioButton,我们都知道RadioGroup其实是继承Linearlayout的,所以这里让他的三个RadioButton平分,然后每个RadioButton在Gravity.Center居中显示即可,最后每个DrawableTop写一个selector就达到以前的需求了。
现在来看下新的需求,怎么办?自定义View可以完美实现这个需求,我们可以做到:
- 1.几乎不用改变以前的代码
- 2.不需要设计师给出的切图
- 3.不去关心各种状态,完全独立
代码如下:
public class NotifyRadioButton extends RadioButton {Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);float radius;boolean notify;public NotifyRadioButton(Context context, AttributeSet attrs) { super(context, attrs); paint.setColor(Color.RED); radius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 12.0f, context.getResources().getDisplayMetrics());}@Overrideprotected void onDraw(Canvas canvas) { super.onDraw(canvas); if (notify) { Drawable drawable = getCompoundDrawables()[1]; Rect bounds = drawable.getBounds(); //float cx, float cy, float radius, @NonNull Paint paint float cx = getMeasuredWidth() / 2 + bounds.width() / 2 - radius / 2; float cy = getPaddingTop() + bounds.height() / 4; canvas.drawCircle(cx, cy, radius, paint); }}/** * 新消息提醒 * * @param notify */public void notify(boolean notify) { this.notify = notify; invalidate();}}
思路:
首先我们继承自RadioButton,然后在canvas中自己绘制一个小红点即可。
canvas分析:
@Overrideprotected void onDraw(Canvas canvas) { super.onDraw(canvas); if (notify) { //获取到DrawableTop, 0 drawableleft 1 drawabletop 2 drawableright 3 drawablebottom Drawable drawable = getCompoundDrawables()[1]; //获取到Drawable的left right top bottom的值 Rect bounds = drawable.getBounds(); //这里分析: //getMeasuredWidth() / 2 等于整个控件的水平位置中心点 //bounds.width() /2 drawable宽度的一半 //radius / 2 小圆点宽度的一半 //由于我们在布局文件中设置了Gravity为Center,所以最后小红点的x坐标为drawable图片右边对其+radius/2的位置上 float cx = getMeasuredWidth() / 2 + bounds.width() / 2 - radius / 2; //y就比较好定义了,为drawable 1/4即可 float cy = getPaddingTop() + bounds.height() / 4; //float cx, float cy, float radius, @NonNull Paint paint //把小红点绘制上去 canvas.drawCircle(cx, cy, radius, paint); }}
计算方式,大家好好理一理,下面测试。我们在以前布局中,将最后一个RadioButton替换为我们自定义的
<RadioGroup android:id="@+id/bottom_radiogroup" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="1px" android:background="@android:color/white" android:gravity="center_vertical" android:orientation="horizontal"> <RadioButton android:id="@+id/home_index" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="true" android:drawablePadding="2dp" android:drawableTop="@drawable/home_index_select" android:gravity="center" android:text="首页" android:textColor="@color/home_select_color" android:textSize="11sp" /> <RadioButton android:id="@+id/home_bx" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawablePadding="2dp" android:drawableTop="@drawable/home_bx_select" android:gravity="center" android:text="保险" android:textColor="@color/home_select_color" android:textSize="11sp" /> <com.merchantshengdacar.view.NotifyRadioButton android:id="@+id/home_my" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawablePadding="2dp" android:drawableTop="@drawable/home_my_select" android:gravity="center" android:text="我的" android:textColor="@color/home_select_color" android:textSize="11sp" /></RadioGroup>
然后在代码中,通过id找到控件,调用notify(true),run起来,效果图如下:
0 0
- tabbar简单实现消息提示(小红点)
- 简单实现消息提示(小红点)
- 类似微信 在tabbar上添加小红点 消息提示 swift
- android自定义tabbar,并带badgeview消息提示
- 简单的消息提示
- 简单的消息提示
- 简单的消息提示
- 简单自定义Toast,实现好看的消息提示框
- Web Notification简单实现桌面消息通知(右下角提示)
- 在消息tabBar上面添加小红点
- jquery提示消息,简单通用
- css实现提示消息框
- Java怎样实现消息提示
- javascript实现任务栏消息提示
- 自定义view实现未读消息提示(小红点)
- Android 消息提示 小红点
- 添加微信tabbar中有消息的小红点
- C#+JS简单实现 定时轮询数据表 以及时弹出消息提示窗口
- C#委托
- Struts:Struts2.3-all版本的配置问题
- Office 2010 简体中文破解版 安装详解
- page cache和buffer cache的关系
- Sql Server数据库
- tabbar简单实现消息提示(小红点)
- 【Axure】省市区列表三级选择联动
- IMWeb训练营作业
- ubuntu 16.04 编译安装4.4.30内核
- java Mysql的跨服务器不同表结构的联合查询,两不同服务器上的不同表查询
- iOS验证nib文件是否存在
- C++ Primer Chapter 11-2
- react native Android启动页面、修改图标、修改名字、修复启动白屏
- Android Activity或者Fragment 向Adapter实时传递参数