生活随笔
收集整理的這篇文章主要介紹了
Android打造通用标题栏——让你的App统一标题栏风格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
在Android應用實際開發中，標題欄是App必不可少的元素之一（當然，不包括游戲），大部分情況下，系統提供的標題欄并不能完全滿足我們的需求，就需要手動去編寫標題欄布局，那么問題來了，如果是在Activity或者Fragment布局文件里面編寫標題欄，那豈不是每一個頁面的布局文件都要增加不少的代碼，如果想更改一下整個app的標題欄的風格...（十臉蒙蔽），甚至有時候還會可能一個不留神寫錯了一些屬性，導致一些頁面的標題欄看起來并不完全一樣，用戶體驗度就悲催了...
需求
那么我們可以通過什么方式來提高我們的效率和質量呢？我想要的效果是這樣的：
1.可以在每個Activity或Fragment的布局文件的最外層布局直接使用自定義的標題欄布局，然后其他的內容只需要想以往那樣直接寫在最外層布局里面，像這樣：
2.可以直接在布局文件中聲明顯示的文字內容，icon素材，標題內容等，而像背景顏色、字體顏色、字體大小就可以統一成一個地方設置，只要更改一個地方，可以方便更改所有標題欄的風格，像這樣：
實現
既然定了模樣，那就開始來實現這樣一個標題欄，首先思考我們需要的屬性，一般的標題欄都是左邊一個按鈕，右邊一個按鈕，中間一個標題，當然有些情況下不是按鈕而是文字，所以我們可以制定多種屬性選擇，在values下新建一個attrs.xml文件，往里面添加如下屬性：
<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="CustomToolBar"> <attr name="left_btn_visible" format="boolean"/> <attr name="left_btn_src" format="reference|color"/> <attr name="left_tv_visible" format="boolean"/> <attr name="left_tv_text" format="string"/> <attr name="right_btn_visible" format="boolean"/> <attr name="right_btn_src" format="reference|color"/> <attr name="right_tv_visible" format="boolean"/> <attr name="right_tv_text" format="string"/> <attr name="title_visible" format="boolean"/> <attr name="title_text" format="string"/> <attr name="barBackground" format="reference|color"/> </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以及一個底部的細微的陰影效果
屬性聲明好了，布局文件也寫好了，那接下來自然是在自定義類中設置屬性值：
我們想要實現將其作為最外層父布局來寫，那肯定里面要容納子控件，可以通過繼承LinearLayout來進行自定義，到時候只需直接往里層繼續編寫子控件布局。
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);} 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(); 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));} addView(barLayoutView, 0);}}
主要看initView方法，在這個方法中主要做兩步：
1.獲取我們在實際布局文件（比如Activity的布局文件）中設置的屬性的值
2.根據這些值來做相應的操作，比如設置是否可見，設置是選用文字還是選用按鈕、標題文本內容等等
思路：可以看到，首先通過inflate獲取標題欄layout文件，然后再通過findViewById獲取子控件（左Button、右Button、標題TextView等等），再根據我們第一步獲取的那些屬性值對它們進行相應的設置，最后將設置完成的View通過addView(barLayoutView, 0);將其添加到我們的CustomToolBar中的第一個位置，由于CustomToolBar是繼承于LinearLayout,所以標題欄View將會處于最上面的位置，并且以后添加的其他子控件將會依次疊加在標題欄下面（如果CustomToolBar是繼承于RelativeLayout，到時候添加內層控件時會被標題欄遮住，不是我們想要的效果）
背景顏色是通過調用資源R.color.bg_toolbar,只需在color.xml中定義：
<color name="bg_toolbar">#32A082</color>
至于字體大小，也可以用同樣的方式抽取到dimen.xml中，然后在layout_common_toolbar.xml中對應的控件下引用即可，如：
運用
完成以上步驟，基本定義好了，接下來就是輕松地調用了：
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>
其實在這里無非就是設置自定義屬性（是否可見、文本內容），這些都是具體頁面所決定的具體內容，而背景顏色等所有標題欄共有的屬性則在xml中去配置。
運行效果
其它頁面自然同理設置，只需copy過去，修改一下文案和是否可見，就完成了另外一個頁面的標題欄，并且高度顏色什么的也保持了相同的規范，修改這個規范也僅僅只是在資源文件中改一下值，有效提高了開發效率和可維護性。
源碼：點此下載
總結
以上是生活随笔為你收集整理的Android打造通用标题栏——让你的App统一标题栏风格的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
