Android应用开发中Action bar编写的入门教程

时间:2022-09-04 13:03:45

从Android 3.0开始除了我们重点讲解的Fragment外,Action Bar也是一个重要的内容,Action Bar主要是用于代替传统的标题栏,对于Android平板设备来说屏幕更大它的标题使用Action Bar来设计可以展示更多丰富的内容,方便操控。

Action Bar主要功能包含:

1. 显示选项菜单
2. 提供标签页的切换方式的导航功能,可以切换多个fragment.
3. 提供下拉的导航条目.
4. 提供交互式活动视图代替选项条目
5. 使用程序的图标作为返回Home主屏或向上的导航操作。

提示在你的程序中应用ActionBar需要注意几点,SDK和最终运行的固件必须是Android 3.0即honeycomb,在androidmanifest.xml文件中的uses-sdk元素中加入android:minSdkVersion 或android:targetSdkVersion,类似

?
1
2
3
4
5
6
7
8
9
< manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="eoe.android.cwj"
android:versionCode="1"
android:versionName="1.0">
< uses-sdk android:minSdkVersion="honeycomb" />
< application ... >
 
< /application>
< /manifest>


  如果需要隐藏Action Bar可以在你的Activity的属性中设置主题风格为NoTitleBar在你的manifest文件中,下面的代码在3.0以前是隐藏标题,而在3.0以后就是隐藏ActionBar了,代码为:

?
1
< activity android:theme="@android:style/Theme.NoTitleBar">

一、添加活动条目 Action Items

  对于活动条目大家可以在下图看到Android 3.0的标题右部分可以变成工具栏,下面的Save和Delete就是两个Action Items活动条目。

  下面是一个menu的layout布局文件代码

?
1
2
3
4
5
6
7
< ?xml version="1.0" encoding="utf-8"?>
< menu xmlns:android="http://schemas.android.com/apk/res/android">
< item android:id="@+id/menu_add"
android:icon="@drawable/ic_menu_save"
android:title="@string/menu_save"
android:showAsAction="ifRoom|withText" />
< /menu>

  而其他代码类似Activity中的Menu,比如

?
1
2
3
4
5
6
7
8
9
10
11
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
// 当Action Bar的图标被单击时执行下面的Intent
Intent intent = new Intent(this, Android123.class);
startActivity(intent);
break;
}
return super.onOptionsItemSelected(item);
}

对于ActionBar的创建,可以在你的Activity中重写onStart方法:

?
1
2
3
4
5
6
@Override
protected void onStart() {
super.onStart();
ActionBar actionBar = this.getActionBar();
actionBar.setDisplayOptions(ActionBar.DISPLAY_HOME_AS_UP, ActionBar.DISPLAY_HOME_AS_UP);
}

 调用getActionBar方式在你的Activity的onCreate中时需要注意必须在调用了setContentView之后。

二、添加活动视图 Action View

对于ActionView,我们可以在menu的布局文件使用中来自定义searchview布局,如下:

?
1
2
3
4
5
< item android:id="@+id/menu_search"
android:title="Search"
android:icon="@drawable/ic_menu_search"
android:showAsAction="ifRoom"
android:actionLayout="@layout/searchview" />

 也可以直接指定Android系统中的SearchView控件,那么这时menu"_search的代码要这样写:

?
1
2
3
4
5
< item android:id="@+id/menu_search"
android:title="Search"
android:icon="@drawable/ic_menu_search"
android:showAsAction="ifRoom"
android:actionViewClass="android.widget.SearchView" />

  大家注意上面的两种方法中一个属性是actionLayout制定一个layout xml布局文件,一个是actionViewClass指定一个类,最终调用可以在Activity中响应onCreateOptionsMenu方法映射这个menu布局即可.

?
1
2
3
4
5
6
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.options, menu);
SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
return super.onCreateOptionsMenu(menu);
}

三、添加标签 Tabs

  在ActionBar中实现标签页可以实现android.app.ActionBar.TabListener ,重写onTabSelected、onTabUnselected和onTabReselected方法来关联Fragment。代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private class MyTabListener implements ActionBar.TabListener {
 private TabContentFragment mFragment;
 public TabListener(TabContentFragment fragment) {
 mFragment = fragment;
 } @Override
 public void onTabSelected(Tab tab, FragmentTransaction ft) {
 ft.add(R.id.fragment_content, mFragment, null);
 }
 @Override
 public void onTabUnselected(Tab tab, FragmentTransaction ft) {
 ft.remove(mFragment);
 }
 @Override
 public void onTabReselected(Tab tab, FragmentTransaction ft) {
 }
 
}

接下来我们创建ActionBar在Activity中,代码如下;

?
1
2
3
4
5
6
7
8
9
10
11
12
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ActionBar actionBar = getActionBar(); //提示getActionBar方法一定在setContentView后面
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
Fragment artistsFragment = new ArtistsFragment();
actionBar.addTab(actionBar.newTab().setText(R.string.tab_artists).setTabListener(new TabListener(artistsFragment)));
Fragment albumsFragment = new AlbumsFragment();
actionBar.addTab(actionBar.newTab().setText(R.string.tab_albums).setTabListener(new TabListener(albumsFragment)));
}

四、添加下拉导航 Drop-down Navigation:

创建一个SpinnerAdapter提供下拉选项,和Tab方式不同的是Drop-down只需要修改下setNavigationMode的模式,将ActionBar.NAVIGATION_MODE_TABS改为ActionBar.NAVIGATION_MODE_LIST,最终改进后的代码为

?
1
2
3
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
actionBar.setListNavigationCallbacks(mSpinnerAdapter, mNavigationCallback);

上面我们通过setListNavigationCallbacks方法绑定一个SpinnerAdapter控件,具体的OnNavigationListener代码示例为;

?
1
2
3
4
5
6
7
8
9
10
11
12
mOnNavigationListener = new OnNavigationListener() {
 String[] strings = getResources().getStringArray(R.array.action_list);
 @Override
 public boolean onNavigationItemSelected(int position, long itemId) {
 ListContentFragment newFragment = new ListContentFragment();
 FragmentTransaction ft = openFragmentTransaction();
 ft.replace(R.id.fragment_container, newFragment, strings[position]);
 ft.commit();
 return true;
}
 
};


而其中的ListContentFragment的代码为:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class ListContentFragment extends Fragment {
private String mText;
 
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
mText = getTag();
}
 
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
TextView text = new TextView(getActivity());
text.setText(mText);
return text;
}
}

五、实现切换Tabs标签;
  
Activity代码:  

?
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
public class ActionBarTabs extends Activity {
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.action_bar_tabs);
}
 
public void onAddTab(View v) {
final ActionBar bar = getActionBar();
final int tabCount = bar.getTabCount();
final String text = "Tab " + tabCount;
 
bar.addTab(bar.newTab().setText(text)
.setTabListener(new TabListener(new TabContentFragment(text))));
}
 
public void onRemoveTab(View v) {
final ActionBar bar = getActionBar();
bar.removeTabAt(bar.getTabCount() - 1);
}
 
public void onToggleTabs(View v) {
final ActionBar bar = getActionBar();
 
if (bar.getNavigationMode() == ActionBar.NAVIGATION_MODE_TABS) {
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
 
bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE, ActionBar.DISPLAY_SHOW_TITLE);
} else {
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
bar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
}
}
 
public void onRemoveAllTabs(View v) {
getActionBar().removeAllTabs();
}
 
private class TabListener implements ActionBar.TabListener {
private TabContentFragment mFragment;
public TabListener(TabContentFragment fragment) {
 
mFragment = fragment;
}
 
public void onTabSelected(Tab tab, FragmentTransaction ft) {
ft.add(R.id.fragment_content, mFragment, mFragment.getText());
}
 
 
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
ft.remove(mFragment);
}
 
public void onTabReselected(Tab tab, FragmentTransaction ft) {
Toast.makeText(ActionBarTabs.this, "Reselected!", Toast.LENGTH_SHORT).show();
}
 
}
 
private class TabContentFragment extends Fragment {
private String mText;
public TabContentFragment(String text) {
mText = text;
}
 
public String getText() {
return mText;
}
  
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View fragView = inflater.inflate(R.layout.action_bar_tab_content, container, false);
TextView text = (TextView) fragView.findViewById(R.id.text);
text.setText(mText);
return fragView;
}
}
}

涉及的布局文件action_bar_tabs.xml代码为:

?
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
< ?xml version="1.0" encoding="utf-8"?>
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
 
< FrameLayout android:id="@+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
 
< LinearLayout android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="vertical">
 
< Button android:id="@+id/btn_add_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_add_tab"
android:onClick="onAddTab" />
 
< Button android:id="@+id/btn_remove_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_remove_tab"
android:onClick="onRemoveTab" />
 
< Button android:id="@+id/btn_toggle_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_toggle_tabs"
android:onClick="onToggleTabs" />
 
< Button android:id="@+id/btn_remove_all_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_remove_all_tabs"
android:onClick="onRemoveAllTabs" />
< /LinearLayout>
 
< /LinearLayout>

布局文件action_bar_tab_content.xml;

?
1
2
3
4
5
6
< ?xml version="1.0" encoding="utf-8"?>
< TextView xmlns:android="http://schemas.android.com/apk/res/android"
 
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />