tabbar简单实现消息提示(小红点)_radiogroup 红点_barnett_y的博客

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

<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起来，效果图如下： 
                    简单实现消息提示(小红点)最近有些忙，版本不断叠加，需求一个接一个。这不，其中有一个需求就是在原有的版本上显示一个红点提示，类似于qq未读消息一样，需求图如下：http://www.jianshu.com/p/b6651995397fQQ截图20170421140930.png没错，看起来好简单，可我们再看下设计师给我们切的图(设计师很周到哈，这里谢谢谢谢，嘿嘿
一行代码初始化:
 XHTabBar *tabbar = [[XHTabBar alloc] initWithControllerArray:controllerArray titleArray:titleArray imageArray:imageArray selImageArray:selImageArray height:tabBarHeight];
//设置为根控制器
self.window.rootViewController = tabbar;
使用说明详见github
代码地址:https://github.com/CoderZhuXH/XHTabBar
                    Sea Bean: 
                    https://git.hust.cc/echarts-for-react/examples/svg/
https://github.com/hustcc/echarts-for-react
这两个都可以
                el-table 实现单元格内编辑功能
                    不懂代码的老王: 
                    兄弟们，你们的key不会报错吗
                移动端布局之postcss-px-to-viewport
                    weixin_44946095: 
                    写得真不错，可算弄懂了