自定义View之自定义标题栏

来源：互联网发布：和平典范知乎编辑：程序博客网时间：2024/04/28 00:20

现在，几乎在每一个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

0 0