自定义View之自定义标题栏

现在，几乎在每一个APP顶部都有一个标题栏，可能会用ActionBar，也可能自己写一个xml来添加标题栏中的控件。在以往自己做项目时大多使用后者来写一个标题栏，然后使用include包含在每一个页面布局中。今天，试下使用自定义属性来自定义一个标题栏。

一般的标题栏都分为三个模块：左侧、标题、右侧，所以我们自定义的标题栏中允许用户添加左侧文字（或图片）、标题、右侧文字（或图片），并且提供相应接口去调用点击事件。这里的Demo只是一个小小的例子，后面可以根据所需修改这个标题栏。

详细看下代码，功能还很少，也很简单..

首先，继承下RelativeLayout，然后在其中加入我们所需的控件：

/**
 * 自定义标题栏
 * @author AA
 * @Date 2015-01-19
 */
public class CustomTitleBar extends RelativeLayout {

    /** 文字 */
    private String mLeftText, mTitleText, mRightText;
    /** 文字大小 */
    private float mAmboTextSize, mTitleTextSize;
    /** 文字颜色 */
    private int mTextColor;
    /** 图片 */
    private int mLeftImage, mRightImage;
    /** 是否可见 */
    private boolean mLeftVisible, mRightVisible;

    /** 左边、标题、右边 */
    private TextView mLeftTextView, mTitleTextView, mRightTextView;
    private ImageView mLeftImageView, mRightImageView;
    /** 标题栏视图参数 */
    private LayoutParams mLeftParams, mTitleParams, mRightParams;
    /** 自定义点击监听器 */
    private TitleBarClickListener mTitleBarClickListener;


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

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

    public CustomTitleBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        //获得自定义属性值
        getTypedArray(context, attrs);

        //创建LayoutParams，并且设置对齐方式
        mLeftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        mLeftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);

        mTitleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);

        mRightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        mRightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);

        //左边文字
        if(StringUtils.isNotEmpty(mLeftText) && mLeftVisible) {
            mLeftTextView = new TextView(context);
            mLeftTextView.setText(mLeftText);
            mLeftTextView.setTextSize(mAmboTextSize);
            mLeftTextView.setTextColor(mTextColor);
            addView(mLeftTextView, mLeftParams);
            mLeftTextView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    if(mTitleBarClickListener != null) {
                        //调用接口中方法
                        mTitleBarClickListener.onLeftClickListener();
                    }
                }
            });
        }
        //右边文字
        if(StringUtils.isNotEmpty(mRightText) && mRightVisible){
            mRightTextView = new TextView(context);
            mRightTextView.setText(mRightText);
            mRightTextView.setTextSize(mAmboTextSize);
            mRightTextView.setTextColor(mTextColor);
            addView(mRightTextView, mRightParams);
            mRightTextView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    if(mTitleBarClickListener != null) {
                        mTitleBarClickListener.onRightClickListener();
                    }
                }
            });
        }
        //标题文字
        if(StringUtils.isNotEmpty(mTitleText)) {
            mTitleTextView = new TextView(context);
            mTitleTextView.setText(mTitleText);
            mTitleTextView.setTextSize(mTitleTextSize);
            mTitleTextView.setGravity(Gravity.CENTER);
            mTitleTextView.setTextColor(mTextColor);
            addView(mTitleTextView, mTitleParams);
        }
        //左边图片按钮
        if(mLeftImage > 0 && mLeftVisible) {
            mLeftImageView = new ImageView(context);
            mLeftImageView.setImageResource(mLeftImage);
            addView(mLeftImageView, mLeftParams);
            mLeftImageView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    if(mTitleBarClickListener != null) {
                        mTitleBarClickListener.onLeftClickListener();
                    }
                }
            });
        }
        //右边图片按钮
        if(mRightImage > 0 && mRightVisible) {
            mRightImageView = new ImageView(context);
            mRightImageView.setImageResource(mRightImage);
            addView(mRightImageView, mRightParams);
            mRightImageView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    if(mTitleBarClickListener != null) {
                        mTitleBarClickListener.onRightClickListener();
                    }
                }
            });
        }
    }

    /**
     * 获得自定义属性值
     * @param context
     * @param attrs
     */
    private void getTypedArray(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleBar);
        int count = ta.getIndexCount();
        for(int i=0; i<count; i++) {
            int attr = ta.getIndex(i);
            switch (attr) {
                case R.styleable.CustomTitleBar_leftText:
                    mLeftText = ta.getString(attr);
                    break;

                case R.styleable.CustomTitleBar_titleText:
                    mTitleText = ta.getString(attr);
                    break;

                case R.styleable.CustomTitleBar_rightText:
                    mRightText = ta.getString(attr);
                    break;

                case R.styleable.CustomTitleBar_amboTextSize:
                    mAmboTextSize = DisplayUtils.px2sp(context, ta.getDimensionPixelSize(attr, 12));
                    break;

                case R.styleable.CustomTitleBar_titleTextSize:
                    mTitleTextSize = DisplayUtils.px2sp(context, ta.getDimensionPixelSize(attr, 16));
                    break;

                case R.styleable.CustomTitleBar_textColor:
                    mTextColor = ta.getColor(attr, Color.BLACK);
                    break;

                case R.styleable.CustomTitleBar_leftVisible:
                    mLeftVisible = ta.getBoolean(attr, false);
                    break;

                case R.styleable.CustomTitleBar_rightVisible:
                    mRightVisible = ta.getBoolean(attr, false);
                    break;

                case R.styleable.CustomTitleBar_leftImage:
                    mLeftImage = ta.getResourceId(attr, 0);
                    break;

                case R.styleable.CustomTitleBar_rightImage:
                    mRightImage = ta.getResourceId(attr, 0);
                    break;
            }
        }
        ta.recycle();
    }

    /**
     * 设置点击监听事件
     * @param listener
     */
    public void setOnTitleBarClickListener(TitleBarClickListener listener) {
        this.mTitleBarClickListener = listener;
    }

    /**
     * 设置左侧文字是否可见
     * @param visible
     */
    public void setLeftTextVisible(boolean visible) {
        this.mLeftTextView.setVisibility(visible ? View.VISIBLE : View.GONE);
    }

    /**
     * 设置右侧文字是否可见
     * @param visible
     */
    public void setRightTextVisible(boolean visible) {
        this.mRightTextView.setVisibility(visible ? View.VISIBLE : View.GONE);
    }

    /**
     * 设置左侧图片是否可见
     * @param visible
     */
    public void setLeftImageVisible(boolean visible) {
        this.mLeftImageView.setVisibility(visible ? View.VISIBLE : View.GONE);
    }

    /**
     * 设置右侧图片是否可见
     * @param visible
     */
    public void setRightImageVisible(boolean visible) {
        this.mRightImageView.setVisibility(visible ? View.VISIBLE : View.GONE);
    }

    /**
     * 设置左侧文字
     * @param text
     */
    public void setLeftText(String text) {
        this.mLeftTextView.setText(text);
    }

    /**
     * 设置标题文字
     * @param text
     */
    public void setTitleText(String text) {
        this.mTitleTextView.setText(text);
    }

    /**
     * 设置右侧文字
     * @param text
     */
    public void setRightText(String text) {
        this.mRightTextView.setText(text);
    }

    /**
     * 设置左侧文字大小
     * @param textSize
     */
    public void setLeftTextSize(float textSize) {
        this.mLeftTextView.setTextSize(textSize);
    }

    /**
     * 设置标题文字大小
     * @param textSize
     */
    public void setTitleTextSize(float textSize) {
        this.mTitleTextView.setTextSize(textSize);
    }

    /**
     * 设置右侧文字大小
     * @param textSize
     */
    public void setRightTextSize(float textSize) {
        this.mRightTextView.setTextSize(textSize);
    }

    /**
     * 设置左侧文字颜色
     * @param color
     */
    public void setLeftTextColor(int color) {
        this.mLeftTextView.setTextColor(color);
    }

    /**
     * 设置标题文字颜色
     * @param color
     */
    public void setTitleTextColor(int color) {
        this.mTitleTextView.setTextColor(color);
    }

    /**
     * 设置右侧文字颜色
     * @param color
     */
    public void setRightTextColor(int color) {
        this.mRightTextView.setTextColor(color);
    }

    /**
     * 设置左侧图片
     * @param resId
     */
    public void setLeftImageResource(int resId) {
        this.mLeftImageView.setImageResource(resId);
    }

    /**
     * 设置右侧图片
     * @param resId
     */
    public void setRightImageResource(int resId) {
        this.mRightImageView.setImageResource(resId);
    }

    /**
     * 自定义标题栏接口
     */
    public interface TitleBarClickListener {
        public void onLeftClickListener();
        public void onRightClickListener();
    }
}

下面是在attrs.xml中自定义的属性：

<!-- 自定义标题栏 -->
<declare-styleable name="CustomTitleBar">
    <!-- 两侧文字大小 -->
    <attr name="amboTextSize" format="dimension" />
    <attr name="textColor" format="color" />
    
    <!-- 左边 -->
    <attr name="leftText" format="string" />
    <attr name="leftImage" format="reference" />
    <attr name="leftBackground" format="color|reference" />
    <attr name="leftVisible" format="boolean" />
    <!-- 标题 -->
    <attr name="titleText" format="string" /> />
    <attr name="titleTextSize" format="dimension"/>
    <!-- 右边 -->
    <attr name="rightText" format="string" />
    <attr name="rightImage" format="reference" />
    <attr name="rightBackground" format="color|reference" />
    <attr name="rightVisible" format="boolean" />
</declare-styleable>

在Activity布局文件中的简单使用：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    <strong><span style="color:#ff0000;">xmlns:titlebar="http://schemas.android.com/apk/res-auto"</span></strong>
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cce8cf"
    android:orientation="vertical">

    <strong><span style="color:#ff0000;"><aa.customtitlebar.ui.widget.CustomTitleBar
        android:id="@+id/id_ctb_main"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ff5e4c"
        android:padding="10dp"
        titlebar:amboTextSize="16sp"
        titlebar:leftImage="@drawable/icon_back"
        titlebar:rightText="点一点"
        titlebar:textColor="#ffffff"
        titlebar:titleText="自定义标题栏"
        titlebar:leftVisible="true"
        titlebar:rightVisible="true"
        titlebar:titleTextSize="19sp" /></span></strong>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:gravity="center"
        android:textColor="#ff67800e"
        android:text="自定义标题栏"/>

</LinearLayout>

下面是标题栏的截图：

源码下载：http://download.csdn.net/detail/hyq912/8379541

Github：https://github.com/WhoIsAA/CustomTitleBar