【Android UI設計與開發】第11期：頂部標題列（二）ActionBar實現Tab選項卡和下拉導航列表

標籤：android   style   blog   http   io   color   ar   os   使用   

轉載請註明出處：http://blog.csdn.net/yangyu20121224/article/details/9050573 

 

 

       在上一篇文章中，我們只是大概的瞭解了一下關於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：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >    <item        android:id="@+id/action_clock"        android:orderInCategory="100"        android:showAsAction="always"        android:title="@string/action_settings"        android:actionLayout="@layout/clock"/>    </menu>

2、在寫一個時鐘的布局檔案，clock.xml：

<?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" >    <AnalogClock        android:id="@+id/analogClock1"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>

3、在定義一個布局檔案用來存放Fragment的布局，列出其中一個，fragment_1.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <ImageView        android:id="@+id/imageview"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:scaleType="fitCenter"        android:src="@drawable/xianjian01" >    </ImageView></LinearLayout>

4、定義一個類實現ActionBar.TabListener的介面，在這個實現中，每個Tab選項標籤都使用了它自己的監聽器，MyTabListener.java：

package com.yangyu.myactionbar02;import android.app.ActionBar.Tab;import android.app.ActionBar.TabListener;import android.app.Activity;import android.app.Fragment;import android.app.FragmentTransaction;public class MyTabListener<T extends Fragment> implements TabListener {    private Fragment fragment;        private final Activity mActivity;        private final Class<T> mClass;        public MyTabListener(Activity activity, Class<T> clz){        mActivity = activity;                  mClass = clz;     }        @Override    public void onTabSelected(Tab tab, FragmentTransaction ft) {        if(fragment == null){            fragment = Fragment.instantiate(mActivity, mClass.getName());            ft.add(android.R.id.content, fragment, null);                 }        ft.attach(fragment);      }    @Override    public void onTabUnselected(Tab tab, FragmentTransaction ft) {        if (fragment != null) {            ft.detach(fragment);        }    }    @Override    public void onTabReselected(Tab tab, FragmentTransaction ft) {            }}

警告：針對每個回調中的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：

package com.yangyu.myactionbar02;import android.app.ActionBar;import android.app.Activity;import android.os.Bundle;import android.view.Menu;public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                initView();    }        /**     * 初始化組件     */    private void initView(){        // 提示getActionBar方法一定在setContentView後面        final ActionBar actionBar = getActionBar();        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);        actionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);        actionBar.addTab(actionBar.newTab().setText("Tab選項卡一").setTabListener(new MyTabListener<FragmentPage1>(this,FragmentPage1.class)));        actionBar.addTab(actionBar.newTab().setText("Tab選項卡二").setTabListener(new MyTabListener<FragmentPage2>(this,FragmentPage2.class)));    }        @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main, menu);        return true;    }}

 注意：以上有關ActionBar.TabListener的實現，只是幾種可能的技術之一。在API Demos應用中你能夠看到更多的這種樣式。

        如果Activity終止了，那麼你應該儲存當前選擇的選項標籤的狀態，以便當使用者再次返回時，你能夠開啟合適的選項標籤。在儲存狀態的時刻，你能夠用getSelectedNavigationIndex()方法查詢當前的被選擇的選項標籤。這個方法返回被選擇的選項標籤的索引位置。

       警告：儲存每個Fragment所必須的狀態是至關重要的，因為當使用者用選項標籤在Fragment對象間切換時，它會查看Fragment在離開時樣子。

       注意：在某些情況下，Android系統會把操作欄選項標籤作為一個下拉式清單來顯示，以便確保操作欄的最佳化顯示。

 

6、最後再列出一個顯示Fragment的類，FragmentPage1.java：

package com.yangyu.myactionbar02;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class FragmentPage1 extends Fragment{    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {                return inflater.inflate(R.layout.fragment_1, null);            }    }

五、實現下拉導航列表

     作為Activity內部的另一種導航（或過濾）模式，操作欄提供了內建的下拉式清單。下拉式清單能夠提供Activity中內容

的不同排序模式。

啟用下拉式導航的基本過程如下：

<1> 建立一個給下拉提供可選項目的列表，以及描畫清單項目時所使用的布局；

<2> 實現ActionBar.OnNavigationListener回調，在這個回調中定義當使用者挑選清單中一個項目時所發生的行為；

<3> 用setNavigationMode()方法該操作欄啟用導航模式；

<4> 用setListNavigationCallbacks()方法給下拉式清單設定回調方法。

 六、下拉導航實現

 

 

 

 七、項目結構圖

 

 

 

八、詳細代碼編寫

 

1、這段代碼比較簡單，主要是調用了SpinnerAdapter和ActionBar.OnNavigationListener對象

package com.yangyu.myactionbar03;import android.app.ActionBar;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.widget.ArrayAdapter;import android.widget.SpinnerAdapter;public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                initView();    }    /**     * 初始化組件     */    private void initView(){        ActionBar actionBar = getActionBar();        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);                //定義一個下拉式清單資料配接器        SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this,                R.array.action_list,                android.R.layout.simple_spinner_dropdown_item);                            actionBar.setListNavigationCallbacks(mSpinnerAdapter, new ActionBar.OnNavigationListener() {            @Override            public boolean onNavigationItemSelected(int itemPosition, long itemId) {                return true;            }        });                                              }        @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main, menu);        return true;    }}

 

【Android UI設計與開發】第11期：頂部標題列（二）ActionBar實現Tab選項卡和下拉導航列表