［自定義View］未讀消息數角標

今天我們再來聊一聊自定義View吧

看看一下我們今天要完成的效果圖吧！

簡書App

掘金App

新浪微博

然后來看一下我們的效果圖：

自定義View

效果圖

我們應該怎么來實現這樣的自定義控件呢？

其實很簡單，只要幾行代碼你就可以實現這樣一個控件，具體怎么做呢，我們一步一步來。

首先，我們要知道，這個控件是一個組合的自定義View，上下結構，上面是ImageView，下面是TextView，然后右上角還有一個TextView

所以我們先把這個布局寫出來

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/bar_iv"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/bar_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bar_iv"
        android:gravity="center"
        android:text="消息" />

    <TextView
        android:id="@+id/bar_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="-12dp"
        android:layout_toRightOf="@+id/bar_iv"
        android:background="@drawable/red_dot_bg"
        android:text="1"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textSize="10dp" />
</RelativeLayout>a

默認的TextView是方形的，不會出現圓角，我們需要給它指定一個Shape，Shape文件也很簡單，請看Shape文件的代碼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="180dip" />
    <solid android:color="#FF0000" />
    <padding
        android:left="4dip"
        android:right="4dip" />
</shape>

shape文件定義好之后，直接在TextView的background屬性中使用就好了

好了，布局文件定義好了，我們來看一下如何來使用這個布局文件

我們需要創建一個BottomBarView并且繼承Relativelayout，然后重寫它的構造方法，接下來我們不需要重寫onMeasure、onLayout、onDraw，我們只需要簡單的一步，就可以把控件都加載出來了，請看代碼：

public class BottomBarView extends RelativeLayout {

    private TextView bar_num;

    public BottomBarView(Context context) {
        this(context, null);
    }

    public BottomBarView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BottomBarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        RelativeLayout rl = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.change_color_bar, this, true);
        bar_num = (TextView) rl.findViewById(R.id.bar_num);
    }
}

看到沒有我也沒做啥，就是把之前寫的布局inflate出來，然后添加到這個自定義View里面來了，很簡單吧。

到這里還沒有完全寫好，接下來我們要添加這樣的功能，動態的修改右上角紅色角標的顯示數字，就像QQ未讀消息一樣，看一下我們代碼是怎么寫的：

public class BottomBarView extends RelativeLayout {

    private int msgCount;
    private TextView bar_num;

    public BottomBarView(Context context) {
        this(context, null);
    }

    public BottomBarView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BottomBarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        RelativeLayout rl = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.change_color_bar, this, true);
        bar_num = (TextView) rl.findViewById(R.id.bar_num);
    }

    public void setMessageCount(int count) {
        msgCount = count;
        if (count == 0) {
            bar_num.setVisibility(View.GONE);
        } else {
            bar_num.setVisibility(View.VISIBLE);
            if (count < 100) {
                bar_num.setText(count + "");
            } else {
                bar_num.setText("99+");
            }
        }
        invalidate();
    }

    public void addMsg() {
        setMessageCount(msgCount + 1);
    }
}

其實就是加了一個setMessageCount方法和addMsg方法，可以動態更新未讀消息的顯示數量。

說一下我的觀點吧，加載布局文件來自定義View比較省事，但是不夠靈活。直接通過new TextView或者new ImageView來進行自定義控件比較麻煩，在業務邏輯不是很復雜的情況下，直接用布局文件自定義View就好了。因為我一直覺得，夠用就好。

好了，整個自定義View就完成了，是不是很簡單，效果圖已經在文章開頭發了

 

來自：http://www.jianshu.com/p/98932e5d0202