簡單實作消息提示(小紅點)

###簡單實作消息提示(小紅點)

#####最近有些忙，版本不斷疊加，需求一個接一個。這不，其中有一個需求就是在原有的版本上顯示一個紅點提示，類似于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起來，效果圖如下：

#####over！