Android开发随笔之自定义TitleBar

创建步骤:
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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值