Android系列之ActionBar使用详解

分手后的思念是犯贱 2021-09-10 13:36 338阅读 0赞

在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。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 1 </td> 
 <td style="vertical-align:top;"> <code>&lt;</code><code>activity</code> <code>android:theme</code><code>=</code><code>"@android:style/Theme.Holo.NoActionBar"</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

2、我们也可以通过在代码中调用show()或者hide()方法来相应的显示或者隐藏ActionBar

3、在我们使用actionBar.hide();方法是系统默认会将ActionBar占用的空间分配给界面，此时显示的界面将会重新绘制。  
同样调用actionBar.show();时也会重新绘制界面。如果我们一个程序需要频繁的显示或者隐藏ActionBar的话，这样  
就不会有良好的效果。Google提供给一个属性可以让ActionBar浮在界面上，当然你可以让ActionBar的背景为透明，  
这样会有良好的体验效果。

三、添加ActionBar的Item

1、通过程序动态布局

[?][Link 1]

效果如图：

2、通过Menu.xml文件布局

menu/menu.xml

[?][Link 1]

程序：

[?][Link 1]

效果和上面一样

四、关于菜单项过多

当菜单项过多时，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()方

法。

[?][Link 1]

七、应用的图标

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的的新实例。

[?][Link 1]

当我们想实现用户点击ActionBar 图标后返回前一个activity，可以通过在Actionbar设置setDisplayHomeAsUpEnabled(true) 来实现。如图：

八、添加活动视图

1、ActionBar中还可以添加很多其他的视图

我们也可以添加一个视图作为一个Action Item.我们可以通过在xml元素的android:actionLayout属性制定我们希望现实布局资源的ID（例如@layout/mysearchview)  
我们可以选择添加android:actionViewClass属性分配与完全限定的类名描述我们想要显示的视图(例如android.widget.SearchView)

[?][Link 1]

这样我们就添加了一个Search的视图，效果如下：

2、其他Item

ActionBar的Item会分有好几个种类，分别有  
1）.普通类型（带图片带文字）。  
2）.分享类型。   
3）.可拓展类型。  
4）.列表类型。

如图：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 </td> 
 <td style="vertical-align:top;"> <code>&lt;</code><code>item</code> <code>android:id</code><code>=</code><code>"@+id/menu_collapse"</code> <code>android:actionLayout</code><code>=</code><code>"@layout/collapsibleview"</code> <code>android:icon</code><code>=</code><code>"@drawable/search"</code> <code>android:showAsAction</code><code>=</code><code>"ifRoom|collapseActionView"</code> <code>android:title</code><code>=</code><code>"@string/menu_search"</code><code>&gt;</code> <code>&lt;/</code><code>item</code><code>&gt;</code> <code>&lt;</code><code>item</code> <code>android:id</code><code>=</code><code>"@+id/menu_share"</code> <code>android:actionProviderClass</code><code>=</code><code>"android.widget.ShareActionProvider"</code> <code>android:enabled</code><code>=</code><code>"true"</code> <code>android:showAsAction</code><code>=</code><code>"ifRoom"</code> <code>android:title</code><code>=</code><code>"@string/menu_share"</code><code>/&gt;</code> <code>&lt;</code><code>item</code> <code>android:id</code><code>=</code><code>"@+id/menu_settings"</code> <code>android:icon</code><code>=</code><code>"@drawable/save"</code> <code>android:orderInCategory</code><code>=</code><code>"100"</code> <code>android:title</code><code>=</code><code>"@string/menu_settings"</code><code>&gt;</code> <code>&lt;/</code><code>item</code><code>&gt;</code> <code>&lt;</code><code>item</code> <code>android:id</code><code>=</code><code>"@+id/menu_save"</code> <code>android:icon</code><code>=</code><code>"@drawable/save"</code> <code>android:showAsAction</code><code>=</code><code>"ifRoom|withText"</code> <code>android:title</code><code>=</code><code>"@string/menu_save"</code><code>&gt;</code> <code>&lt;</code><code>menu</code><code>&gt;</code> <code>&lt;</code><code>item</code> <code>android:id</code><code>=</code><code>"@+id/action_sort_size"</code> <code>android:icon</code><code>=</code><code>"@android:drawable/ic_menu_sort_by_size"</code> <code>android:onClick</code><code>=</code><code>"onSort"</code><code>/&gt;</code> <code>&lt;</code><code>item</code> <code>android:id</code><code>=</code><code>"@+id/action_sort_alpha"</code> <code>android:icon</code><code>=</code><code>"@android:drawable/ic_menu_sort_alphabetically"</code> <code>android:onClick</code><code>=</code><code>"onSort"</code><code>/&gt;</code> <code>&lt;/</code><code>menu</code><code>&gt;</code> <code>&lt;/</code><code>item</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

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代码中进行实现:

[?][Link 1]

效果如图：

4、可拓展的Item

看到那个放大镜了，就是一个可拓展试的Item，看xml 中的 menu\_collapse。  
他有俩个属性是android:actionLayout="@layout/collapsibleview" android:showAsAction="ifRoom|collapseActionView"  
android:actionLayout="@layout/collapsibleview" 是点item后拓展成的View  
android:showAsAction="collapseActionView"代表他是一个可拓展的Item

[?][Link 1]

可拓展的Item同时还支持一个拓展事件。只有在4.0以后的Api提供：

[?][Link 1]

5、自定义View

[?][Link 1]

九、ActionBar标签

1、ActionBar可以现实选项卡供用户切换浏览该Activity中不同的Fragment  
2、每个标签都可以是一个图标或文本标题

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 </td> 
 <td style="vertical-align:top;"> <code>package</code> <code>com.xys.actionbar;</code> &nbsp; <code>import</code> <code>android.app.ActionBar;</code> <code>import</code> <code>android.app.ActionBar.Tab;</code> <code>import</code> <code>android.app.Activity;</code> <code>import</code> <code>android.app.Fragment;</code> <code>import</code> <code>android.app.FragmentTransaction;</code> <code>import</code> <code>android.os.Bundle;</code> &nbsp; <code>public</code> <code>class</code> <code>MainActivity</code>&nbsp;<code>extends</code> <code>Activity</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;/** Called when the activity is first created. */</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;public</code> <code>void</code> <code>onCreate(Bundle savedInstanceState)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super.onCreate(savedInstanceState);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setContentView(R.layout.activity_main);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ActionBar bar = getActionBar();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//</code><code>设置为Tab模式</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//</code><code>新建2个Tab</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ActionBar.Tab tabA = bar.newTab().setText("A Tab");</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ActionBar.Tab tabB = bar.newTab().setText("B Tab");</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//</code><code>绑定到Fragment</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fragment fragmentA =</code>&nbsp;<code>new</code> <code>AFragmentTab();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fragment fragmentB =</code>&nbsp;<code>new</code> <code>BFragmentTab();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabA.setTabListener(new</code> <code>MyTabsListener(fragmentA));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabB.setTabListener(new</code> <code>MyTabsListener(fragmentB));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.addTab(tabA);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.addTab(tabB);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;protected</code> <code>class</code> <code>MyTabsListener</code>&nbsp;<code>implements</code> <code>ActionBar.TabListener</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;private</code> <code>Fragment fragment;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public</code> <code>MyTabsListener(Fragment fragment)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.fragment = fragment;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public</code> <code>void</code> <code>onTabSelected(Tab tab, FragmentTransaction ft)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ft.add(R.id.fragment_place, fragment,</code>&nbsp;<code>null</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public</code> <code>void</code> <code>onTabReselected(Tab arg0, FragmentTransaction arg1) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// TODO Auto-generated method stub</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public</code> <code>void</code> <code>onTabUnselected(Tab arg0, FragmentTransaction arg1) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// TODO Auto-generated method stub</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

AB Tab页面：

[?][Link 1]

布局：

activity\_main.xml：相当于容器

[?][Link 1]

fragment\_a.xml：每个fragment的布局：

[?][Link 1]

显示效果如图：

九-1、下拉模式

前面讲到了

[?][Link 1]

这次我们使用下拉模式

[?][Link 1]

xml布局：

[?][Link 1]

fragment：

[?][Link 1]

效果图如下：

十、ActionBar的美化

1、

[?][Link 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"：绿色

2、其他选项的Style

Action items

android:actionButtonStyle

[?][Link 1]

从上面的定义看出，它定义了Button的最小宽度、居中样式、左右padding以及图片的放缩方式。再看看该样式的父样式

[?][Link 1]

android:actionBarItemBackground

定义显示的item选项的背景 Api 14以上可以使用android:itemBackground定义全部Item的背景选项  
这俩个选项其实和定义actionBarButtonStyle的背景已经有覆盖 所以用的时候定义一个就行

android:actionBarDivider

样式属性actionBarDivider定义了ActionBar操作项之间的分隔条。可以看出，它直接引用了另一个ActionBar相关属性 dividerVertical，其定义如下：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 1 </td> 
 <td style="vertical-align:top;"> <code>&lt;</code><code>item</code> <code>name</code><code>=</code><code>"dividerVertical"</code><code>&gt;@drawable/divider_vertical_dark&lt;/</code><code>item</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

android:actionMenuTextColor  
android:actionMenuTextAppearance  
这俩个属性是定义menu item 文字大小和颜色

[?][Link 1]

android:actionBarWidgetTheme   
Navigation tabs  
android:actionBarTabStyle  
样式属性 actionBarTabStyle  为Tab页的标签定义样式

[?][Link 1]

android:actionBarTabBarStyle  
样式属性actionBarTabBarStyle  定义了Tab标签之间分隔条。

[?][Link 1]

android:actionBarTabTextStyle  
样式属性 actionBarTabTextStyle 定义了Tab的文本样式，如下：

[?][Link 1]

android:actionDropDownStyle  
样式属性 actionDropDownStyle  定义了下拉导航列表的样式，如下：

[?][Link 1]

其父样式

[?][Link 1]