一个公用的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就可以了。