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。
<activity android:theme="@android:style/Theme.Holo.NoActionBar">
2、我們也可以通過在代碼中調用show()或者hide()方法來相應的顯示或者隱藏ActionBar
3、在我們使用actionBar.hide();方法是系統默認會將ActionBar占用的空間分配給界面,此時顯示的界面將會重新繪制。
同樣調用actionBar.show();時也會重新繪制界面。如果我們一個程序需要頻繁的顯示或者隱藏ActionBar的話,這樣
就不會有良好的效果。Google提供給一個屬性可以讓ActionBar浮在界面上,當然你可以讓ActionBar的背景為透明,
這樣會有良好的體驗效果。
三、添加ActionBar的Item
1、通過程序動態布局
package com.xys.actionbar; import android.os.Bundle; import android.app.ActionBar; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends Activity { ActionBar actionBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); actionBar=getActionBar(); actionBar.show(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. super.onCreateOptionsMenu(menu); //添加菜單項 MenuItem add=menu.add(0,0,0,"add"); MenuItem del=menu.add(0,0,0,"del"); MenuItem save=menu.add(0,0,0,"save"); //綁定到ActionBar add.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); del.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); save.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); return true; } }
效果如圖:
menu/menu.xml
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/item1" android:orderInCategory="1" android:showAsAction="ifRoom|withText" android:title="@string/save"/> <item android:id="@+id/item1" android:orderInCategory="2" android:showAsAction="ifRoom|withText" android:title="@string/edit"/> </menu>
程序:
public class ActionBarXMLActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.optionsmenu, menu); return true; } }
效果和上面一樣
四、關于菜單項過多
當菜單項過多時,Android會分兩種情況進行處理:
1、手機有MENU實體鍵:則按下Menu鍵后會顯示剩余菜單項
2、手機沒有MENU實體鍵:則會在最左邊顯示一個Action OverFlow按鈕,按下后會顯示剩余項菜單,如圖:
五、使用帶字的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()方
法。
public boolean onOptionsItemSelected(MenuItem item) { // TODO Auto-generated method stub switch (item.getItemId()) { case R.id.menu_save: Toast.makeText(getApplicationContext(), "menu_save", 0).show(); break; case android.R.id.home: Intent intent = new Intent(this, MainActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent); Toast.makeText(getApplicationContext(), "android.R.id.home", 0) .show(); break; default: break; } return super.onOptionsItemSelected(item); }
七、應用的圖標
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的的新實例。
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: Intent intent = new Intent(this, MainActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); return true; default: return super.onOptionsItemSelected(item); } }
當我們想實現用戶點擊ActionBar 圖標后返回前一個activity,可以通過在Actionbar設置setDisplayHomeAsUpEnabled(true) 來實現。如圖:
八、添加活動視圖
1、ActionBar中還可以添加很多其他的視圖
我們也可以添加一個視圖作為一個Action Item.我們可以通過在xml元素的android:actionLayout屬性制定我們希望現實布局資源的ID(例如@layout/mysearchview)
我們可以選擇添加android:actionViewClass屬性分配與完全限定的類名描述我們想要顯示的視圖(例如android.widget.SearchView)
package com.xys.actionbar; import android.app.ActionBar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuInflater; public class MainActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override protected void onStart() { super.onStart(); ActionBar actionBar = this.getActionBar(); actionBar.setDisplayHomeAsUpEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main, menu); return true; } }
這樣我們就添加了一個Search的視圖,效果如下:
2、其他Item
ActionBar的Item會分有好幾個種類,分別有
1).普通類型(帶圖片帶文字)。
2).分享類型。
3).可拓展類型。
4).列表類型。
如圖:
<item android:id="@+id/menu_collapse" android:actionLayout="@layout/collapsibleview" android:icon="@drawable/search" android:showAsAction="ifRoom|collapseActionView" android:title="@string/menu_search"> </item> <item android:id="@+id/menu_share" android:actionProviderClass="android.widget.ShareActionProvider" android:enabled="true" android:showAsAction="ifRoom" android:title="@string/menu_share"/> <item android:id="@+id/menu_settings" android:icon="@drawable/save" android:orderInCategory="100" android:title="@string/menu_settings"> </item> <item android:id="@+id/menu_save" android:icon="@drawable/save" android:showAsAction="ifRoom|withText" android:title="@string/menu_save"> <menu> <item android:id="@+id/action_sort_size" android:icon="@android:drawable/ic_menu_sort_by_size" android:onClick="onSort"/> <item android:id="@+id/action_sort_alpha" android:icon="@android:drawable/ic_menu_sort_alphabetically" android:onClick="onSort"/> </menu> </item>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代碼中進行實現:
public boolean onCreateOptionsMenu(Menu menu) { // 添加分享按鈕的事件 // 4.0以下沒有ShareActionProvider MenuItem menuItem_share = menu.findItem(R.id.menu_share); // Get the provider and hold onto it to set/change the share intent. mShareActionProvider = (ShareActionProvider) menuItem_share .getActionProvider(); // If you use more than one ShareActionProvider, each for a different // action, // use the following line to specify a unique history file for each one. // mShareActionProvider.setShareHistoryFileName("custom_share_history.xml"); // Set the default share intent mShareActionProvider.setShareIntent(getDefaultShareIntent()); } private Intent getDefaultShareIntent() { // TODO Auto-generated method stub Log.i(TAG, "getDefaultShareIntent"); Intent intent = new Intent(Intent.ACTION_SEND); intent.setType("text/plain"); intent.putExtra(Intent.EXTRA_SUBJECT, "小清新短信閃"); intent.putExtra(Intent.EXTRA_TEXT, "小清新短信閃 1.0"); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); return intent; }效果如圖:
4、可拓展的Item
看到那個放大鏡了,就是一個可拓展試的Item,看xml 中的 menu_collapse。
他有倆個屬性是android:actionLayout="@layout/collapsibleview" android:showAsAction="ifRoom|collapseActionView"
android:actionLayout="@layout/collapsibleview" 是點item后拓展成的View
android:showAsAction="collapseActionView"代表他是一個可拓展的Item
Button btnn; EditText editText; private ShareActionProvider mShareActionProvider; @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); // 給可折疊的view上的控件添加事件 LinearLayout viewGroup = (LinearLayout) menu.findItem( R.id.menu_collapse).getActionView(); btnn = (Button) viewGroup.findViewById(R.id.colla_btn); editText = (EditText) viewGroup.findViewById(R.id.colla_edit); btnn.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub Toast.makeText(getApplicationContext(), editText.getText() + "~", 0).show(); } }); }
可拓展的Item同時還支持一個拓展事件。只有在4.0以后的Api提供:
MenuItem menuItem = menu.findItem(R.id.menu_collapse); menuItem.setOnActionExpandListener(new OnActionExpandListener() { @Override public boolean onMenuItemActionExpand(MenuItem item) { // TODO Auto-generated method stub Toast.makeText(getApplicationContext(), "onMenuItemActionExpand", 0).show(); return true; } @Override public boolean onMenuItemActionCollapse(MenuItem item) { // TODO Auto-generated method stub Toast.makeText(getApplicationContext(), "onMenuItemActionCollapse", 0).show(); return true; } });
5、自定義View
mCustomView = getLayoutInflater().inflate( R.layout.action_bar_display_options_custom, null); mCustomView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Toast.makeText(getApplicationContext(), "自定義view", 0).show(); } }); actionBar.setCustomView(mCustomView, new ActionBar.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
九、ActionBar標簽
1、ActionBar可以現實選項卡供用戶切換瀏覽該Activity中不同的Fragment
2、每個標簽都可以是一個圖標或文本標題
package com.xys.actionbar; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.Activity; import android.app.Fragment; import android.app.FragmentTransaction; import android.os.Bundle; public class MainActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar bar = getActionBar(); //設置為Tab模式 bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); //新建2個Tab ActionBar.Tab tabA = bar.newTab().setText("A Tab"); ActionBar.Tab tabB = bar.newTab().setText("B Tab"); //綁定到Fragment Fragment fragmentA = new AFragmentTab(); Fragment fragmentB = new BFragmentTab(); tabA.setTabListener(new MyTabsListener(fragmentA)); tabB.setTabListener(new MyTabsListener(fragmentB)); bar.addTab(tabA); bar.addTab(tabB); } protected class MyTabsListener implements ActionBar.TabListener { private Fragment fragment; public MyTabsListener(Fragment fragment) { this.fragment = fragment; } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { ft.add(R.id.fragment_place, fragment, null); } @Override public void onTabReselected(Tab arg0, FragmentTransaction arg1) { // TODO Auto-generated method stub } @Override public void onTabUnselected(Tab arg0, FragmentTransaction arg1) { // TODO Auto-generated method stub } } }
AB Tab頁面:
package com.xys.actionbar; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class AFragmentTab extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_a, container, false); } }
布局:
activity_main.xml:相當于容器
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/fragment_place" android:layout_width="match_parent" android:layout_height="wrap_content" > </LinearLayout> </LinearLayout>fragment_a.xml:每個fragment的布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/fragment_a" android:layout_width="match_parent" android:layout_height="wrap_content" > </LinearLayout> </LinearLayout>
顯示效果如圖:
九-1、下拉模式
前面講到了
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)
這次我們使用下拉模式
public class ActionBarTestActivity extends Activity { /** Called when the activity is first created. */ Button button1,button2; ActionBar actionBar; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); actionBar=getActionBar(); // 生成一個SpinnerAdapter SpinnerAdapter adapter = ArrayAdapter.createFromResource(this, R.array.student, android.R.layout.simple_spinner_dropdown_item); // 將ActionBar的操作模型設置為NAVIGATION_MODE_LIST actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST); // 為ActionBar設置下拉菜單和監聽器 actionBar.setListNavigationCallbacks(adapter, new DropDownListenser()); class DropDownListenser implements OnNavigationListener { // 得到和SpinnerAdapter里一致的字符數組 String[] listNames = getResources().getStringArray(R.array.student); /* 當選擇下拉菜單項的時候,將Activity中的內容置換為對應的Fragment */ public boolean onNavigationItemSelected(int itemPosition, long itemId) { // 生成自定的Fragment Ftest student = new Ftest(); FragmentManager manager = getFragmentManager(); FragmentTransaction transaction = manager.beginTransaction(); // 將Activity中的內容替換成對應選擇的Fragment transaction.replace(android.R.id.content, student, listNames[itemPosition]); transaction.commit(); return true; }
xml布局:
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, ActionBarTestActivity!</string> <string name="app_name">ActionBarTest</string> <string name="ActionBar_name">ActionBar下拉菜單</string> <string-array name="student"> <item>item1</item> <item>item2</item> <item>item3</item> <item>item4</item> </string-array> </resources>
fragment:
public class Ftest extends Fragment { // Fragment對應的標簽,當Fragment依附于Activity時得到 private String tag; @Override public void onAttach(Activity activity) { super.onAttach(activity); tag = getTag(); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // View view = (View) inflater.inflate(R.layout.ftest, container, false); // TextView textView=(TextView) view.findViewById(R.id.topView); // textView.setText(tag); TextView textView = new TextView(getActivity()); textView.setText(tag); return textView; } }
效果圖如下:
十、ActionBar的美化
1、
<style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar"> <item name="android:windowActionBarOverlay">true</item> <item name="android:background">@color/ab_background_color</item> <item name="android:backgroundStacked">@color/ab_backgroundStacked_color</item> <item name="android:backgroundSplit">@color/ab_backgroundSplit_color</item> </style>
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":綠色
2、其他選項的Style
Action items
android:actionButtonStyle
<style name="Widget.Holo.ActionButton" parent="Widget.ActionButton"> <item name="android:minWidth">56dip</item> <item name="android:gravity">center</item> <item name="android:paddingLeft">12dip</item> <item name="android:paddingRight">12dip</item> <item name="android:scaleType">center</item> </style>
從上面的定義看出,它定義了Button的最小寬度、居中樣式、左右padding以及圖片的放縮方式。再看看該樣式的父樣式
<style name="Widget.ActionButton"> <item name="android:background">?android:attr/actionBarItemBackground</item> <item name="android:paddingLeft">12dip</item> <item name="android:paddingRight">12dip</item> <item name="android:minWidth">56dip</item> <item name="android:minHeight">?android:attr/actionBarSize</item> </style>

android:actionBarItemBackground
定義顯示的item選項的背景 Api 14以上可以使用android:itemBackground定義全部Item的背景選項
這倆個選項其實和定義actionBarButtonStyle的背景已經有覆蓋 所以用的時候定義一個就行
android:actionBarDivider
樣式屬性actionBarDivider定義了ActionBar操作項之間的分隔條。可以看出,它直接引用了另一個ActionBar相關屬性 dividerVertical,其定義如下:
<item name="dividerVertical">@drawable/divider_vertical_dark</item>

android:actionMenuTextColor
android:actionMenuTextAppearance
這倆個屬性是定義menu item 文字大小和顏色
<style name="myactionMenuTextAppearance" parent="@android:style/TextAppearance.Holo.Large"> <item name="android:textSize">20sp</item> <item name="android:textStyle">bold</item> <item name="android:textAllCaps">true</item> </style> <item name="android:actionMenuTextAppearance">@style/myactionMenuTextAppearance</item> <item name="android:actionMenuTextColor">@color/ab_backgroundStacked_color</item>

android:actionBarWidgetTheme
Navigation tabs
android:actionBarTabStyle
樣式屬性 actionBarTabStyle 為Tab頁的標簽定義樣式
<style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView"> <item name="android:background">@drawable/tab_indicator_holo</item> <item name="android:paddingLeft">16dip</item> <item name="android:paddingRight">16dip</item> </style>android:actionBarTabBarStyle
樣式屬性actionBarTabBarStyle 定義了Tab標簽之間分隔條。
<style name="Widget.Holo.ActionBar.TabBar" parent="Widget.ActionBar.TabBar"> <item name="android:divider">?android:attr/actionBarDivider</item> <item name="android:showDividers">middle</item> <item name="android:dividerPadding">12dip</item> </style>
android:actionBarTabTextStyle
樣式屬性 actionBarTabTextStyle 定義了Tab的文本樣式,如下:
<style name="Widget.Holo.ActionBar.TabText" parent="Widget.ActionBar.TabText"> <item name="android:textAppearance">@style/TextAppearance.Holo.Medium</item> <item name="android:textColor">?android:attr/textColorPrimary</item> <item name="android:textSize">12sp</item> <item name="android:textStyle">bold</item> <item name="android:textAllCaps">true</item> <item name="android:ellipsize">marquee</item> <item name="android:maxLines">2</item> </style>android:actionDropDownStyle
樣式屬性 actionDropDownStyle 定義了下拉導航列表的樣式,如下:
<style name="Widget.Holo.Spinner.DropDown.ActionBar"> <item name="android:background">@android:drawable/spinner_ab_holo_dark</item> </style>
其父樣式
<style name="Widget.Holo.Spinner" parent="Widget.Spinner.DropDown"> <item name="android:background">@android:drawable/spinner_background_holo_dark</item> <item name="android:dropDownSelector">@android:drawable/list_selector_holo_dark</item> <item name="android:popupBackground">@android:drawable/menu_dropdown_panel_holo_dark</item> <item name="android:dropDownVerticalOffset">0dip</item> <item name="android:dropDownHorizontalOffset">0dip</item> <item name="android:dropDownWidth">wrap_content</item> <item name="android:popupPromptView">@android:layout/simple_dropdown_hint</item> <item name="android:gravity">left|center_vertical</item> </style>
說下ActionBar 總體系統提供的樣式
樣式屬性actionBarStyle定義了ActionBar的基本樣式。
<style name="Widget.Holo.ActionBar" parent="Widget.ActionBar"> <item name="android:titleTextStyle">@android:style/TextAppearance.Holo.Widget.ActionBar.Title</item> <item name="android:subtitleTextStyle">@android:style/TextAppearance.Holo.Widget.ActionBar.Subtitle</item> <item name="android:background">@android:drawable/ab_transparent_dark_holo</item> <item name="android:backgroundStacked">@android:drawable/ab_stacked_transparent_dark_holo</item> <item name="android:backgroundSplit">@android:drawable/ab_bottom_transparent_dark_holo</item> <item name="android:divider">?android:attr/dividerVertical</item> <item name="android:progressBarStyle">@android:style/Widget.Holo.ProgressBar.Horizontal</item> <item name="android:indeterminateProgressStyle">@android:style/Widget.Holo.ProgressBar</item> <item name="android:progressBarPadding">32dip</item> <item name="android:itemPadding">8dip</item> </style>
其父樣式
<style name="Widget.ActionBar"> <item name="android:background">@android:drawable/action_bar_background</item> <item name="android:displayOptions">useLogo|showHome|showTitle</item> <item name="android:divider">@android:drawable/action_bar_divider</item> <item name="android:height">?android:attr/actionBarSize</item> <item name="android:paddingLeft">0dip</item> <item name="android:paddingTop">0dip</item> <item name="android:paddingRight">0dip</item> <item name="android:paddingBottom">0dip</item> <item name="android:titleTextStyle">@android:style/TextAppearance.Widget.ActionBar.Title</item> <item name="android:subtitleTextStyle">@android:style/TextAppearance.Widget.ActionBar.Subtitle</item> <item name="android:progressBarStyle">@android:style/Widget.ProgressBar.Horizontal</item> <item name="android:indeterminateProgressStyle">@android:style/Widget.ProgressBar.Small</item> <item name="android:homeLayout">@android:layout/action_bar_home</item> </style>