天天看點

Android UI開發詳解之ActionBar

在android3.0之後,google對ui導航設計上進行了一系列的改革,其中有一個非常好用的新功能就是引入的actionbar,他用于取代3.0之前的标題欄,并提供更為豐富的導航效果。

一、添加actionbar

1、不需要導入actionbar,因為在android3.0或者以上版本中,actionbar已經預設的包含在activity中

2、在android3.0的預設主題“holographic”中,已經創造了actionbar

3、當android:minsdkversion 或者 android:targetsdkversion 屬性被設定成11或者更高時,應用會被認為是android3.0版本(預設含有actionbar)

二、隐藏actionbar

1、我們可以通過把主題設定為theme.holo.noactionbar為一個activity去除掉actionbar。 

2、我們也可以通過在代碼中調用show()或者hide()方法來相應的顯示或者隐藏actionbar

3、在我們使用actionbar.hide();方法是系統預設會将actionbar占用的空間配置設定給界面,此時顯示的界面将會重新繪制。

同樣調用actionbar.show();時也會重新繪制界面。如果我們一個程式需要頻繁的顯示或者隐藏actionbar的話,這樣

就不會有良好的效果。google提供給一個屬性可以讓actionbar浮在界面上,當然你可以讓actionbar的背景為透明,

這樣會有良好的體驗效果。

三、添加actionbar的item

1、通過程式動态布局

效果如圖:

Android UI開發詳解之ActionBar

2、通過menu.xml檔案布局

menu/menu.xml

程式:

效果和上面一樣

四、關于菜單項過多

當菜單項過多時,android會分兩種情況進行處理:

1、手機有menu實體鍵:則按下menu鍵後會顯示剩餘菜單項

2、手機沒有menu實體鍵:則會在最左邊顯示一個action overflow按鈕,按下後會顯示剩餘項菜單,如圖:

Android UI開發詳解之ActionBar

五、使用帶字的action item

1、action item 預設格式是如果菜單項含字和圖示的話,隻顯示圖示

2、如果想要顯示字的效果,在xml裡如下設定:android:showasaction="ifroom|withtext" 或者在代碼裡調用setshowasaction():setshowasaction(menuitem.show_as_action_if_room)

六、actionbar的單擊事件

1、actionbar中一個菜單項(即action item)的觸發像以前版本中的活動菜單回調方法(onoptionsitemselected())一樣。

2、當使用者選擇一個fragment的菜單項時,首先會調用activity的onoptionsitemselected()方法,如果該方法傳回false,則調用fragment實作的onoptionsitemselected()方

法。

七、應用的圖示

1、預設情況下,應用圖示在actionbar的左側

2、當使用者點選應用bar的時候,系統會調用你的activity裡面的onoptionsitemselected() 方法裡面的android.r.id.home id(你的主id)裡定義的事件。我們可以重寫這個方法,添加一個條件執行該行為:讓它跳轉到這個應用的主activity而不是傳回的主螢幕。

3、如果選擇傳回應用的主activity,最好的方式是在建立的intent中添加flag_activity_clear_top這個标簽。

使用這個flag_activity_clear_top标簽,如果應用的主activity已經在activity棧中存在,所有在其上的activity都會被銷毀,然後主activity會到棧頂,而不用建立主activity的的新執行個體。

當我們想實作使用者點選actionbar 圖示後傳回前一個activity,可以通過在actionbar設定setdisplayhomeasupenabled(true) 來實作。如圖:

Android UI開發詳解之ActionBar

八、添加活動視圖

1、actionbar中還可以添加很多其他的視圖

我們也可以添加一個視圖作為一個action item.我們可以通過在xml元素的android:actionlayout屬性制定我們希望現實布局資源的id(例如@layout/mysearchview)

我們可以選擇添加android:actionviewclass屬性配置設定與完全限定的類名描述我們想要顯示的視圖(例如android.widget.searchview)

這樣我們就添加了一個search的視圖,效果如下:

Android UI開發詳解之ActionBar
Android UI開發詳解之ActionBar

2、其他item

actionbar的item會分有好幾個種類,分别有

1).普通類型(帶圖檔帶文字)。

2).分享類型。 

3).可拓展類型。

4).清單類型。

如圖:

Android UI開發詳解之ActionBar

menu_save item 就是一個最普通的帶文字帶圖檔的item。

能否顯示在actionbar的item主要看android:showasaction="ifroom|withtext"這個屬性。

看menu_sitting 就永遠不會顯示出來,隻有在按menu時候會顯示。谷歌文檔中提供android:showasaction總共有五個屬性。

never:永遠不會顯示。隻會在溢出清單中顯示。

ifroom:會顯示在item中,但是如果已經有4個或者4個以上的item時會隐藏在溢出清單中。

always:無論是否溢出,總會顯示。

withtext:title會顯示。

collapseactionview:可拓展的item。

3、可分享的item

看上面代碼片段 menu_share 按鈕就是一個可分享的item。

android:actionproviderclass="android.widget.shareactionprovider"表示這個item是個分享item

在java代碼中進行實作:

Android UI開發詳解之ActionBar

4、可拓展的item

看到那個放大鏡了,就是一個可拓展試的item,看xml 中的 menu_collapse。

他有倆個屬性是android:actionlayout="@layout/collapsibleview" android:showasaction="ifroom|collapseactionview"

android:actionlayout="@layout/collapsibleview" 是點item後拓展成的view

android:showasaction="collapseactionview"代表他是一個可拓展的item

可拓展的item同時還支援一個拓展事件。隻有在4.0以後的api提供:

5、自定義view

九、actionbar标簽

1、actionbar可以現實頁籤供使用者切換浏覽該activity中不同的fragment

2、每個标簽都可以是一個圖示或文本标題

ab tab頁面:

布局:

activity_main.xml:相當于容器

fragment_a.xml:每個fragment的布局:

顯示效果如圖:

Android UI開發詳解之ActionBar

九-1、下拉模式

前面講到了

這次我們使用下拉模式

xml布局:

fragment:

效果圖如下:

Android UI開發詳解之ActionBar

十、actionbar的美化

1、

item name="android:background:actionbar本身的背景顔色。

item name="android:backgroundstacked":actionbar被分離時tab 的背景顔色。

item name="android:backgroundsplit":actionbar item 在分割到底部時的背景顔色。

item name="android:background:藍色 item name="android:backgroundstacked":紫色 item name="android:backgroundsplit":綠色

Android UI開發詳解之ActionBar

2、其他選項的style

action items

android:actionbuttonstyle

從上面的定義看出,它定義了button的最小寬度、居中樣式、左右padding以及圖檔的放縮方式。再看看該樣式的父樣式

Android UI開發詳解之ActionBar

android:actionbaritembackground

定義顯示的item選項的背景 api 14以上可以使用android:itembackground定義全部item的背景選項

這倆個選項其實和定義actionbarbuttonstyle的背景已經有覆寫 是以用的時候定義一個就行

android:actionbardivider

樣式屬性actionbardivider定義了actionbar操作項之間的分隔條。可以看出,它直接引用了另一個actionbar相關屬性 dividervertical,其定義如下:

Android UI開發詳解之ActionBar

android:actionmenutextcolor

android:actionmenutextappearance

這倆個屬性是定義menu item 文字大小和顔色

Android UI開發詳解之ActionBar

android:actionbarwidgettheme 

navigation tabs

android:actionbartabstyle

樣式屬性 actionbartabstyle 為tab頁的标簽定義樣式

android:actionbartabbarstyle

樣式屬性actionbartabbarstyle 定義了tab标簽之間分隔條。

android:actionbartabtextstyle

樣式屬性 actionbartabtextstyle 定義了tab的文本樣式,如下:

android:actiondropdownstyle

樣式屬性 actiondropdownstyle 定義了下拉導航清單的樣式,如下:

其父樣式

說下actionbar 總體系統提供的樣式

樣式屬性actionbarstyle定義了actionbar的基本樣式。

繼續閱讀