轻松打造APP统一标题栏

在APP中，标题栏的作用举足轻重，能够很好的告诉用户当前所处在的位置。为了更好的用户体验，一款APP的所有标题栏的格式都应该统一。常见的标题栏形式如下两种。

标题一

标题二

一般的实现方式都是在每个Activity中的XML文档中进行布局，然后在Java文件中拿到相关组件，然后进行数据填冲和设置点击事件。这样做的缺点就是代码冗余，开发效率低，如果需要修改需求的比较麻烦。那有没有好的解决方案呢？ 答案是肯定的，下面进入主题。

需要实现APP统一标题栏， 只需要自定义一个组件就好。废话不多说，直接上代码。

public class TitleBarView extends RelativeLayout {
    private static final String TAG = TitleBarView.class.getSimpleName();
    private ImageView mLiftView;
    private TextView mTitleView, mRightView;
    // 布局属性，用来控制组件元素在ViewGroup中的位置
    private LayoutParams mLeftParams, mTitlepParams, mRightParams;

    //左边组件的属性
    private Drawable mLeftImage;

    //中间组件的属性
    private float mCenterTextSize;
    private String mCenterText;
    private int mCenterColor;

    //右边组件的属性
    private float mRightTextSize;
    private String mRightText;
    private int mRightTextColor;

    private onClickListener mListener;

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

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

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

    private void init(Context context, AttributeSet attrs) {
        //获取自定义属性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TitleBarView);
        mLeftImage = ta.getDrawable(R.styleable.TitleBarView_leftImage);

        mCenterTextSize = ta.getDimensionPixelSize(R.styleable.TitleBarView_titleTextSize, 12);
        mCenterColor = ta.getColor(R.styleable.TitleBarView_titleTextColor, 0xff000000);
        mCenterText = ta.getString(R.styleable.TitleBarView_title);

        mRightTextSize= ta.getDimensionPixelSize(R.styleable.TitleBarView_rightTextSize, 12);
        mRightTextColor = ta.getColor(R.styleable.TitleBarView_rightTextColor, 0xff000000);
        mRightText = ta.getString(R.styleable.TitleBarView_rightText);
        //进行资源释放
        ta.recycle();


        mLiftView = new ImageView(context);
        mTitleView = new TextView(context);
        mRightView = new TextView(context);


        mLiftView.setImageDrawable(mLeftImage);
        mTitleView.setText(mCenterText);
        mTitleView.setTextColor(mCenterColor);
        mTitleView.setTextSize(pxToDp(mCenterTextSize));

        mRightView.setText(mRightText);
        mRightView.setTextSize(pxToDp(mRightTextSize));
        mRightView.setTextColor(mRightTextColor);

        // 为组件元素设置相应的布局元素
        mLeftParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        int px = dpToPx(5);
        mLiftView.setPadding(px, px, px, px);
        mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT | RelativeLayout.CENTER_VERTICAL, TRUE);
        // 添加到ViewGroup
        addView(mLiftView, mLeftParams);

        mRightParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        mRightView.setGravity(Gravity.CENTER_VERTICAL);
        addView(mRightView, mRightParams);
        mTitlepParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        mTitleView.setGravity(Gravity.CENTER_VERTICAL);
        mTitlepParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(mTitleView, mTitlepParams);

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

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

 private int  dpToPx(int dp){
        float density = getResources().getDisplayMetrics().density;
        return (int) (dp * density + 0.5);
    }

    private int pxToDp(float px){
        float density = getResources().getDisplayMetrics().density;
        return (int) (px / density + 0.5);
    }

    public void setRightTextSize(int mRightTextSize) {
        this.mRightTextSize = mRightTextSize;
        mRightView.setTextSize(mRightTextSize);
    }

    public void setRightText(String mRightText) {
        this.mRightText = mRightText;
        mRightView.setText(mRightText);
    }

    public void setRightTextColor(int mRightTextColor) {
        this.mRightTextColor = mRightTextColor;
        mRightView.setTextColor(mRightTextColor);
    }

    public void setTitleTextColor(int mCenterColor) {
        this.mCenterColor = mCenterColor;
        mTitleView.setTextColor(mCenterColor);
    }

    public void setTitleText(String mCenterText) {
        this.mCenterText = mCenterText;
        mTitleView.setText(mCenterText);
    }

    public void setTitleTextSize(int mCenterTextSize) {
        this.mCenterTextSize = mCenterTextSize;
        mTitleView.setTextSize(mCenterTextSize);
    }


    public void setLeftImage(Drawable mLeftImage) {
        this.mLeftImage = mLeftImage;
        mLiftView.setImageDrawable(mLeftImage);
    }

    public void setListener(onClickListener mListener) {
        this.mListener = mListener;
    }

    public interface onClickListener{
        // 左按钮点击事件
        void onLeftClick();
        // 右按钮点击事件
        void onRightClick();
    }
}

自定义属性：

<resources>
    <declare-styleable name="TitleBarView">
        <attr name="title" format="string" />
        <attr name="titleTextSize" format="dimension" />
        <attr name="titleTextColor" format="color" />

        <attr name="leftImage" format="reference" />
        
        <attr name="rightTextColor" format="color" />
        <attr name="rightTextSize" format="dimension"/>
        <attr name="rightText" format="string" />
    </declare-styleable>
</resources>

测试代码：

XML文件中：

<com.example.fblife.editorhelperdemo.view.TitleBarView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:leftImage="@mipmap/back"
        android:background="@color/colorPrimaryDark"
        app:title="标题"
        app:titleTextColor="#ffffff"
        app:titleTextSize="16sp"
        app:rightText="@string/complete"
        app:rightTextColor="#ffffff"
        app:rightTextSize="16sp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:id="@+id/titleBarView"
        />

MainActivity中：

public class MainActivity extends AppCompatActivity {
    private TitleBarView titleBarView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        titleBarView = (TitleBarView) findViewById(R.id.titleBarView);
        titleBarView.setListener(new TitleBarView.onClickListener() {
            @Override
            public void onLeftClick() {
                Toast.makeText(MainActivity.this, "你点击了左边的按钮", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onRightClick() {
                Toast.makeText(MainActivity.this, "你点击了右边的按钮", Toast.LENGTH_SHORT).show();
            }
        });
        titleBarView.setRightTextSize(20);
    
    }
}

最后来一张效果图：