快捷導(dǎo)航

Android如何創(chuàng)建自定義ActionBar

更新時(shí)間：2018年11月23日 16:28:40 作者：antimage08

這篇文章主要教大家如何創(chuàng)建自定義的ActionBar，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

觀察上圖的，當(dāng)切換界面時(shí)，每個(gè)界面的頂部最多只有兩個(gè)圖標(biāo)，而且有4個(gè)界面具有類似特性。所以可以考慮通過自定義控件來創(chuàng)建UI模板。

由于是需要?jiǎng)?chuàng)建出具有重用功能的復(fù)合控件，所以通常需要繼承 ViewGroup ,在給它添加指定功能的控制。給其指定一些可配置的屬性，讓其具有更強(qiáng)的擴(kuò)展性。

本例可以簡(jiǎn)單的創(chuàng)建一個(gè) TopBar 來繼承 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)出自定義的屬性屬于誰，屬于哪個(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 且都沒有指定 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 來獲取自定義的屬性集
  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 語句塊中，就一定能夠回收，不管前面是否出問題等。
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)的布局元素的問題，如：

// 為組件設(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)。這里也就沒有去創(chuàng)建該接口了。

接下來就是在需要的引用該模板：

先創(chuàng)建自己的名字空間：xmlns:custom="http://schemas.android.com/apk/res-auto" 其中 custom 為自定義的名字，res-auto 也可以改為該應(yīng)用的包名。下面簡(jiǎn)單創(chuàng)建一個(gè)布局，以此來演示對(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="" 來加載自己想要加載的圖片（左邊的圖標(biāo)）。這樣就可以通過添加或者不添加 custom 屬性來實(shí)現(xiàn)完對(duì) UI 模板的引用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: