Android如何創(chuàng)建自定義ActionBar
當(dāng)多個(gè)界面都有很多相似部分時(shí),可以考慮創(chuàng)建一個(gè)功能較全的模板。而在需要時(shí),可以通過(guò)引用模板來(lái)實(shí)現(xiàn)自己想要實(shí)現(xiàn)的功能。比如適配器 Adapter,當(dāng)很多的適配器都差不多時(shí),就可以通過(guò)打造一個(gè)通用的適配器來(lái)實(shí)現(xiàn)。本例中主要是如何創(chuàng)建自定義的 ActionBar。

觀察上圖的,當(dāng)切換界面時(shí),每個(gè)界面的頂部最多只有兩個(gè)圖標(biāo),而且有4個(gè)界面具有類似特性。所以可以考慮通過(guò)自定義控件來(lái)創(chuàng)建UI模板。
由于是需要?jiǎng)?chuàng)建出具有重用功能的復(fù)合控件,所以通常需要繼承 ViewGroup ,在給它添加指定功能的控制。給其指定一些可配置的屬性,讓其具有更強(qiáng)的擴(kuò)展性。
本例可以簡(jiǎn)單的創(chuàng)建一個(gè) TopBar 來(lái)繼承 RelativeLayout,并在 values 文件下新建一個(gè) attrs.xml 布局文件,該文件用于定義 ActionBar 的屬性。
attrs.xml :
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="TopBar" > <attr name="topbar_left_icon" format="reference" /> <attr name="topbar_right_icon" format="reference" /> </declare-styleable> </resources>
其中:<declare-styleable name="TopBar" > 中的 name 值為繼承自 RelativeLayout的類名,這樣做的好處是在自定義屬性較多時(shí),能夠很好的辨認(rèn)出自定義的屬性屬于誰(shuí),屬于哪個(gè)地方的自定義。當(dāng)然也可以不用和繼承自 RelativeLayout 的類名相同;由于 ActionBar 最多時(shí)只有 2 張圖片,不需要其他屬性(如果想在點(diǎn)擊圖標(biāo)時(shí)改變圖顏色等,還可以定義 format 的 color 值),所以給每張圖片定義一個(gè)圖片的引用即可,即:<attr name="topbar_left_icon" format="reference" /> 其中 format 指定的值為 reference,reference 表示圖片的引用。
創(chuàng)建一個(gè)只有兩張圖片的布局文件,這樣做的好處是在自定義控件的類中可以減少代碼量,不必在該類中創(chuàng)建 ImageView ,也能更好的讓 xml 完成 UI 界面設(shè)置,而 Java 程序則專門負(fù)責(zé)業(yè)務(wù)邏輯。
topbar_layout.xml :
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_margin="6dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/topbar_left_img" android:layout_marginLeft="6dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:id="@+id/topbar_right_img" android:layout_marginRight="20dp" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
該布局只有兩個(gè)橫向的 ImageView 且都沒(méi)有指定 src 屬性。
創(chuàng)建一個(gè) TopBar 類用于繼承 RelativeLayout。
TopBar.java :
package com.crazy.gemi.ui.topbar;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import com.crazy.gemi.R;
public class TopBar extends RelativeLayout {
private Drawable draw_left;
private Drawable draw_right;
public TopBar(Context context) {
this(context, null);
}
public TopBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs, defStyleAttr);
}
private void init(AttributeSet attrs, int defStyleAttr) {
// 系統(tǒng)提供了 TypedArray 來(lái)獲取自定義的屬性集
TypedArray typedArray = null;
try {
typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.TopBar,defStyleAttr,-1);
draw_left = typedArray.getDrawable(R.styleable.TopBar_topbar_left_icon);
draw_right = typedArray.getDrawable(R.styleable.TopBar_topbar_right_icon);
} finally {
// 獲取完所有的屬性值后要回收資源
typedArray.recycle();
}
View view = View.inflate(getContext(), R.layout.topbar_layout, this);
ImageView imgLeft = (ImageView)view.findViewById(R.id.topbar_left_img);
ImageView imgRight = (ImageView)view.findViewById(R.id.topbar_right_img);
imgLeft.setImageDrawable(draw_left);
imgRight.setImageDrawable(draw_right);
}
}
其中需要注意的是:
1. 獲取完屬性值后,要記得回收資源。將其放入 finally 語(yǔ)句塊中,就一定能夠回收,不管前面是否出問(wèn)題等。
2. 先加載該布局文件:View view = View.inflate(getContext(), R.layout.topbar_layout, this); 其中的 this 為該 TopBar 對(duì)象的引用,將其添加到 RelativeLayout 中;給圖片賦值,如:imgLeft.setImageDrawable(draw_left);
由此可以看出避免了在該類中出現(xiàn) ImageView imgLeft = new ImageView(content); 的創(chuàng)建 ImageView 對(duì)象的代碼,也避免可為組件元素設(shè)置相應(yīng)的布局元素的問(wèn)題,如:
// 為組件設(shè)置相應(yīng)的布局元素(左邊) LayoutParams leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE); // 添加到 ViewGroup addView(imgLeft, leftParams); // 為組件設(shè)置相應(yīng)的布局元素(右邊) LayoutParams rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE); // 添加到 ViewGroup addView(imgRight,rightParams);
當(dāng)然該自定義的空間還不完善,可以在該類中添加接口,以方便點(diǎn)擊圖標(biāo)時(shí)有相應(yīng)的回調(diào)。這里也就沒(méi)有去創(chuàng)建該接口了。
接下來(lái)就是在需要的引用該模板:
先創(chuàng)建自己的名字空間:xmlns:custom="http://schemas.android.com/apk/res-auto" 其中 custom 為自定義的名字,res-auto 也可以改為該應(yīng)用的包名。下面簡(jiǎn)單創(chuàng)建一個(gè)布局,以此來(lái)演示對(duì)該 UI 模板的引用。
效果如下:

代碼如下:
<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.crazy.gemi.ui.pocket.PocketFragment"> <com.crazy.gemi.ui.topbar.TopBar android:id="@+id/pocket_top_bar" android:background="@drawable/bg_cheaper_fg" android:layout_width="match_parent" android:layout_height="wrap_content" custom:topbar_left_icon="@drawable/pocket_logo" custom:topbar_right_icon="@drawable/abc_btn_radio_to_on_mtrl_015"/> <com.warmtel.expandtab.ExpandPopTabView android:id="@+id/fg_pocket_expandtab_view" android:layout_below="@id/pocket_top_bar" android:layout_width="match_parent" android:layout_height="wrap_content" custom:tab_toggle_btn_bg="@drawable/bg_expa_near" custom:tab_toggle_btn_font_color="@android:color/black"/> <ImageView android:id="@+id/fg_pocket_img" android:layout_below="@id/fg_pocket_expandtab_view" android:scaleType="centerCrop" android:src="@drawable/pocket_bg" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
其中用 custom:topbar_left_icon="" 來(lái)加載自己想要加載的圖片(左邊的圖標(biāo))。這樣就可以通過(guò)添加或者不添加 custom 屬性來(lái)實(shí)現(xiàn)完對(duì) UI 模板的引用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android WebView如何判定網(wǎng)頁(yè)加載的錯(cuò)誤
這篇文章主要介紹了Android WebView如何判定網(wǎng)頁(yè)加載的錯(cuò)誤,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-04-04
Android使用Retrofit2.0技術(shù)仿微信發(fā)說(shuō)說(shuō)
這篇文章主要為大家詳細(xì)介紹了Android使用Retrofit2.0技術(shù)仿微信發(fā)說(shuō)說(shuō),實(shí)現(xiàn)拍照,選圖庫(kù),多圖案上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Android實(shí)現(xiàn)放大鏡效果的方法實(shí)例(附源碼)
這篇文章主要給大家介紹了利用Android實(shí)現(xiàn)放大鏡效果的方法實(shí)例,文中給出了詳細(xì)的介紹和示例代碼,文章的結(jié)尾更是給出了源碼供大家下載學(xué)習(xí),有需要的朋友們下面來(lái)一起看看吧。2017-01-01
android textview設(shè)置字體的行距和字間距
這篇文章主要介紹了android textview設(shè)置字體的行距和字間距的方法,非常簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下2016-05-05
Android項(xiàng)目實(shí)現(xiàn)黑名單攔截效果
本篇文章主要介紹了Android項(xiàng)目實(shí)現(xiàn)黑名單攔截效果,可以根據(jù)白名單或者黑名單攔截,測(cè)試可以攔截電話,有需要的朋友可以了解一下。2016-10-10
Android SwipeRefreshLayout超詳細(xì)講解
在android開發(fā)中,使用最多的數(shù)據(jù)刷新方式就是下拉刷新了,而完成此功能我們使用最多的就是第三方的開源庫(kù)PullToRefresh。現(xiàn)如今,google也忍不住推出了自己的下拉組件SwipeRefreshLayout,下面我們通過(guò)api文檔和源碼來(lái)分析學(xué)習(xí)如何使用SwipeRefreshLayout2022-11-11
Android實(shí)現(xiàn)注冊(cè)頁(yè)面(攜帶數(shù)據(jù)包跳轉(zhuǎn))
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)注冊(cè)頁(yè)面,點(diǎn)擊注冊(cè)按鈕跳轉(zhuǎn)到另一個(gè)頁(yè)面并顯示輸入信息,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

