2. 程式人生 > >Android封裝一個自定義標題欄

Android封裝一個自定義標題欄

阿新 • • 發佈：2019-01-19

標題欄是Android開發最基礎的一個元件，但是應用也多種多樣，因為應對需求的多樣化，想要做一個萬能的標題欄基本是不可能，因此跟大家分享一下自己簡易封裝的標題欄，並不具備多大含金量，應對於以下一些樣式。

1：

這裡寫圖片描述

2：

這裡寫圖片描述

3：

這裡寫圖片描述

4：

這裡寫圖片描述

5：

這裡寫圖片描述

其實很好理解，就是左圖，左標題，標題，右標題，右圖的一些屬性設定。

第一步：

在values下面新建attrs檔案，設定屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TitlebarView"
 
>
        <attr name="leftText" format="string"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="centerTextColor" format="color"/>
        <attr name="centerTitle" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr
 
 name="rightText" format="string"/>
        <attr name="leftDrawble" format="reference"/>
        <attr name="rightDrawable" format="reference"/>
    </declare-styleable>
</resources>

主要設定內容，顏色，圖片等

第二步：

設定標題欄的佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/layout_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingLeft="@dimen/size_8"
        android:paddingRight="@dimen/size_8">

        <ImageView
            android:id="@+id/iv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:scaleType="centerInside" />

        <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLength="4"
            android:maxLines="1"
            android:paddingLeft="@dimen/size_8" />
    </LinearLayout>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:maxLength="10"
        android:maxLines="1" />

    <LinearLayout
        android:id="@+id/layout_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:paddingLeft="@dimen/size_8"
        android:paddingRight="@dimen/size_8">

        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1" />

        <ImageView
            android:id="@+id/iv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:scaleType="centerInside" />
    </LinearLayout>
</RelativeLayout>

這裡的佈局檔案是通用的佈局檔案，需要對此佈局根據自己的需求進行配置，這個就需要自定義View了

第三步：

自定義TitleBar，主要進行引用佈局，初始化view，拿到自定義屬性進行相應配置

   public TitlebarView(final Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.layout_title, this);
        initView();
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TitlebarView, defStyleAttr, 0);
        int count = array.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.TitlebarView_leftTextColor:
                    tv_left.setTextColor(array.getColor(attr, Color.BLACK));
                    break;
                case R.styleable.TitlebarView_leftDrawble:
                    iv_left.setImageResource(array.getResourceId(attr, 0));
                    break;
                case R.styleable.TitlebarView_leftText:
                    tv_left.setText(array.getString(attr));
                    break;
                case R.styleable.TitlebarView_centerTextColor:
                    tv_title.setTextColor(array.getColor(attr, Color.BLACK));
                    break;
                case R.styleable.TitlebarView_centerTitle:
                    tv_title.setText(array.getString(attr));
                    break;
                case R.styleable.TitlebarView_rightDrawable:
                    iv_right.setImageResource(array.getResourceId(attr, 0));
                    break;
                case R.styleable.TitlebarView_rightText:
                    tv_right.setText(array.getString(attr));
                    break;
                case R.styleable.TitlebarView_rightTextColor:
                    tv_right.setTextColor(array.getColor(attr, Color.BLACK));
                    break;
            }
        }
        array.recycle();

    }

然後我們需要新增左側，右側的點選事件，由於一般反饋點選範圍太小，導致點選靈敏性較差，所以這裡全部設定對左側，右側佈局進行監聽，而不是單個控制元件

設定回撥介面

 private onViewClick mClick;

 public void setOnViewClick(onViewClick click) {
        this.mClick = click;
    }

    public interface onViewClick {
        void leftClick();

        void rightClick();
    }

在呼叫的時候拿到自定義view物件setOnViewClick即可

全部程式碼如下：

package com.example.testing.mycustomview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by Administrator on 2017/7/18.
 */

public class TitlebarView extends RelativeLayout {
    private LinearLayout layout_left, layout_right;
    private TextView tv_left, tv_title, tv_right;
    private ImageView iv_left, iv_right;
    private onViewClick mClick;

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

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

    public TitlebarView(final Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.layout_title, this);
        initView();
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TitlebarView, defStyleAttr, 0);
        int count = array.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.TitlebarView_leftTextColor:
                    tv_left.setTextColor(array.getColor(attr, Color.BLACK));
                    break;
                case R.styleable.TitlebarView_leftDrawble:
                    iv_left.setImageResource(array.getResourceId(attr, 0));
                    break;
                case R.styleable.TitlebarView_leftText:
                    tv_left.setText(array.getString(attr));
                    break;
                case R.styleable.TitlebarView_centerTextColor:
                    tv_title.setTextColor(array.getColor(attr, Color.BLACK));
                    break;
                case R.styleable.TitlebarView_centerTitle:
                    tv_title.setText(array.getString(attr));
                    break;
                case R.styleable.TitlebarView_rightDrawable:
                    iv_right.setImageResource(array.getResourceId(attr, 0));
                    break;
                case R.styleable.TitlebarView_rightText:
                    tv_right.setText(array.getString(attr));
                    break;
                case R.styleable.TitlebarView_rightTextColor:
                    tv_right.setTextColor(array.getColor(attr, Color.BLACK));
                    break;
            }
        }
        array.recycle();
        layout_left.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                mClick.leftClick();
            }
        });
        layout_right.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                mClick.rightClick();
            }
        });

    }

    private void initView() {
        tv_left = findViewById(R.id.tv_left);
        tv_title = findViewById(R.id.tv_title);
        tv_right = findViewById(R.id.tv_right);
        iv_left = findViewById(R.id.iv_left);
        iv_right = findViewById(R.id.iv_right);
        layout_left = findViewById(R.id.layout_left);
        layout_right = findViewById(R.id.layout_right);
    }

    public void setOnViewClick(onViewClick click) {
        this.mClick = click;
    }

    //設定標題
    public void setTitle(String title) {
        if (!TextUtils.isEmpty(title)) {
            tv_title.setText(title);
        }
    }

    //設定左標題
    public void setLeftText(String title) {
        if (!TextUtils.isEmpty(title)) {
            tv_left.setText(title);
        }
    }

    //設定右標題
    public void setRightText(String title) {
        if (!TextUtils.isEmpty(title)) {
            tv_right.setText(title);
        }
    }

    //設定標題大小
    public void setTitleSize(int size) {
        if (tv_title != null) {
            tv_title.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);
        }
    }

    //設定左標題大小
    public void setLeftTextSize(int size) {
        if (tv_left != null) {
            tv_left.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);
        }
    }

    //設定右標題大小
    public void setRightTextSize(int size) {
        if (tv_right != null) {
            tv_right.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);
        }
    }

    //設定左圖示
    public void setLeftDrawable(int res) {
        if (iv_left != null) {
            iv_left.setImageResource(res);
        }
    }

    //設定右圖示
    public void setRightDrawable(int res) {
        if (iv_right != null) {
            iv_right.setImageResource(res);
        }
    }

    public interface onViewClick {
        void leftClick();

        void rightClick();
    }

}

如何引用呢？

<com.example.testing.mycustomview.TitlebarView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/colorAccent"
        app:centerTitle="自定義標題"
        app:centerTextColor="#FFF"
        app:leftDrawble="@drawable/ic_write_back"
        app:leftTextColor="#FFF"
        app:leftText="返回"
        app:rightDrawable="@android:drawable/ic_btn_speak_now"
        app:rightText="語音"
        app:rightTextColor="#FFF"
        />

效果：

這裡寫圖片描述

程式碼中呼叫：

TitlebarView titlebarView= (TitlebarView) findViewById(R.id.title);
        titlebarView.setTitleSize(20);
        titlebarView.setTitle("標題欄");
        titlebarView.setOnViewClick(new TitlebarView.onViewClick() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this,"左邊",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"右邊",Toast.LENGTH_SHORT).show();
            }
        });

效果：

這裡寫圖片描述

到這裡就結束了，基本上可以滿足大多數需求

相關推薦

Android封裝一個自定義標題欄

標題欄是Android開發最基礎的一個元件，但是應用也多種多樣，因為應對需求的多樣化，想要做一個萬能的標題欄基本是不可能，因此跟大家分享一下自己簡易封裝的標題欄，並不具備多大含金量，應對於以下一些樣式。 1： 2： 3： 4： 5：

android中如何自定義標題欄

          首先，修改標題欄的寬度和背景，在strings.xml中新增： <item name="android:background">@drawable/title_bg</item> </style> &l

Android 自定義標題欄

list nis pub com .text reat oid post line 前言： 　　自定義標題欄應該是Android標配了，也是我從網上摳下來的，做一下記錄，感謝各位前輩栽樹。 自定義標題欄： 　　首先： 1 package com.example.util

Android自定義標題欄

補充： 這位大佬的方法設定完成後是白色的背景，如果需要自定義背景可以在style中新增： <style name="CustomWindowTitleBackground"> <item name="android:backg

android 修改窗體標題的字型式樣和背景圖(自定義標題欄)

今天google了一下，關於android自定義窗體標題欄的問題， 解決方法大概如下：     自定義一個layout，然後通過requestWindowFeature和getWindow().setFeatureInt方法呼叫，     但是存在填充不滿的問題，而且比較麻煩

Android自定義標題欄：顯示網頁載入進度

  這陣子在做Lephone的適配，測試組提交一個bug：標題欄的文字較長時沒有顯示完全，其實這並不能算個bug，並且這個問題在以前其他機器也沒有出現，只是說在Lephone的這個平臺上顯示得不怎麼美觀，因為聯想將原生的標題欄UI進行了修改。修改的過程中遇到了一個難題，系統自帶的那個標題欄進度總能夠到達100

Android繼承自定義標題欄BaseTitleBarActivity

上一次講了，封裝標題欄，後來想想，那樣封裝還是很麻煩，因為，每個頁面都需要新增標題欄的佈局，如果一個類不需要，但是後來又需要了，那麼，導致整個頁面都要手動調整。 今天，我把標題欄封裝到一個activity中，這個activity作為一個基類，只要繼承這個類，就

Android底部選單欄、Android沉浸式狀態列（頂部狀態列修改顏色）、自定義標題欄

0、簡介： 沒有使用TabHost切換，而是變成FragmentActivity替換Fragment；沉浸式引用的git上面的jar包。 先看圖片 1、底部導航欄 核心程式碼 <span style="white-space:pre"> </span&

【Android】自定義標題欄，底部欄

為了簡化起見，只寫關鍵屬性，具體需要可以自己慢慢調 頂部標題title_layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:backg

自定義標題欄右鍵菜單

mman size sub append pan prot base rri import 摘自：http://stackoverflow.com/questions/4615940/how-can-i-customize-the-system-menu-of-a-wind

WPF中自定義標題欄時窗體最大化處理之WindowChrome

注意： 本文方法基礎是WindowChrome，而WindowChrome在.NET Framework 4.5之後才整合釋出的。見：WindowChrome Class 在.NET Framework 4.0中使用WindowChrome，需要安裝Ribbon來支援WindowCh

QT 自定義標題欄

1、去除舊的標題欄 //去除QDialog對話方塊有上角問號 Qt::WindowFlags flags=Qt::Dialog;flags |=Qt::WindowCloseButtonHint;flags |=Qt::FramelessWindowHint; set

qt自定義標題欄

寫一個qt介面程式，但是系統的標題欄太醜了，一看就像個demo，為了做的高階一點，必須去掉這個標題欄； 需要注意的幾個地方，首先要將系統的標題欄隱藏掉，然後新增自己的關閉最大化最小化按鈕，最後還要設定視窗的拖拽事件（因為去掉系統標題欄後不能拖拽） 1.隱藏系統標題欄

簡單的自定義標題欄（不使用Toolbar）

比較簡單的自定義標題欄，這裡直接封裝成一個類似控制元件的樣子，先上效果圖： 我們可以先寫一個BaseView來，用來做標題欄的基礎佈局： /** * 自定義View的基類 * @author */ public class BaseView extends FrameL

Qt高階——Qt自定義標題欄

Qt高階——Qt自定義標題欄 一、Qt自定義標題欄簡介 QWidget及其子類窗體元件的標題欄受作業系統的控制，即標題欄的介面風格與作業系統的主題風格相同，工程實踐中需要開發者自行定義，達到美化應用程式介面的目的。 二、Qt自定義標題欄實現 1、自定義標題欄的功能 自定義標題欄需要完成功能如下：（1

Flutter自定義標題欄之處理狀態列高度

App在很多情況下由於各種需求需要自定義標題欄，而在能夠構建Android和IOS應用的Flutter中，如果不在Scaffold中使用AppBar會發現預設是沉浸式。 猜想：我們使用自定義標題欄好像需要知道狀態列的高度，我看到網上很多人想要自定義標題欄，卻老是去找怎麼獲取狀態列的高度 解惑：其

ToolBar自定義標題欄

.style.xml <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Ligh

React Native自定義標題欄元件

大家好，今天講一下如何實現自定義標題欄元件，我們都知道RN有一個優點就是可以元件化，在需要使用該元件的地方直接引用並傳遞一些引數就可以了，這種方式確實提交了開發效率。 標題欄是大多數應用介面必不可少的

用Kotlin封裝一個自定義SpannableString

使用Kotlin進行了改寫，保留了大部分功能，現不支援點選時的文字顏色和背景色（感覺用到的場景不多，所以就沒加） 歡迎star

【Qt】Qt之自定義介面（新增自定義標題欄）【轉】

簡述 通過上節內容，我們實現了自定義窗體的移動，但是我們缺少一個標題欄來顯示窗體的圖示、標題，以及控制窗體最小化、最大化、關閉的按鈕。 自定義標題欄後，所有的控制元件我們都可以定製，比如：在標題欄中新增換膚、設定按鈕以及其他控制元件。 簡述 效果 自定義標題欄 實現 介面說明