logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

【Android UI设计与开发】第11期：ActionBar实现Tab选项卡和下拉导航列表

 蠢驴不笨驴不蠢 2014-04-05

  在上一篇文章中，我们只是大概的了解了一下关于ActionBar这个类的简单用法，今天我会继续以实例进行更加深入的讲解。

一、实现Tab选项标签

       当你想要在一个Activity中提供Tab选项卡时，使用ActionBar的Tab选项标签是一个非常好的选择（而不是使用TabWidget类），因为系统会调整ActionBar的选项标签来适应不同尺寸的屏幕的需要，比如在屏幕足够宽的时候，Tab选项标签会被放到主操作栏中；当屏幕太窄的时候，Tab选项标签会被放到一个分离的横条中，如图1和图2所示：

                                  图1

                                   图2                       

        要想使用Tab选项标签在Fragmengt之间切换，你必须在每次选择一个选项标签时执行一个Fragment事务。如果你不熟悉如何使用FragmentTransaction对象来改变Fragment，请阅读博主前面的文章Fragment的详细介绍和使用方法。

       首先，你的布局必须包含一个用于放置跟每个Fragment对象关联的选项标签的ViewGroup对象。并且要确保这个ViewGroup对象有一个资源ID，以便你能够在选项标签的切换代码中能够引用它。另外，如果选项标签的内容填充在Activity的布局中（不包括操作栏），那么Activity不需要任何布局（你甚至不需要调用setContentView()方法）。相反，你能够把每个Fragment对象放到默认的根ViewGroup对象中，你能够用android.R.id.content ID来引用这个ViewGroup对象（在Fragment执行事务期间，你能够在下面的示例代码中看到如何使用这个ID的。

决定了Fragment对象在布局中的显示位置后，添加Tab选项标签的基本过程如下：

     <1> 实现ActionBar.TabListener接口。这个接口中回调方法会响应选项标签上的用户事件，以便你能够切换Fragment对象；

     <2> 对于每个要添加的选项标签，都要实例化一个ActionBar.Tab对象，并且调用setTabListener()方法设置ActionBar.Tab对象的事件监听器。还可以用setText()或setIcon()方法来设置选项标签的标题或图标；

     <3> 通过调用addTab()方法，把每个选项标签添加到操作栏。

二、实现Tab选项标签效果图




三、项目结构图


四、详细代码编写

1、在上面的效果图中，标题栏的最右边有一个时钟，这个效果纯属娱乐，实现的方法也很简单，在menu的布局文件中定义一个活动视图Action View，main.xml：

  1. <menu xmlns:android="http://schemas./apk/res/android" >

  3.     <item
  4.         android:id="@+id/action_clock"
  5.         android:orderInCategory="100"
  6.         android:showAsAction="always"
  7.         android:title="@string/action_settings"
  8.         android:actionLayout="@layout/clock"/>
  9.    
  10. </menu>
复制代码
2、在写一个时钟的布局文件，clock.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas./apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical" >

  7.     <AnalogClock
  8.         android:id="@+id/analogClock1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content" />

  12. </LinearLayout>
复制代码
3、在定义一个布局文件用来存放Fragment的布局，列出其中一个，fragment_1.xml：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas./apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent" >

  6.     <ImageView
  7.         android:id="@+id/imageview"
  8.         android:layout_width="fill_parent"
  9.         android:layout_height="fill_parent"
  10.         android:scaleType="fitCenter"
  11.         android:src="@drawable/xianjian01" >
  12.     </ImageView>

  14. </LinearLayout>
复制代码
4、定义一个类实现ActionBar.TabListener的接口，在这个实现中，每个Tab选项标签都使用了它自己的监听器，MyTabListener.java：
  1. package com.yangyu.myactionbar02;

  3. import android.app.ActionBar.Tab;
  4. import android.app.ActionBar.TabListener;
  5. import android.app.Activity;
  6. import android.app.Fragment;
  7. import android.app.FragmentTransaction;

  9. public class MyTabListener<T extends Fragment> implements TabListener {
  10.         private Fragment fragment;
  11.        
  12.         private final Activity mActivity;
  13.        
  14.         private final Class<T> mClass;
  15.        
  16.         public MyTabListener(Activity activity, Class<T> clz){
  17.                 mActivity = activity;  
  18.                
  19.                 mClass = clz;
  20.         }
  21.        
  22.         @Override
  23.         public void onTabSelected(Tab tab, FragmentTransaction ft) {
  24.                 if(fragment == null){
  25.                         fragment = Fragment.instantiate(mActivity, mClass.getName());
  26.                         ft.add(android.R.id.content, fragment, null);                
  27.                 }
  28.                 ft.attach(fragment);  
  29.         }

  31.         @Override
  32.         public void onTabUnselected(Tab tab, FragmentTransaction ft) {
  33.                 if (fragment != null) {
  34.                         ft.detach(fragment);
  35.                 }
  36.         }

  38.         @Override
  39.         public void onTabReselected(Tab tab, FragmentTransaction ft) {
  40.                
  41.         }
  42. }

复制代码
  警告：针对每个回调中的Fragment事务，你都不必调用commit()方法，因为系统会调用这个方法，并且如果你自己调用了这个方法，有可能会抛出一个异常。你也不能把这些Fragment事务添加到回退堆栈中。       在这段代码中，当对应的选项标签被选择时，监听器只是简单的把一个Fragment对象附加（attach()方法）到Activity布局上，或者如果没有实例化，就会创建这个Fragment对象，并且把它添加（add()方法）到布局中（android.R.id.content ViewGroup的一个子类），当这个选项标签解除选择时，对应的Fragment对象也会被解除与布局的依附关系。 5、ActionBar.TabListener的实现做了大量的工作，剩下的事情就是创建每个ActionBar.Tab对象并把它添加到ActionBar对象中，另外，你必须调用setNavigationMode(NAVIGATION_MODE_TABS)方法来让选项标签可见。如果选项标签的标题实际指示了当前的View对象，你也可以通过调用setDisplayShowTitleEnabled(false)方法来禁用Activity的标题，MainActivity.java：
  1. package com.yangyu.myactionbar02;

  3. import android.app.ActionBar;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.view.Menu;

  8. public class MainActivity extends Activity {

  10.         @Override
  11.         protected void onCreate(Bundle savedInstanceState) {
  12.                 super.onCreate(savedInstanceState);
  13.                 setContentView(R.layout.activity_main);
  14.                
  15.                 initView();
  16.         }       

  18.         /**
  19.          * 初始化组件
  20.          */
  21.         private void initView(){
  22.                 // 提示getActionBar方法一定在setContentView后面
  23.                 final ActionBar actionBar = getActionBar();
  24.                 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  25.                 actionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);

  27.                 actionBar.addTab(actionBar.newTab().setText("Tab选项卡一").setTabListener(new MyTabListener<FragmentPage1>(this,FragmentPage1.class)));

  29.                 actionBar.addTab(actionBar.newTab().setText("Tab选项卡二").setTabListener(new MyTabListener<FragmentPage2>(this,FragmentPage2.class)));
  30.         }
  31.        
  32.         @Override
  33.         public boolean onCreateOptionsMenu(Menu menu) {
  34.                 getMenuInflater().inflate(R.menu.main, menu);
  35.                 return true;
  36.         }
  37. }

复制代码
注意：以上有关ActionBar.TabListener的实现，只是几种可能的技术之一。在API Demos应用中你能够看到更多的这种样式。
        如果Activity终止了，那么你应该保存当前选择的选项标签的状态，以便当用户再次返回时，你能够打开合适的选项标签。在保存状态的时刻，你能够用getSelectedNavigationIndex()方法查询当前的被选择的选项标签。这个方法返回被选择的选项标签的索引位置。       警告：保存每个Fragment所必须的状态是至关重要的，因为当用户用选项标签在Fragment对象间切换时，它会查看Fragment在离开时样子。       注意：在某些情况下，Android系统会把操作栏选项标签作为一个下拉列表来显示，以便确保操作栏的最优化显示。
6、最后再列出一个显示Fragment的类，FragmentPage1.java：
  1. package com.yangyu.myactionbar02;

  3. import android.app.Fragment;
  4. import android.os.Bundle;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;

  9. public class FragmentPage1 extends Fragment{

  11.         @Override
  12.         public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  13.                
  14.                 return inflater.inflate(R.layout.fragment_1, null);               
  15.         }       
  16. }

复制代码
五、实现下拉导航列表

     作为Activity内部的另一种导航（或过滤）模式，操作栏提供了内置的下拉列表。下拉列表能够提供Activity中内容的不同排序模式。启用下拉式导航的基本过程如下：<1> 创建一个给下拉提供可选项目的列表，以及描画列表项目时所使用的布局；<2> 实现ActionBar.OnNavigationListener回调，在这个回调中定义当用户选择列表中一个项目时所发生的行为；<3> 用setNavigationMode()方法该操作栏启用导航模式；<4> 用setListNavigationCallbacks()方法给下拉列表设置回调方法。

六、下拉导航实现效果图
  七、项目结构图 八、详细代码编写 1、这段代码比较简单，主要是调用了SpinnerAdapter和ActionBar.OnNavigationListener对象
  1. package com.yangyu.myactionbar03;

  3. import android.app.ActionBar;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.view.Menu;
  7. import android.widget.ArrayAdapter;
  8. import android.widget.SpinnerAdapter;

  10. public class MainActivity extends Activity {

  12.         @Override
  13.         protected void onCreate(Bundle savedInstanceState) {
  14.                 super.onCreate(savedInstanceState);
  15.                 setContentView(R.layout.activity_main);
  16.                
  17.                 initView();
  18.         }

  20.         /**
  21.          * 初始化组件
  22.          */
  23.         private void initView(){
  24.                 ActionBar actionBar = getActionBar();
  25.                 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
  26.                
  27.                 //定义一个下拉列表数据适配器
  28.                 SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this,
  29.                                 R.array.action_list,
  30.                                 android.R.layout.simple_spinner_dropdown_item);                       
  31.                
  32.                 actionBar.setListNavigationCallbacks(mSpinnerAdapter, new ActionBar.OnNavigationListener() {
  33.                         @Override
  34.                         public boolean onNavigationItemSelected(int itemPosition, long itemId) {
  35.                                 return true;
  36.                         }
  37.                 });                                                                             
  38.         }
  39.        
  40.         @Override
  41.         public boolean onCreateOptionsMenu(Menu menu) {
  42.                 getMenuInflater().inflate(R.menu.main, menu);
  43.                 return true;
  44.         }

  46. }

复制代码
MyActionBar03.zip (1.01 MB, 下载次数: 585)
MyActionBar02.zip (6.36 MB, 下载次数: 6136)


    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 蠢驴不笨驴不蠢 > 《UI设计与开发》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多