當前位置：首頁 > 运维知识 > Android >内容正文

Android

Android打造通用标题栏——让你的App统一标题栏风格

發(fā)布時間：2023/12/20 Android 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 Android打造通用标题栏——让你的App统一标题栏风格小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

在Android應用實際開發(fā)中，標題欄是App必不可少的元素之一（當然，不包括游戲），大部分情況下，系統(tǒng)提供的標題欄并不能完全滿足我們的需求，就需要手動去編寫標題欄布局，那么問題來了，如果是在Activity或者Fragment布局文件里面編寫標題欄，那豈不是每一個頁面的布局文件都要增加不少的代碼，如果想更改一下整個app的標題欄的風格...（十臉蒙蔽），甚至有時候還會可能一個不留神寫錯了一些屬性，導致一些頁面的標題欄看起來并不完全一樣，用戶體驗度就悲催了...

需求

那么我們可以通過什么方式來提高我們的效率和質(zhì)量呢？我想要的效果是這樣的：

1.可以在每個Activity或Fragment的布局文件的最外層布局直接使用自定義的標題欄布局，然后其他的內(nèi)容只需要想以往那樣直接寫在最外層布局里面，像這樣：

2.可以直接在布局文件中聲明顯示的文字內(nèi)容，icon素材，標題內(nèi)容等，而像背景顏色、字體顏色、字體大小就可以統(tǒng)一成一個地方設(shè)置，只要更改一個地方，可以方便更改所有標題欄的風格，像這樣：

實現(xiàn)

既然定了模樣，那就開始來實現(xiàn)這樣一個標題欄，首先思考我們需要的屬性，一般的標題欄都是左邊一個按鈕，右邊一個按鈕，中間一個標題，當然有些情況下不是按鈕而是文字，所以我們可以制定多種屬性選擇，在values下新建一個attrs.xml文件，往里面添加如下屬性：

<?xml version="1.0" encoding="utf-8"?>

<declare-styleable name="CustomToolBar">

</declare-styleable>

</resources>

定義好了樣式之后，開始編寫通用的標題欄布局文件

layout_common_toolbar.xml：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<RelativeLayout

android:id="@+id/toolbar_content_rlyt"

android:layout_width="match_parent"

android:layout_height="50dp"

android:paddingLeft="15dp"

android:paddingRight="15dp"

android:background="@color/bg_toolbar">

<Button

android:id="@+id/toolbar_left_btn"

android:layout_width="25dp"

android:layout_height="25dp"

android:layout_alignParentLeft="true"

android:padding="50dp"

android:gravity="center"

android:layout_centerVertical="true"

android:background="@drawable/icon_back"

android:visibility="invisible"/>

<TextView

android:id="@+id/toolbar_left_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:gravity="center"

android:layout_centerVertical="true"

android:textColor="#fff"

android:textSize="15sp"

android:text="返回"

android:visibility="gone"

<TextView

android:id="@+id/toolbar_title_tv"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center"

android:layout_centerInParent="true"

android:singleLine="true"

android:text="標題"

android:textSize="20sp"

android:textColor="#fff"

android:maxEms="10"

android:visibility="invisible"/>

<Button

android:id="@+id/toolbar_right_btn"

android:layout_width="25dp"

android:layout_height="25dp"

android:layout_alignParentRight="true"

android:gravity="center"

android:layout_centerVertical="true"

android:visibility="invisible"

android:background="#00000000"

android:textSize="15sp"

android:textColor="#fff"/>

<TextView

android:id="@+id/toolbar_right_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:gravity="center"

android:layout_centerVertical="true"

android:textColor="#fff"

android:textSize="15sp"

android:text="更多"

android:visibility="gone"/>

</RelativeLayout>

<View

android:layout_width="match_parent"

android:layout_height="0.5dp"

android:background="#AAAAAA"

</LinearLayout>

分析：其實就是左Button、左TextView、中間標題TextView、右邊Button、右邊TextView以及一個底部的細微的陰影效果

屬性聲明好了，布局文件也寫好了，那接下來自然是在自定義類中設(shè)置屬性值：

我們想要實現(xiàn)將其作為最外層父布局來寫，那肯定里面要容納子控件，可以通過繼承LinearLayout來進行自定義，到時候只需直接往里層繼續(xù)編寫子控件布局。

/**

* Created by IT_ZJYANG on 2016/9/9.

* 標題欄

public class CustomToolBar extends LinearLayout{

private Boolean isLeftBtnVisible;

private int leftResId;

private Boolean isLeftTvVisible;

private String leftTvText;

private Boolean isRightBtnVisible;

private int rightResId;

private Boolean isRightTvVisible;

private String rightTvText;

private Boolean isTitleVisible;

private String titleText;

private int backgroundResId;

public CustomToolBar(Context context) {

this(context, null);

}

public CustomToolBar(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initView(attrs);

}

/**

* 初始化屬性

* @param attrs

public void initView(AttributeSet attrs){

TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CustomToolBar);

/**-------------獲取左邊按鈕屬性------------*/

isLeftBtnVisible = typedArray.getBoolean(R.styleable.CustomToolBar_left_btn_visible, false);

leftResId = typedArray.getResourceId(R.styleable.CustomToolBar_left_btn_src, -1);

/**-------------獲取左邊文本屬性------------*/

isLeftTvVisible = typedArray.getBoolean(R.styleable.CustomToolBar_left_tv_visible, false);

if(typedArray.hasValue(R.styleable.CustomToolBar_left_tv_text)){

leftTvText = typedArray.getString(R.styleable.CustomToolBar_left_tv_text);

}

/**-------------獲取右邊按鈕屬性------------*/

isRightBtnVisible = typedArray.getBoolean(R.styleable.CustomToolBar_right_btn_visible, false);

rightResId = typedArray.getResourceId(R.styleable.CustomToolBar_right_btn_src, -1);

/**-------------獲取右邊文本屬性------------*/

isRightTvVisible = typedArray.getBoolean(R.styleable.CustomToolBar_right_tv_visible, false);

if(typedArray.hasValue(R.styleable.CustomToolBar_right_tv_text)){

rightTvText = typedArray.getString(R.styleable.CustomToolBar_right_tv_text);

}

/**-------------獲取標題屬性------------*/

isTitleVisible = typedArray.getBoolean(R.styleable.CustomToolBar_title_visible, false);

if(typedArray.hasValue(R.styleable.CustomToolBar_title_text)){

titleText = typedArray.getString(R.styleable.CustomToolBar_title_text);

}

/**-------------背景顏色------------*/

backgroundResId = typedArray.getResourceId(R.styleable.CustomToolBar_barBackground, -1);

typedArray.recycle();

/**-------------設(shè)置內(nèi)容------------*/

View barLayoutView = View.inflate(getContext(), R.layout.layout_common_toolbar, null);

Button leftBtn = (Button)barLayoutView.findViewById(R.id.toolbar_left_btn);

TextView leftTv = (TextView)barLayoutView.findViewById(R.id.toolbar_left_tv);

TextView titleTv = (TextView)barLayoutView.findViewById(R.id.toolbar_title_tv);

Button rightBtn = (Button)barLayoutView.findViewById(R.id.toolbar_right_btn);

TextView rightTv = (TextView)barLayoutView.findViewById(R.id.toolbar_right_tv);

RelativeLayout barRlyt = (RelativeLayout)barLayoutView.findViewById(R.id.toolbar_content_rlyt);

if(isLeftBtnVisible){

leftBtn.setVisibility(VISIBLE);

}

if(isLeftTvVisible){

leftTv.setVisibility(VISIBLE);

}

if(isRightBtnVisible){

rightBtn.setVisibility(VISIBLE);

}

if(isRightTvVisible){

rightTv.setVisibility(VISIBLE);

}

if(isTitleVisible){

titleTv.setVisibility(VISIBLE);

}

leftTv.setText(leftTvText);

rightTv.setText(rightTvText);

titleTv.setText(titleText);

if(leftResId != -1){

leftBtn.setBackgroundResource(leftResId);

}

if(rightResId != -1){

rightBtn.setBackgroundResource(rightResId);

}

if(backgroundResId != -1){

barRlyt.setBackgroundColor(getResources().getColor(R.color.bg_toolbar));

}

//將設(shè)置完成之后的View添加到此LinearLayout中

addView(barLayoutView, 0);

}

主要看initView方法，在這個方法中主要做兩步：

1.獲取我們在實際布局文件（比如Activity的布局文件）中設(shè)置的屬性的值

2.根據(jù)這些值來做相應的操作，比如設(shè)置是否可見，設(shè)置是選用文字還是選用按鈕、標題文本內(nèi)容等等

思路：可以看到，首先通過inflate獲取標題欄layout文件，然后再通過findViewById獲取子控件（左Button、右Button、標題TextView等等），再根據(jù)我們第一步獲取的那些屬性值對它們進行相應的設(shè)置，最后將設(shè)置完成的View通過addView(barLayoutView, 0);將其添加到我們的CustomToolBar中的第一個位置，由于CustomToolBar是繼承于LinearLayout,所以標題欄View將會處于最上面的位置，并且以后添加的其他子控件將會依次疊加在標題欄下面（如果CustomToolBar是繼承于RelativeLayout，到時候添加內(nèi)層控件時會被標題欄遮住，不是我們想要的效果）

背景顏色是通過調(diào)用資源R.color.bg_toolbar,只需在color.xml中定義：

至于字體大小，也可以用同樣的方式抽取到dimen.xml中，然后在layout_common_toolbar.xml中對應的控件下引用即可，如：

運用

完成以上步驟，基本定義好了，接下來就是輕松地調(diào)用了：

activity_main.xml

<com.example.zjyang.customtoorbar.CustomToolBar

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

app:left_tv_visible="true"

app:left_tv_text="返回"

app:right_btn_visible="true"

app:right_btn_src="@drawable/icon_search"

app:title_visible="true"

app:title_text="首頁"

tools:context="com.example.zjyang.customtoorbar.MainActivity">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:layout_gravity="center"

android:text="@string/app_name"

android:textSize="20sp"/>

</com.example.zjyang.customtoorbar.CustomToolBar>

其實在這里無非就是設(shè)置自定義屬性（是否可見、文本內(nèi)容），這些都是具體頁面所決定的具體內(nèi)容，而背景顏色等所有標題欄共有的屬性則在xml中去配置。

運行效果

其它頁面自然同理設(shè)置，只需copy過去，修改一下文案和是否可見，就完成了另外一個頁面的標題欄，并且高度顏色什么的也保持了相同的規(guī)范，修改這個規(guī)范也僅僅只是在資源文件中改一下值，有效提高了開發(fā)效率和可維護性。

源碼：點此下載

總結(jié)

以上是生活随笔為你收集整理的Android打造通用标题栏——让你的App统一标题栏风格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： eclipse合作开发(SVN)下文件显
下一篇： VI/VIM 编辑器常用操作