Android自定義View之TitleBar，通用標題欄

zhouping02 8年前發布 | 109K 次閱讀 Android開發移動開發

來自： http://blog.csdn.net//lyhhj/article/details/49387481

學過的東西把它記錄下來，不僅加深印象，以后也會用的到........（相信以后的你一定會感激現在拼命的自己）

緒論：

最近小編在學徐大牛的群英傳，學到的東西記下來。今天小編來說一下Android自定義View中的自定義標題欄，因為標題欄在我們開發過程中用到的特別多，可以說每一個Activity中都會有標題欄，我們不可能每個布局文件中都去寫那么多的代碼，為了優化，我們可以定義一個通用的titlebar適合我們每個Activity用。接下來小編將會介紹兩種自定義TitleBar的方法.

方法一：

創建復合控件，自定義屬性。

1.思路：

1》自定義titlebar的屬性

2》組合控件

3》實現接口

4》引用自定義View

2.實現方法：

首先我們在values文件夾下新建一個attrs.xml,里面包含我們的titlebar中要用到的控件的一些屬性，例如標題文本，顏色，字體大小等...

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Title_bar">
        <attr name="titleText" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleColor" format="color"/>
        <attr name="leftBtnText" format="string"/>
        <attr name="leftBtnTextSize" format="dimension"/>
        <attr name="leftBtnBackground" format="reference|color"/>
        <attr name="rightBtnText" format="string"/>
        <attr name="rightBtnTextSize" format="dimension"/>
        <attr name="rightBtnBackground" format="reference|color"/>
    </declare-styleable>
</resources></span>

定義好了屬性時候，我們新建一個TitleBarView繼承RelativeLayout，在構造方法中獲取我們定義的屬性值，通過TypeArray來獲取自定義的屬性值，并做一些初始化的工作

<span style="font-size:14px;">TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Title_bar);
 /**
     * 初始化參數，獲取屬性值
     * @param context 上下文
     * @param ta
     */
    private void init(Context context,TypedArray ta){
        title = ta.getString(R.styleable.Title_bar_titleText);
        leftBtnText = ta.getString(R.styleable.Title_bar_leftBtnText);
        leftBtnBackground = ta.getDrawable(R.styleable.Title_bar_leftBtnBackground);
        rightBtnText = ta.getString(R.styleable.Title_bar_rightBtnText);
        rightBtnBackground = ta.getDrawable(R.styleable.Title_bar_rightBtnBackground);
        titleTextSize = ta.getDimension(R.styleable.Title_bar_titleTextSize, 10);
        leftBtnTextSize = ta.getDimension(R.styleable.Title_bar_leftBtnTextSize, 8);
        rightBtnTextSize = ta.getDimension(R.styleable.Title_bar_rightBtnTextSize, 8);
        titleTextColor = ta.getColor(R.styleable.Title_bar_titleColor, 0);
        ta.recycle();

        titleTv = new TextView(context);
        leftBtn = new Button(context);
        rightBtn = new Button(context);
        /*設置標題文本*/
        titleTv.setTextSize(titleTextSize);
        titleTv.setText(title);
        titleTv.setTextColor(titleTextColor);
        /*設置左側按鈕*/
        leftBtn.setText(leftBtnText);
        leftBtn.setTextSize(leftBtnTextSize);
        leftBtn.setBackground(leftBtnBackground);
        /*設置右側按鈕*/
        rightBtn.setText(rightBtnText);
        rightBtn.setTextSize(rightBtnTextSize);
        rightBtn.setBackground(rightBtnBackground);
        /*設置控件參數*/
        leftParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        leftParams.addRule(ALIGN_PARENT_LEFT,TRUE);
        addView(leftBtn, leftParams);
        rightParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        rightParams.addRule(ALIGN_PARENT_RIGHT,TRUE);
        addView(rightBtn, rightParams);
        titleParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(CENTER_IN_PARENT,TRUE);
        titleParams.addRule(CENTER_VERTICAL);
        addView(titleTv, titleParams);

        leftBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.leftClick();
            }
        });
        rightBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });


    }</span>

接下來我們定義一個接口，并創建左右按鈕的點擊事件

<span style="font-size:14px;">/**
     * 定義按鈕點擊接口，實現回調機制，通過映射的接口對象調用接口中的方法
     * 而不用去考慮如何實現，具體實現由調用者去創建
     */
    public interface TitleBarClickListener{
        void leftClick();   //左側按鈕點擊事件
        void rightClick();  //右側按鈕點擊事件
    }</span>

實現接口回調，在MainActivity中調用我們的按鈕點擊接口

<span style="font-size:14px;">titleBarView = (TitleBarView) findViewById(R.id.title_bar);
        titleBarView.setOnTitleBarClickListener(new TitleBarView.TitleBarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();
            }
        });</span>

當然我們還可以設置按鈕的顯示隱藏以及文字和其他的一些事件，隨便定義好了，然后在調用者的地方進行調用

<span style="font-size:18px;">/</span><span style="font-size:14px;">**
     * 設置左側按鈕是否可見
     * @param flag  是否可見
     */
    public void setLeftBtnVisable(boolean flag){
        if (flag){
            leftBtn.setVisibility(VISIBLE);
        }else {
            leftBtn.setVisibility(GONE);
        }
    }

    /**
     * 設置右側按鈕是否可見
     * @param flag 是否可見
     */
    public void setRightBtnVisable(boolean flag){
        if (flag){
            rightBtn.setVisibility(VISIBLE);
        }else {
            rightBtn.setVisibility(GONE);
        }</span>

<pre name="code" class="java"><span style="font-size:14px;">btnLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                titleBarView.setLeftBtnVisable(false);
            }
        });
        btnRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                titleBarView.setRightBtnVisable(false);
            }
        });</span>

最后是怎樣引用我們的自定義的view了，在我們的布局中添加如下代碼：

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<com.hankkin.textviewdemo.view.TitleBarView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="55dp"

    android:id="@+id/title_bar"
    custom:titleText="標題1"
    custom:titleTextSize="15sp"
    custom:titleColor="#000"
    custom:leftBtnText="返回"
    custom:leftBtnTextSize="10sp"
    custom:leftBtnBackground="#f8f8ff"
    custom:rightBtnText="下一步"
    custom:rightBtnTextSize="10sp"
    custom:rightBtnBackground="#f8f8ff"
    >

</com.hankkin.textviewdemo.view.TitleBarView></span>

自定標題欄就OK了

3.總結：

個人在用的時候總覺得這種定義方式不是很方便，因為我們不好把控組件的樣式和大小，而且還需要定義那么多的屬性感覺有點麻煩，不要著急，下面介紹另一種方法：

方法二：

上一種是我們自定義屬性來自定義我們的TitleBar，下面我們直接用LayoutInflate來直接引用我們的布局，然后在里面去修改我們的控件的樣式屬性

實現方法：

同樣我們在構造方法中初始化一些組件屬性，并把布局文件引用過來

<span style="font-size:14px;">public TitleBarView1(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    /**
     * 初始化組件
     * @param context
     */
    private void init(Context context){
        LayoutInflater.from(context).inflate(R.layout.titlebar1,this);
        btnLeft = (Button) findViewById(R.id.btn_titlebar_left);
        btnRight = (Button) findViewById(R.id.btn_titlebar_right);
        tvTitle = (TextView) findViewById(R.id.tv_titlebar_name);
        btnLeft.setOnClickListener(this);
        btnRight.setOnClickListener(this);
    }</span>

其他的思路基本都差不多這里就不給大家多介紹了，把代碼粘貼過來，小伙伴應該都可以看懂

<span style="font-size:18px;"> </span><span style="font-size:14px;">public void setTitleBarListener(BtnClickListener listener){
        this.listener = listener;
    }

    /**
     * 按鈕點擊接口
     */
    public interface BtnClickListener{
        void leftClick();
        void rightClick();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_titlebar_left:
                listener.leftClick();
                break;
            case R.id.btn_titlebar_right:
                listener.rightClick();
                break;
            default:
                break;
        }
    }

    /**
     * 設置左側按鈕是否可見
     * @param flag  是否可見
     */
    public void setLeftBtnVisable(boolean flag){
        if (flag){
            btnLeft.setVisibility(VISIBLE);
        }
        else {
            btnLeft.setVisibility(GONE);
        }
    }

    /**
     * 設置右側按鈕是否可見
     * @param flag  是否可見
     */
    public void setRightBtnVisable(boolean flag){
        if (flag){
            btnRight.setVisibility(VISIBLE);
        }
        else {
            btnRight.setVisibility(GONE);
        }
    }</span>

在MainActivity中調用

<span style="font-size:14px;">titleBarView1 = (TitleBarView1) findViewById(R.id.tbv_titlebar);
        titleBarView1.setTitleBarListener(this);
 @Override
    public void leftClick() {
        Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void rightClick() {
        Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();
    }</span>

最后看一下效果，樣式不好看大家多包含，為了方便我把兩個TitleBarView放在了一個布局文件中

好了代碼放到了github上，小伙伴們求star

https://github.com/Hankkin/TitleBarViewDemo.git

在書上我們自定義的屬性title、和titleTex跟最新的SDK沖突了，所以這兩個屬性值修改了，找到了徐哥也給徐哥提了issuse
推薦大家可以看看徐哥的Android群英傳比較不錯。

本文由用戶 zhouping02 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1454412723026.html

Android開發移動開發