首页 > 代码库 > android ActionBar(官方指导)

android ActionBar(官方指导)

安装ActionBar:

Support Android 3.0 and Above Only(仅支持3.0版本之后)

<manifest ... >
	    <uses-sdk android:minSdkVersion="11" ... />
	    ...
	</manifest>

Support Android 2.1 and Above(如果想让应用支持3.1版本之后,需如下操作)
1安装v7 appcompat 库
2Update your activity so that it extends ActionBarActivity. For example:
public class MainActivity extends ActionBarActivity { ... }
3In your manifest file, update either the <application>element or individual <activity> elements to use one of the Theme.AppCompat themes. For example:
<activity android:theme="@style/Theme.AppCompat.Light" ... >

Adding Action Buttons(增加ActionBar):
1.Specify the Actions in XML

3.0以上版本:

	<menu xmlns:android="http://schemas.android.com/apk/res/android" >
		    <!-- Search, should appear as action button -->
		    <item android:id="@+id/action_search"
		          android:icon="@drawable/ic_action_search"
		          android:title="@string/action_search"
		          android:showAsAction="ifRoom" />
		    <!-- Settings, should always be in the overflow -->
		    <item android:id="@+id/action_settings"
		          android:title="@string/action_settings"
		          android:showAsAction="never" />
			</menu>


2.0以上版本:

	<menu xmlns:android="http://schemas.android.com/apk/res/android"
		      xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
		    <!-- Search, should appear as action button -->
		    <item android:id="@+id/action_search"
		          android:icon="@drawable/ic_action_search"
		          android:title="@string/action_search"
		          yourapp:showAsAction="ifRoom"  />
			    ...
			</menu>

2.Add the Actions to the Action Bar:使ActionBar生效

@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	    // Inflate the menu items for use in the action bar
	    MenuInflater inflater = getMenuInflater();
	    inflater.inflate(R.menu.main_activity_actions, menu);
	    return super.onCreateOptionsMenu(menu);
	}

3.Respond to Action Buttons相应ActionBar的事件

@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	    // Handle presses on the action bar items
	    switch (item.getItemId()) {
	        case R.id.action_search:
	            openSearch();
	            return true;
	        case R.id.action_settings:
	            openSettings();
	            return true;
	        default:
	            return super.onOptionsItemSelected(item);
	    }
	}

Add Up Button for Low-level Activities:增加返回至上一个Activity的动作按钮:
1.不管是4.0以上版本还是使用ActionBarActivity从支持库都需要:

增加android:parentActivityName属性

<application ... >
	    ...
	    <!-- The main/home activity (it has no parent activity) -->
	    <activity
	        android:name="com.example.myfirstapp.MainActivity" ...>
	        ...
	    </activity>
	    <!-- A child of the main activity -->
	    <activity
	        android:name="com.example.myfirstapp.DisplayMessageActivity"
	        android:label="@string/title_activity_display_message"
	        android:parentActivityName="com.example.myfirstapp.MainActivity" >
	        <!-- Parent activity meta-data to support 4.0 and lower -->
	        <meta-data
	            android:name="android.support.PARENT_ACTIVITY"
	            android:value=http://www.mamicode.com/"com.example.myfirstapp.MainActivity" />>

调用setDisplayHomeAsUpEnabled():
@Override
	public void onCreate(Bundle savedInstanceState) {
	    super.onCreate(savedInstanceState);
	    setContentView(R.layout.activity_displaymessage);

	    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
	    // If your minSdkVersion is 11 or higher, instead use:
	    // getActionBar().setDisplayHomeAsUpEnabled(true);
	}

因为设置了android:parentActivityName属性,所以系统知道要返回的父Activity,所以不用设置事件监听


Styling the Action Bar(设置ActionBar风格):
Use an Android Theme(当使用支持库的时候分别为如下,对应括号中为非支持库的)
When using the Support Library, you must instead use the Theme.AppCompat themes:
Theme.AppCompat for the "dark" theme.  (Theme.Holo)
Theme.AppCompat.Light for the "light" theme.(Theme.Holo.Light)
Theme.AppCompat.Light.DarkActionBar for the light theme with a dark action bar.(Theme.Holo.Light.DarkActionBar)

Customize the Background(改变ActionBar的背景)

 For Android 3.0 and higher only:

 1.定义资源文件:res/values/themes.xml

                        <?xml version="1.0" encoding="utf-8"?>
			<resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@android:style/Theme.Holo.Light.DarkActionBar">
			        <item name="android:actionBarStyle">@style/MyActionBar</item>
			    </style>

			    <!-- ActionBar styles -->
			    <style name="MyActionBar"
			           parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
			        <item name="android:background">@drawable/actionbar_background</item>
			    </style>
			</resources>

2.Then apply your theme to your entire app or individual activities(引用资源文件):

<application android:theme="@style/CustomActionBarTheme" ... />
For Android 2.1 and higher:
1.res/values/themes.xml:
                        <resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@style/Theme.AppCompat.Light.DarkActionBar">
			        <item name="android:actionBarStyle">@style/MyActionBar</item>

			        <!-- Support library compatibility -->
			        <item name="actionBarStyle">@style/MyActionBar</item>
			    </style>

			    <!-- ActionBar styles -->
			    <style name="MyActionBar"
			           parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
			        <item name="android:background">@drawable/actionbar_background</item>

			        <!-- Support library compatibility -->
			        <item name="background">@drawable/actionbar_background</item>
			    </style>
			</resources>

2.Then apply your theme to your entire app or individual activities:
<application android:theme="@style/CustomActionBarTheme" ... />

Customize the Text Color(自定义ActionBar字体颜色)
For Android 3.0 and higher only:

res/values/themes.xml:

			<?xml version="1.0" encoding="utf-8"?>
			<resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@style/Theme.Holo">
			        <item name="android:actionBarStyle">@style/MyActionBar</item>
			        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
			        <item name="android:actionMenuTextColor">@color/actionbar_text</item>
			    </style>

			    <!-- ActionBar styles -->
			    <style name="MyActionBar"
			           parent="@style/Widget.Holo.ActionBar">
			        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
			    </style>

			    <!-- ActionBar title text -->
			    <style name="MyActionBarTitleText"
			           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
			        <item name="android:textColor">@color/actionbar_text</item>
			    </style>

			    <!-- ActionBar tabs text styles -->
			    <style name="MyActionBarTabText"
			           parent="@style/Widget.Holo.ActionBar.TabText">
			        <item name="android:textColor">@color/actionbar_text</item>
			    </style>
			</resources>

For Android 2.1 and higher(When using the Support Library, your style XML file might look like this:):

res/values/themes.xml

                        <?xml version="1.0" encoding="utf-8"?>
			<resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@style/Theme.AppCompat">
			        <item name="android:actionBarStyle">@style/MyActionBar</item>
			        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
			        <item name="android:actionMenuTextColor">@color/actionbar_text</item>

			        <!-- Support library compatibility -->
			        <item name="actionBarStyle">@style/MyActionBar</item>
			        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
			        <item name="actionMenuTextColor">@color/actionbar_text</item>
			    </style>

			    <!-- ActionBar styles -->
			    <style name="MyActionBar"
			           parent="@style/Widget.AppCompat.ActionBar">
			        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

			        <!-- Support library compatibility -->
			        <item name="titleTextStyle">@style/MyActionBarTitleText</item>
			    </style>

			    <!-- ActionBar title text -->
			    <style name="MyActionBarTitleText"
			           parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
			        <item name="android:textColor">@color/actionbar_text</item>
			        <!-- The textColor property is backward compatible with the Support Library -->
			    </style>

			    <!-- ActionBar tabs text -->
			    <style name="MyActionBarTabText"
			           parent="@style/Widget.AppCompat.ActionBar.TabText">
			        <item name="android:textColor">@color/actionbar_text</item>
			        <!-- The textColor property is backward compatible with the Support Library -->
			    </style>
			</resources>


Customize the Tab Indicator(自定义选项卡TabHost的样式,使用选择器)

res/drawable/actionbar_tab_indicator.xml:

                <?xml version="1.0" encoding="utf-8"?>
		<selector xmlns:android="http://schemas.android.com/apk/res/android">

		<!-- STATES WHEN BUTTON IS NOT PRESSED -->

		    <!-- Non focused states -->
		    <item android:state_focused="false" android:state_selected="false"
		          android:state_pressed="false"
		          android:drawable="@drawable/tab_unselected" />
		    <item android:state_focused="false" android:state_selected="true"
		          android:state_pressed="false"
		          android:drawable="@drawable/tab_selected" />

		    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
		    <item android:state_focused="true" android:state_selected="false"
		          android:state_pressed="false"
		          android:drawable="@drawable/tab_unselected_focused" />
		    <item android:state_focused="true" android:state_selected="true"
		          android:state_pressed="false"
		          android:drawable="@drawable/tab_selected_focused" />


		<!-- STATES WHEN BUTTON IS PRESSED -->

		    <!-- Non focused states -->
		    <item android:state_focused="false" android:state_selected="false"
		          android:state_pressed="true"
		          android:drawable="@drawable/tab_unselected_pressed" />
		    <item android:state_focused="false" android:state_selected="true"
		        android:state_pressed="true"
		        android:drawable="@drawable/tab_selected_pressed" />

		    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
		    <item android:state_focused="true" android:state_selected="false"
		          android:state_pressed="true"
		          android:drawable="@drawable/tab_unselected_pressed" />
		    <item android:state_focused="true" android:state_selected="true"
		          android:state_pressed="true"
		          android:drawable="@drawable/tab_selected_pressed" />
		</selector>

然后:
For Android 3.0 and higher only:

res/values/themes.xml:

			<?xml version="1.0" encoding="utf-8"?>
			<resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@style/Theme.Holo">
			        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
			    </style>

			    <!-- ActionBar tabs styles -->
			    <style name="MyActionBarTabs"
			           parent="@style/Widget.Holo.ActionBar.TabView">
			        <!-- tab indicator -->
			        <item name="android:background">@drawable/actionbar_tab_indicator</item>
			    </style>
			</resources>

For Android 2.1 and higher:

res/values/themes.xml:

			<?xml version="1.0" encoding="utf-8"?>
			<resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@style/Theme.AppCompat">
			        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>

			        <!-- Support library compatibility -->
			        <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
			    </style>

			    <!-- ActionBar tabs styles -->
			    <style name="MyActionBarTabs"
			           parent="@style/Widget.AppCompat.ActionBar.TabView">
			        <!-- tab indicator -->
			        <item name="android:background">@drawable/actionbar_tab_indicator</item>

			        <!-- Support library compatibility -->
			        <item name="background">@drawable/actionbar_tab_indicator</item>
			    </style>
			</resources>

Overlaying the Action Bar(自动隐藏ActionBar):
Enable Overlay Mode(自动隐藏模式):

For Android 3.0 and higher only:

                        <resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@android:style/Theme.Holo">
			        <item name="android:windowActionBarOverlay">true</item>
			    </style>
			</resources>

Then apply your theme to your entire app or individual activities:
<application android:theme="@style/CustomActionBarTheme" ... />

For Android 2.1 and higher:

                        <resources>
			    <!-- the theme applied to the application or activity -->
			    <style name="CustomActionBarTheme"
			           parent="@android:style/Theme.AppCompat">
			        <item name="android:windowActionBarOverlay">true</item>

			        <!-- Support library compatibility -->
			        <item name="windowActionBarOverlay">true</item>
			    </style>
			</resources>

Then apply your theme to your entire app or individual activities:
<application android:theme="@style/CustomActionBarTheme" ... />

Specify Layout Top-margin(top留空白,避免与ActionBar接触):

没有使用支持库:

                <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
		    android:layout_width="match_parent"
		    android:layout_height="match_parent"
		    android:paddingTop="?android:attr/actionBarSize">
		    ...
		</RelativeLayout>

使用了支持库:

                <!-- Support library compatibility -->
		<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
		    android:layout_width="match_parent"
		    android:layout_height="match_parent"
		    android:paddingTop="?attr/actionBarSize">
		    ...
		</RelativeLayout>