Android开发随笔之自定义TitleBar

来源：互联网发布：pychram软件运行环境编辑：程序博客网时间：2024/05/21 15:42

创建步骤：
1.创建attrs.xml，为自定义的Title定义属性。
2.创建MyTitleBar类，继承自RelativeLayout。在构造函数中对自定义TitleBar的属性进行详细配置。
3.在xml布局中使用该控件。
4.在Activity中使用，并设置监听事件。
这是效果图：
没有左边按钮的TitleBar

完整的TitleBar

只有左边按钮的TitleBar

具体实现：
一、自定义View的属性，首先在res/values/ 下建立一个attrs.xml ，在里面定义我们的属性和声明我们的整个样式。

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="MyToolBar">        <!-- 标题属性 -->        <attr name="textTitle" format="string" />        <attr name="titleTextSize" format="dimension" />        <attr name="titleTextColor" format="color" />        <!-- 左边按钮属性 -->        <attr name="leftButtonBackground" format="color" />        <attr name="leftButtonText" format="string" />        <attr name="leftButtonTextColor" format="color" />        <attr name="leftButtonTextSize" format="dimension" />        <!-- 右边按钮属性 -->        <attr name="rightButtonBackground" format="color" />        <attr name="rightButtonText" format="string" />        <attr name="rightButtonTextColor" format="color" />        <attr name="rightButtonTextSize" format="dimension" />    </declare-styleable></resources>

我们定义了中间标题的文字，文字大小，文字颜色，和左右两个按钮的文字，文字大小，文字颜色，按钮背景等属性。
二、创建类MyTitleBar，继承自RelativeLayout。
a.在MyTitleBar的构造函数中获得我们自定义的样式。
b.并且实例化组成MyTitleBar的三个控件两个Button和一个TextView，并为这三个控件设置属性。
c.通过LayoutParams参数设置三个控件的位置，并通过addView（）方法将控件添加到自定义控件MyTitleBar中.
d.最后为两个按钮设置监听事件。
e.定义setToolBarTitleVisible()方法设置是否显示标题，定义setToolBarBbtn()设置是否显示左右的按钮。代码如下：

package com.raphets.toolbar;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Color;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.Gravity;import android.view.View;import android.widget.Button;import android.widget.RelativeLayout;import android.widget.TextView;/* * 自定义ToolBar，继承自RelativeLayout **/public class MyToolBar extends RelativeLayout {    private Button leftBtn, rightBtn; // 左边和右边的按钮    private TextView tvTitle; // 中间的标题    /*     * 中间标题的属性     */    private String title; // 标题    private boolean showTitle; // 是否显示标题    private float titleSize; // 标题字体大小    private int titleColor; // 标题字体颜色    /*     * 左边按钮的属性     */    private String leftBtnText;// 左边按钮的文字    private Drawable leftBtnBackground;// 左边按钮的背景    private boolean showLeftBtn;// 是否显示左边按钮    private int leftBtnTextColor;// 左边按钮字体颜色    private float leftBtnTextSize;// 左边按钮字体大小    /*     * 右边按钮的属性     */    private String rightBtnText;// 右边按钮的文字    private Drawable rightBtnBackground;// 右边按钮的背景    private boolean showRightBtn;// 是否显示右边按钮    private int rightBtnTextColor;// 右边按钮字体颜色    private float rightBtnTextSize;// 右边按钮字体大小    /*     * 三个控件的位置配置参数，右边按钮的位置     */    private LayoutParams titleParams;// 标题的位置配置参数    private LayoutParams leftParams;// 左边按钮的位置配置参数    private LayoutParams rightParams;// 右边按钮的位置配置参数    // 事件监听器    private MyToolBarClickListener listener;    /*     * 在构造函数里完成自定义toolbar的属性设置     */    public MyToolBar(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyToolBar);        /*         * 获取中间标题的自定义属性设置以及默认值         */        title = typedArray.getString(R.styleable.MyToolBar_textTitle);        showTitle = typedArray.getBoolean(R.styleable.MyToolBar_showTitle, true);        titleSize = typedArray.getDimension(R.styleable.MyToolBar_titleTextSize, 0);        titleColor = typedArray.getColor(R.styleable.MyToolBar_titleTextColor, 0);        /*         * 获取左边按钮的自定义属性设置以及默认值         */        leftBtnText = typedArray.getString(R.styleable.MyToolBar_leftButtonText);        leftBtnTextColor = typedArray.getColor(R.styleable.MyToolBar_leftButtonTextColor, 0);        leftBtnBackground = typedArray.getDrawable(R.styleable.MyToolBar_leftButtonBackground);        leftBtnTextSize = typedArray.getDimension(R.styleable.MyToolBar_leftButtonTextSize, 0);        /*         * 获取右边按钮的自定义属性设置以及默认值         */        rightBtnText = typedArray.getString(R.styleable.MyToolBar_rightButtonText);        rightBtnTextColor = typedArray.getColor(R.styleable.MyToolBar_rightButtonTextColor, 0);        rightBtnBackground = typedArray.getDrawable(R.styleable.MyToolBar_rightButtonBackground);        rightBtnTextSize = typedArray.getDimension(R.styleable.MyToolBar_rightButtonTextSize, 0);        // 回收资源        typedArray.recycle();        /*         * 创建三个控件的对象         */        leftBtn = new Button(context);        rightBtn = new Button(context);        tvTitle = new TextView(context);        /*         * 设置标题的属性         */        tvTitle.setText(title);        tvTitle.setTextColor(titleColor);        tvTitle.setTextSize(titleSize);        tvTitle.setGravity(Gravity.CENTER);        /*         * 设置左边按钮的属性         */        leftBtn.setText(leftBtnText);        leftBtn.setTextColor(leftBtnTextColor);        leftBtn.setBackground(leftBtnBackground);        leftBtn.setTextSize(leftBtnTextSize);        /*         * 设置右边按钮的属性         */        rightBtn.setText(rightBtnText);        rightBtn.setTextColor(rightBtnTextColor);        rightBtn.setBackground(rightBtnBackground);        rightBtn.setTextSize(rightBtnTextSize);        // 设置自定义toolbar的背景色        setBackgroundColor(Color.WHITE);        // 中间标题的位置参数 配置        titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT);        // 向RelativeLayout中添加控件        addView(tvTitle, titleParams);        // 左边按钮的位置参数 配置        leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);        // 向RelativeLayout中添加控件        addView(leftBtn, leftParams);        // 右边按钮的位置参数 配置        rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);        // 向RelativeLayout中添加控件        addView(rightBtn, rightParams);        /*         * 左边按钮点击事件         */        leftBtn.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                listener.leftBtnClick();            }        });        /*         * 右边按钮点击事件         */        rightBtn.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                listener.rightBtnClick();            }        });    }    /*     * 定义接口     */    public interface MyToolBarClickListener {        public void leftBtnClick();// 左边按钮点击事件        public void rightBtnClick();// 右边按钮点击事件    }    /*     * 自定义的toolbar的事件监听     */    public void setOnMyToolBarClickListener(MyToolBarClickListener listener) {        this.listener = listener;    }    /*     * 设置自定义toolbar的左右两边按钮的是否显示，默认连个按钮都是显示的     */    public void setToolBarBtnVisiable(boolean leftFalg, boolean rightFalg) {        if (leftFalg && rightFalg) {            leftBtn.setVisibility(View.VISIBLE);            rightBtn.setVisibility(View.VISIBLE);        }        if (!leftFalg && !rightFalg) {            leftBtn.setVisibility(View.GONE);            rightBtn.setVisibility(View.GONE);        }        if (!leftFalg && rightFalg) {            leftBtn.setVisibility(View.GONE);            rightBtn.setVisibility(View.VISIBLE);        }        if (leftFalg && !rightFalg) {            leftBtn.setVisibility(View.VISIBLE);            rightBtn.setVisibility(View.GONE);        }    }    /*     * 设置自定义的toolbar是否显示标题，默认是有标题的     */    public void setToolBarTitleVisible(boolean flag) {        if (flag) {            tvTitle.setVisibility(View.VISIBLE);        } else {            tvTitle.setVisibility(View.GONE);        }    }}

三、在xml布局文件中，声明我们的自定义控件，注意添加xmlns:custom=”http://schemas.android.com/apk/res-auto”引入xml命名空间，这样才能使用custom自定义属性。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:custom="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.raphets.toolbar.MainActivity" >    <com.raphets.toolbar.MyToolBar        android:id="@+id/myToolBar"        android:layout_width="fill_parent"        android:layout_height="50dp"        custom:leftButtonBackground="@null"        custom:leftButtonText="返回"        custom:leftButtonTextColor="#0000ff"        custom:leftButtonTextSize="12sp"        custom:rightButtonBackground="@null"        custom:rightButtonText="菜单"        custom:rightButtonTextColor="#0000ff"        custom:rightButtonTextSize="12sp"        custom:textTitle="MyTitle"        custom:titleTextColor="#A10000"        custom:titleTextSize="12sp" >    </com.raphets.toolbar.MyToolBar></RelativeLayout>

四、在Activity中使用我们的自定义TitleBar。通过myTitleBar的setOnMyToolBarClickListener()方法设置左右两边按钮的监听事件。
通过setToolBarBtnVisiable()和setToolBarTitleVisible()方法设置两边按钮和中间标题的显示情况。

package com.raphets.toolbar;import com.raphets.toolbar.MyToolBar.MyToolBarClickListener;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.Toast;public class MainActivity extends Activity {    private MyToolBar myToolBar;// 自定义toolbar    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        // 初始化视图        initView();        // 初始化数据        initData();        // 事件监听        initListener();    }    /*     * 初始化视图     */    private void initView() {        setContentView(R.layout.activity_main);        myToolBar = (MyToolBar) findViewById(R.id.myToolBar);    }    /*     * 初始化数据     */    private void initData() {        // 设置左边右边的按钮是否显示        myToolBar.setToolBarBtnVisiable(false, true);        // 设置是否显示中间标题，默认的是显示        myToolBar.setToolBarTitleVisible(true);    }    /*     * 事件监听     */    private void initListener() {        /*         * toolbar的点击事件处理         */        myToolBar.setOnMyToolBarClickListener(new MyToolBarClickListener() {            @Override            public void rightBtnClick() {// 右边按钮点击事件                Toast.makeText(MainActivity.this, "菜单", Toast.LENGTH_SHORT).show();            }            @Override            public void leftBtnClick() {// 左边按钮点击事件                Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();            }        });    }}

源码下载

**：https://github.com/RaphetS/MyToolBar.git

或者http://download.csdn.net/detail/raphets/9469219

0 0