查看原文
其他

实现消息提示(小红点)就是这么简单

2017-08-18 kimiier 终端研发部

前言介绍

消息提示小红点的实现

kimiier的博客地址:

http://blog.csdn.net/qq_28268507/article/details/70314844

正文

最近有些忙,版本不断叠加,需求一个接一个。这不,其中有一个需求就是在原有的版本上显示一个红点提示,类似于qq未读消息一样,需求图如下:

没错,看起来好简单,可我们再看下设计师给我们切的图(设计师很周到哈,这里谢谢谢谢,嘿嘿)

设计师是分不同状态来切的,如果我们按照这个思维去根据不同状态判断实现的话,不是不行,而是稍微麻烦了些。我们能不能尽量对以前代码做轻微的改动就能实现新的需求呢?当然是可以的了。看下以前代码是如何实现的:

<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()); }
@Override
protected 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分析:
@Override
protected 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起来,效果图如下:

CSDN博客地址::

http://blog.csdn.net/qq_28268507/article/details/70314844

终端研发部提倡 没有做不到的,只有想不到的

在这里获得的不仅仅是技术!


让心,在阳光下学会舞蹈

让灵魂,在痛苦中学会微笑

—终端研发部—



如果你觉得此文对您有所帮助,欢迎入群 QQ交流群 :232203809   

微信公众号:终端研发部


            

这里学到不仅仅是技术

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存