今天我們封裝一個底部的選單欄，這個大多數的應用都會用到，因此我們來自定義，方便以後專案的使用。

該控制元件的實現將分上下篇來介紹，先來看一個選單欄的子控制元件–MenuItemM，這個控制元件有什麼用呢？我們來看下一些主流app上的一些控制元件，如：

以上三張圖片分別來自微信，今日頭條和去哪兒，接下來我們將看到如何通過一個控制元件來實現不同的效果。
首先看下我寫的一個deme

可以看到標題欄的訊息控制元件，以及底部三個選單項都是通過MenuItemM來實現的

接下來看下實現過程
1 定義屬性

<declare-styleable name="MenuItemM"
 
>
    <attr name="backColor" />
    <attr name="textColor" />
    <attr name="textColorPress" />
    <attr name="iconDrawable" />
    <attr name="iconDrawablePress" />
    <attr name="text" />
    <attr name="textSize" />
    <attr name="unReadCount" format="integer"
 
 />
    <attr name="visibleMore">
        <enum name="visible" value="0x00000000" />
        <enum name="gone" value="0x00000008" />
    </attr>
    <attr name="visibleNew">
        <enum name="visible" value="0x00000000" />
        <enum name="gone" value="0x00000008" />
    </attr>
</declare-styleable
 
>

這裡面重點看一下visibleMore和visibleNew裡面的兩個列舉值,這裡面與View原始碼中的visible和gone保持一致。關於如何定義屬性以及使用，可以參考我之前的部落格。

2 佈局檔案view_menu_item_m.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:landptf="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <com.landptf.view.ButtonExtendM
        android:id="@+id/bem_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="8dp"
        landptf:style="iconUp" />

    <ImageView
        android:id="@+id/iv_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:background="@drawable/icon_more"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/iv_new"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:background="@drawable/icon_new"
        android:visibility="gone" />

    <com.landptf.view.ButtonM
        android:id="@+id/btm_unread_count"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="top|right"
        android:textSize="12sp"
        android:visibility="gone"
        landptf:backColor="#ff0000"
        landptf:fillet="true"
        landptf:shape="oval"
        landptf:textColor="@android:color/white" />

</FrameLayout>

這裡面使用了FrameLayout，主要使用了ButtonExtendM上下結構的控制元件加上右上角的三種提示資訊，數量提示，more提示，new提示

3 MenuItemM.java

package com.landptf.view;

import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.landptf.R;

/**
 * Created by landptf on 2016/11/07.
 * 選單按鈕，例如底部選單的item或者訊息控制元件
 */
public class MenuItemM extends FrameLayout {

    private static final String TAG = MenuItemM.class.getSimpleName();

    /**
     * 定義控制元件
     */
    private ButtonExtendM bemMenu;
    private ImageView ivMore;
    private ImageView ivNew;
    private ButtonM btmUnReadCount;

    private OnClickListener onClickListener = null;

    public interface OnClickListener {
        void onClick(View v);
    }

    /**
     * 設定View的Click事件
     *
     * @param l
     */
    public void setOnClickListener(OnClickListener l) {
        this.onClickListener = l;
        //攔截ButtonExtendM控制元件的點選事件，使其指向this.onclick
        bemMenu.setOnClickListener(new ButtonExtendM.OnClickListener() {
            @Override
            public void onClick(View v) {
                onClickListener.onClick(v);
            }
        });
    }

    public MenuItemM(Context context) {
        super(context);
    }

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

    public MenuItemM(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        //載入佈局
        LayoutInflater.from(context).inflate(R.layout.view_menu_item_m, this, true);
        //初始化控制元件
        bemMenu = (ButtonExtendM) findViewById(R.id.bem_menu);
        ivMore = (ImageView) findViewById(R.id.iv_more);
        ivNew = (ImageView) findViewById(R.id.iv_new);
        btmUnReadCount = (ButtonM) findViewById(R.id.btm_unread_count);
        btmUnReadCount.setGravity(Gravity.CENTER);
        TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.MenuItemM, defStyle, 0);
        if (a != null) {
            //設定背景色
            ColorStateList colorList = a.getColorStateList(R.styleable.MenuItemM_backColor);
            if (colorList != null) {
                int backColor = colorList.getColorForState(getDrawableState(), 0);
                if (backColor != 0) {
                    setBackColor(backColor);
                }
            }
            //設定icon
            Drawable iconDrawable = a.getDrawable(R.styleable.MenuItemM_iconDrawable);
            if (iconDrawable != null) {
                setIconDrawable(iconDrawable);
            }
            //記錄View被按下時的icon的圖片
            Drawable iconDrawablePress = a.getDrawable(R.styleable.MenuItemM_iconDrawablePress);
            if (iconDrawablePress != null) {
                setIconDrawablePress(iconDrawablePress);
            }
            //設定文字的顏色
            ColorStateList textColorList = a.getColorStateList(R.styleable.MenuItemM_textColor);
            if (textColorList != null) {
                int textColor = textColorList.getColorForState(getDrawableState(), 0);
                if (textColor != 0) {
                    setTextColor(textColor);
                }
            }
            //記錄View被按下時文字的顏色
            ColorStateList textColorPressList = a.getColorStateList(R.styleable.MenuItemM_textColorPress);
            if (textColorPressList != null) {
                int textColorPress = textColorPressList.getColorForState(getDrawableState(), 0);
                if (textColorPress != 0) {
                    setTextColorPress(textColorPress);
                }
            }
            //設定顯示的文字內容
            String text = a.getString(R.styleable.MenuItemM_text);
            if (text != null) {
                setText(text);
            }
            //設定文字字型大小
            float textSize = a.getFloat(R.styleable.MenuItemM_textSize, 0);
            if (textSize != 0) {
                setTextSize(textSize);
            }
            //設定更多提示是否顯示
            int visibleMore = a.getInt(R.styleable.MenuItemM_visibleMore, -1);
            if (visibleMore != -1){
                setVisibilityMore(visibleMore);
            }
            //設定new提示是否顯示
            int visibleNew = a.getInt(R.styleable.MenuItemM_visibleNew, -1);
            if (visibleNew != -1){
                setVisibilityNew(visibleNew);
            }
            //設定訊息未讀數量
            int unReadCount = a.getInt(R.styleable.MenuItemM_unReadCount, -1);
            if (unReadCount != -1){
                setUnReadCount(unReadCount);
            }
            a.recycle();
        }

        setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (onClickListener != null) {
                    onClickListener.onClick(v);
                }
            }
        });
    }

    /**
     * 設定為被選中狀態
     *   @param state in MotionEvent.ACTION_DOWN or MotionEvent.ACTION_UP
     */
    public void setPressState(int state){
        if (state != MotionEvent.ACTION_DOWN && state != MotionEvent.ACTION_UP){
            Log.w(TAG, "無效引數");
            return;
        }
        bemMenu.setPressState(state);
    }

    /**
     * 設定View的背景色
     *
     * @param backColor
     */
    public void setBackColor(int backColor) {
        bemMenu.setBackColor(backColor);
    }

    /**
     * 設定icon的圖片
     *
     * @param iconDrawable
     */
    public void setIconDrawable(Drawable iconDrawable) {
        bemMenu.setIconDrawable(iconDrawable);
    }

    /**
     * 設定View被按下時的icon的圖片
     *
     * @param iconDrawablePress
     */
    public void setIconDrawablePress(Drawable iconDrawablePress) {
        bemMenu.setIconDrawablePress(iconDrawablePress);
    }

    /**
     * 設定文字的顏色
     *
     * @param textColor
     */
    public void setTextColor(int textColor) {
        if (textColor == 0) return;
        bemMenu.setTextColor(textColor);
    }

    /**
     * 設定View被按下時文字的顏色
     *
     * @param textColorPress
     */
    public void setTextColorPress(int textColorPress) {
        if (textColorPress == 0) return;
        bemMenu.setTextColorPress(textColorPress);
    }

    /**
     * 設定顯示的文字內容
     *
     * @param text
     */
    public void setText(CharSequence text) {
        bemMenu.setText(text);
    }

    /**
     * 獲取顯示的文字
     *
     * @return
     */
    public String getText() {
        return bemMenu.getText();
    }

    /**
     * 設定文字字型大小
     *
     * @param size
     */
    public void setTextSize(float size) {
        bemMenu.setTextSize(size);
    }

    /**
     * 設定更多提示是否顯示
     *   如果顯示則先重置new和未讀數量圖示
     * @param visibleMore
     */
    public void setVisibilityMore(int visibleMore) {
        if (visibleMore == VISIBLE) {
            resetTip();
        }
        ivMore.setVisibility(visibleMore);
    }

    /**
     * 設定New提示是否顯示
     *   如果顯示則先重置更多和未讀數量圖示
     * @param visibleNew
     */
    public void setVisibilityNew(int visibleNew) {
        if (visibleNew == VISIBLE) {
            resetTip();
        }
        ivNew.setVisibility(visibleNew);
    }

    /**
     * 設定未讀數量
     *   如果小於等於0，表示隱藏
     *   如果大於99，則將其隱藏，同時顯示更多的提示
     *   如果在0-99區間，則隱藏更多和new圖示
     * @param unReadCount
     */
    public void setUnReadCount(int unReadCount){
        if (unReadCount <= 0){
            btmUnReadCount.setVisibility(GONE);
            //如果先設定100（此時會顯示ivMore），再設定0，因此此處應將ivMore同時置為GONE
            if (ivMore.getVisibility() == VISIBLE){
                ivMore.setVisibility(GONE);
            }
            return;
        }
        if (unReadCount > 99){
            setVisibilityMore(VISIBLE);
            return;
        }
        resetTip();
        btmUnReadCount.setVisibility(VISIBLE);
        btmUnReadCount.setText(unReadCount + "");
    }

    /**
     * 重置提示資訊
     */
    private void resetTip(){
        setVisibilityMore(GONE);
        setVisibilityNew(GONE);
        setUnReadCount(0);
    }

}

程式碼有點長，邏輯比較簡單，本身自定義控制元件的過程都是類似的，比較多的是對外提供的介面。

特別要注意的是使用時大小要設定為自定義，如果指定了大小或者match_parent，則子控制元件將居於左上角，無法居中。

4 最後簡單看下如何使用

<com.landptf.view.MenuItemM
    android:id="@+id/mim_home_page"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_marginLeft="32dp"
    landptf:iconDrawable="@drawable/icon_home_page"
    landptf:iconDrawablePress="@drawable/icon_home_page_press"
    landptf:textColor="#696969"
    landptf:textColorPress="#303f9f"
    landptf:text="首頁"
    />

這裡面主要使用了以下四個屬性，分別表示預設圖示和按下後顯示的圖示，以及文字顏色和按下後的文字顏色

landptf:iconDrawable="@drawable/icon_home_page"
landptf:iconDrawablePress="@drawable/icon_home_page_press"
landptf:textColor="#696969"
landptf:textColorPress="#303f9f"

final MenuItemM mimHomePage = (MenuItemM) findViewById(R.id.mim_home_page);
if (mimHomePage != null){
    //預設為選中狀態
    mimHomePage.setPressState(MotionEvent.ACTION_DOWN);
    mimHomePage.setVisibilityMore(View.VISIBLE);
    mimHomePage.setOnClickListener(new MenuItemM.OnClickListener() {
        @Override
        public void onClick(View v) {
            //按下後隱藏提示資訊
            mimHomePage.setVisibilityMore(View.GONE);
        }
    });
}

好了，就介紹到這裡了，更多的使用方法可以參考原始碼MenuItemMTestActivity.java。
全部程式碼已託管到開源中國的碼雲上，歡迎下載，地址：https://git.oschina.net/landptf/landptf.git