一個公用的topbar

在做項目的時候，經常會用到左邊是返回鍵、右邊是更多、中間是文字描述的topbar，那麼就有必要寫一個公用的了。

topbar的屬性

back鍵的文字大小、文字顏色和背景；
more鍵的文字大小、文字顏色和背景；
中間文字描述的文字、顏色和大小。

在values文件裏創建attrs.xml，分別定義：

    <declare-styleable name="TopBar">
        <attr name="title" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>
    </declare-styleable>

佈局

這裏用的是RelativeLayout，當然也可以使用LinearLayout。

public class TopBar extends RelativeLayout {

    private String mTopBar_title;
    private int mTopBar_titleTextColor;
    private float mTopBar_titleTextSize;
    private int mTopBar_leftTextColor;
    private int mTopBar_rightTextColor;
    private Drawable mTopBar_leftBackground;
    private Drawable mTopBar_rightBackground;
    private String mTopBar_leftText;
    private String mTopBar_rightText;

    private Button mLeftButton;
    private Button mRightButton;
    private TextView mTitleView;
    private TopBarClickListener mTopBarClickListener;

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public TopBar(Context context) {
        this(context, null);
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public TopBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initData(context, attrs);
        initView(context);
        initListener();
    }

    private void initListener() {
        /**
         * 這裏是把back和more的點擊事件交給調用者
         */
        mRightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mTopBarClickListener != null){
                    mTopBarClickListener.rightClick();
                }
            }
        });

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

    public void setTopBarClickListener(TopBarClickListener topBarClickListener){
        mTopBarClickListener = topBarClickListener;
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    private void initView(Context context) {
        mLeftButton = new Button(context);
        mRightButton = new Button(context);
        mTitleView = new TextView(context);

        mLeftButton.setTextColor(mTopBar_leftTextColor);
        mLeftButton.setText(mTopBar_leftText);
        mLeftButton.setBackground(mTopBar_leftBackground);

        mRightButton.setTextColor(mTopBar_rightTextColor);
        mRightButton.setText(mTopBar_rightText);
        mRightButton.setBackground(mTopBar_rightBackground);

        mTitleView.setText(mTopBar_title);
        mTitleView.setTextColor(mTopBar_titleTextColor);
        mTitleView.setTextSize(mTopBar_titleTextSize);
        mTitleView.setGravity(Gravity.CENTER);

        LayoutParams mLeftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        /**
         * 設置該佈局在RelativeLayout中的位置
         */
        mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        addView(mLeftButton, mLeftParams);

        LayoutParams mRightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        addView(mRightButton, mRightParams);

        LayoutParams mTitleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(mTitleView, mTitleParams);
    }

    private void initData(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        mTopBar_title = typedArray.getString(R.styleable.TopBar_title);
        mTopBar_titleTextColor = typedArray.getColor(R.styleable.TopBar_titleTextColor, 0);
        mTopBar_titleTextSize = typedArray.getDimension(R.styleable.TopBar_titleTextSize, 0);
        mTopBar_leftTextColor = typedArray.getColor(R.styleable.TopBar_leftTextColor, 0);
        mTopBar_rightTextColor = typedArray.getColor(R.styleable.TopBar_rightTextColor, 0);
        mTopBar_leftBackground = typedArray.getDrawable(R.styleable.TopBar_leftBackground);
        mTopBar_rightBackground = typedArray.getDrawable(R.styleable.TopBar_rightBackground);
        mTopBar_leftText = typedArray.getString(R.styleable.TopBar_leftText);
        mTopBar_rightText = typedArray.getString(R.styleable.TopBar_rightText);
        /**
         * 當獲取完所有的屬性值後，需要調用TypedArray的recycle方法來完成資源回收
         */
        typedArray.recycle();
    }
    /**
     * 控制back鍵和more鍵的顯示和隱藏
     * @param id
     * @param flag
     */
    public void setButtonVisable(int id, boolean flag){
        if (flag){
            if (id == 0){
                mLeftButton.setVisibility(VISIBLE);
            }else {
                mRightButton.setVisibility(VISIBLE);
            }
        }else {
            if (id == 1){
                mLeftButton.setVisibility(GONE);
            }else {
                mRightButton.setVisibility(GONE);
            }
        }
    }

    public interface TopBarClickListener{
        void leftClick();
        void rightClick();
    }
}

佈局文件

<com.why.topbar.TopBar xmlns:topbar="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/topBar"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    topbar:leftBackground="@drawable/blue_button"
    topbar:leftText="back"
    topbar:leftTextColor="#FFFFFF"
    topbar:rightBackground="@drawable/blue_button"
    topbar:rightText="more"
    topbar:rightTextColor="#FFFFFF"
    topbar:title="自定義標題"
    topbar:titleTextColor="#123412"
    topbar:titleTextSize="5sp"
    >
</com.why.topbar.TopBar>

到這裏，一個topbar就完成了，當一個頁面佈局需要使用topbar的時候，就可以使用通過<include>標籤使用.

<include layout="@layout/topbar"/>

拓展

有時候，我們需要更復雜的佈局也可以通過這種方式實現。

圖上的實際上是兩個textview，左邊的textview設置drawableLeft，右邊的textview設置drawableTop就可以了。