頂部標題欄：自定義ActionBar風格和樣式

時間 2019-11-07

標籤 html java android app 框架 ide 工具佈局 post 學習欄目 HTML 简体版

原文原文鏈接

這篇文章將對ActionBar專題前面幾篇學習過的內容作一個總結，順便運用之前學過的知識實現一個自定義樣式的ActionBar標題欄效果。話很少說，進入今天的正題。

1、實現效果圖 html

豎屏效果圖：最左邊是Logo圖標，右邊是工具欄按鈕，點擊Menu鍵顯示其他的按鈕鍵，下方是Tab標籤選項。 java

橫屏效果圖：豎屏中的Tab選項標籤變成了中間的下拉導航按鈕 android

2、項目結構圖 app

3、編碼準備工做 框架

先來學習一下自定義樣式的基礎知識，以便你們能看懂關於後面的代碼。 ide

一、設置操做欄的樣式 工具

若是你對應用程序中的可視構件進行了定製化的設計，那麼你可能也會要對操做欄作一些從新設計，以便跟應用程序的設計匹配。要這樣作的話，須要使用Android的樣式與主題框架中的一些特殊的樣式屬性來從新設置操做欄的樣式。佈局

注意：改變外觀的背景圖片依賴與當前按鈕的狀態（選擇、按下、解除選擇），所以你使用的可描畫的資源必須是一個可描畫的狀態列表。 post

警告：對於你提供的全部可描畫的背景，要確保使用NinePatch類型可描畫資源，以便容許圖片的拉伸。NinePatch類型的圖片應該比40像素高30像素寬的圖片要小。學習

二、普通的外觀

android:windowActionBarOverlay

這個屬性聲明瞭操做欄是否應該覆蓋Activity佈局，而不是相對Activity的佈局位置的偏移。這個屬性的默認值是false。

一般，在屏幕上，操做欄須要它本身的空間，而且把剩下的空間用來填充Activity的佈局。當操做欄四覆蓋模式時，Activity會使用全部的有效空間，系統會在Activity的上面描畫操做欄。若是你想要在操做欄隱藏和顯示時，佈局中的內容保持固定的尺寸好位置，那麼這種覆蓋模式是有用的。你也可能只是爲了顯示效果來使用它，由於你能夠給操做欄設置半透明的背景，以便用戶依然可以看到操做欄背後的Activity佈局。

注意：默認狀況下，Holo主題會用半透明背景來描畫操做欄。可是，你可以用本身的樣式來修改它，而且默認的狀況下，DeviceDefault主題在不一樣的設備上可能使用不透明的背景。

覆蓋模式被啓用時，Activity佈局不會感知到操做欄覆蓋在它的上面，所以，在操做欄覆蓋的區域，最好不要放置一些重要的信息或UI組件。若是適合，你可以引用平臺的actionBarSize值來決定操做欄的高度，例如，在XML佈局文件中引用這個值。

<SomeView
...
android:layout_marginTop="?android:attr/actionBarSize" />

你還可以用getHeight()方法在運行時獲取操做欄的高度。若是在Activity生存週期的早期調用這個方法，那麼在調用時所反映的操做欄的高度可能不包括被堆放的操做欄（由於導航選項標籤）。要看如何在運行時判斷操做欄總的高度（包括被堆放的操做欄），請看Honeycomb Gallery示例應用中的TitlesFragment類。

三、操做項元素

android:actionButtonStyle 給操做項按鈕定義樣式資源。 android:actionBarItemBackground 給每一個操做項的背景定義可描畫資源（被添加在API 級別 14中）。 android:itemBackground 給每一個懸浮菜單項的背景定義可描畫資源。 android:actionBarDivider 給操做項之間的分隔線定義可描畫資源（被添加在API 級別 14中） android:actionMenuTextColor 給顯示在操做項中文本定義顏色。 android:actionMenuTextAppearance 給顯示在操做項中文本定義樣式資源。 android:actionBarWidgetTheme 給做爲操做視窗被填充到操做欄中的可視構件定義主題資源（被添加在API級別14中）。

四、導航選項標籤

android:actionBarTabStyle 給操做欄中的選項標籤訂義樣式資源。 android:actionBarTabBarStyle 給顯示在導航選項標籤下方的細條定義樣式資源。 android:actionBarTabTextStyle 給導航選項標籤中的文本定義樣式資源。

五、下拉列表

android:actionDropDownStyle 給下拉導航列表定義樣式（如背景和文本樣式）。如，下例XML文件中給操做欄定義了一些定製的樣式：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomActivityTheme" parent="@android :style/Theme.Holo">
<item name="android:actionBarTabTextStyle">@style/CustomTabTextStyle</item>
<item name="android:actionBarDivider">@drawable/ab_divider</item>
<item name="android:actionBarItemBackground">@drawable/ab_item_background</item>
</style>
<style name="CustomTabTextStyle" parent="@android :style/TextAppearance.Holo">
<item name="android:textColor">#2456c2</item>
</style>
</resources>

注意：必定要在<style>標籤中聲明一個父主題，這樣定製的主題能夠繼承全部沒有明確聲明的樣式。在修改操做欄樣式時，使用父主題是相當重要的，它會讓你可以簡單的覆寫你想要改變的操做欄樣式，而不影響你不想修改的樣式（如文本的外觀或操做項的邊緣）。

你可以在清單文件中把定製的主題應用到整個應用程序或一個單獨的Activity對象，如：

<application android:theme="@style/CustomActivityTheme" ... />

六、高級樣式

若是須要比上述屬性更高級的樣式，能夠在Activity的主題中包含android:actionBarStyle和 android:actionBarSplitStyle屬性。這兩個屬性的每個都指定了另外一種可以給操做欄定義各類屬性的樣式，包括帶有 android:background、android:backgroundSplit、android:backgroundStacked屬性的不同背景。若是要覆蓋這些操做欄樣式，就要確保定義一個像Widget.Holo.ActionBar這樣的父操做欄樣式。

例如，若是要改變操做欄背景，你可使用下列樣式：

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomActivityTheme" parent="@android:style/Theme.Holo">
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
<item name="android:background">@drawable/ab_background</item>
<item name="android:backgroundStacked">@drawable/ab_background</item>
<item name="android:backgroundSplit">@drawable/ab_split_background</item>
</style>
</resources>

4、詳細代碼編寫

一、整個項目中最核心的地方就是在res/values下的styles.xml文件中，這是自定義風格樣式的資源文件，styles.xml：

<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="android:Theme"></style>
<style name="CustomTheme" parent="android:style/Theme.Holo.Light">
<item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
<item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabTextStyle</item>
<item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
<item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
</style>
<style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">@drawable/actionbar_tab_bg</item>
<item name="android:paddingLeft">22dp</item>
<item name="android:paddingRight">22dp</item>
</style>
<style name="MyActionBarTabTextStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabText">
<item name="android:textColor">#ff0000</item>
<item name="android:textSize">12sp</item>
</style>
<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:background">@drawable/ad_spinner_background_holo_light</item>
<item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
<item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
</style>
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">@drawable/ad_selectable_background</item>
</style>
</resources>

二、定義好了以後，在AndroidManifest.xml清單文件中使用，能夠在application中使用，這樣就會做用於每個Activity，也能夠在每個單獨的Activity中使用，AndroidManifest.xml：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.yangyu.myactionbar05"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="14" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:logo="@drawable/xianjian_logo"
android:theme="@style/CustomTheme" >
<activity
android:name="com.yangyu.myactionbar05.MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

三、新建一個drawable文件夾，在文件夾下再定義幾個資源文件：

<1> 用於tab選項標籤背景的修改， actionbar_tab_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/ad_tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/ad_tab_selected_pressed_holo" />
<item android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />
<item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />
</selector>

<2> ActionBar標題欄的背景漸變色，actionbar_gradient_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#FFEFEFEF"
android:startColor="#cc1115"
android:type="linear" />
</shape>

<3> 用於下拉列表背景的變換，ad_spinner_background_holo_light.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/spinner_disabled_holo_light" android:state_enabled="false"/>
<item android:drawable="@drawable/ad_spinner_pressed_holo_light" android:state_pressed="true"/>
<item android:drawable="@drawable/ad_spinner_focused_holo_light" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="@drawable/spinner_default_holo_light"/>
</selector>

<4> ActionBar標題欄上的按鈕選中時的背景顏色切換，

selected_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFA4C639" />
</shape>

ad_selectable_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime">
<item android:drawable="@drawable/selected_background" android:state_pressed="true"/>
<item android:drawable="@android:color/transparent"/>
</selector>

四、菜單的資源文件，main_menu.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/menu_search"
android:actionViewClass="android.widget.SearchView"
android:showAsAction="ifRoom"
android:title="@string/action_label_search"/>
<item
android:id="@+id/menu_refresh"
android:icon="@drawable/ic_menu_refresh_holo_light"
android:showAsAction="ifRoom"
android:title="@string/action_label_refresh"/>
<item
android:id="@+id/menu_collected"
android:icon="@drawable/ic_menu_star_holo_light"
android:showAsAction="ifRoom|withText"
android:title="@string/action_label_collected"/>
</menu>

這裏的資源文件有點多，爲了節省篇幅，講解重點和難點，博主這裏就不一一列出來了，有須要的同窗能夠看源碼，一目瞭然。

五、主Activity程序入口類，MainActivity.java：

package com.yangyu.myactionbar05;
import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.Menu;
import android.view.MenuItem;
/**
* @author yangyu
* 主Activity，程序入口類
*/
public class MainActivity extends Activity {
//定義ActionBar
private ActionBar actionBar;
//定義Handler對象
private final Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
/**
* 初始化組件
*/
private void initView(){
//獲得ActionBar
actionBar = getActionBar();
}
/**
* 初始化數據
*/
private void initData(){
//設置ActionBar標題不顯示
actionBar.setDisplayShowTitleEnabled(false);
//設置ActionBar的背景
actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_gradient_bg));
//設置ActionBar左邊默認的圖標是否可用
actionBar.setDisplayUseLogoEnabled(true);
//設置導航模式爲Tab選項標籤導航模式
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//設置ActinBar添加Tab選項標籤
actionBar.addTab(actionBar.newTab().setText("TAB1").setTabListener(new MyTabListener<FragmentPage1>(this,FragmentPage1.class)));
actionBar.addTab(actionBar.newTab().setText("TAB2").setTabListener(new MyTabListener<FragmentPage2>(this,FragmentPage2.class)));
actionBar.addTab(actionBar.newTab().setText("TAB3").setTabListener(new MyTabListener<FragmentPage3>(this,FragmentPage3.class)));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(final MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_refresh:
//選中刷新按鈕後刷新一秒鐘
item.setActionView(R.layout.actionbar_progress);
handler.postDelayed(new Runnable() {
public void run() {
item.setActionView(null);
}
}, 1000);
return true;
}
return super.onOptionsItemSelected(item);
}
}