Android UI之Tab(ActionBar+Fragment實現)

Fragment和ActionBar都是Android3.0之後出現的，Fragment，碎片，主要是爲了支持更多的UI設計在大屏幕設備上，如平板。因爲現在設備的屏幕越來越大，使用Fragment可以更靈活的管理視圖層次的變化。像Activity一樣，可以創建Fragment來包含View，進行佈局，但是Fragment必須嵌入在Activity中，不能單獨存在，而且一個Activity可以嵌入多個Fragment，同時一個Fragment可以被多個Activity重用。Action Bar被認爲是新版Android系統中最重要的交互元素，在程序運行中一直置於頂部，主要起到的作用在於：突出顯示一些重要操作、在程序中保持統一的頁面導航和切換方式、將使用頻率低的功能放在Action overflow中，節省頁面空間、一個固定區域顯示程序標示。

ActionBar+Fragment實現Tab標籤頁的步驟：
1、定義每個Fragment,以及Activity佈局。Tab的內容部分相應地在Activity佈局中Fragment位置，android:id="@+id/fragment_content"。
2、Activity中獲得ActionBar, 設置Tab模式。
3、新建Tab標籤頁。
4、聲明Tab(Fragment), 並添加監聽器。讓Tab標籤頁(ActionBar.Tab)，內容（Fragment）,監聽事件關聯，在監聽器的事件 onTabSelected onTabUnselected 進行Tab內容 Fragment切換。
5、添加Tab到ActionBar中。

實例：ActionBarTabAndFragmentDemo
運行效果：


代碼清單：
佈局文件：action_bar_tabs.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">
    <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

<?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" />

Java源代碼文件：MainActivity.java

package com.rainsong.actionbartabandfragmentdemo;


import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity 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();
        if (bar.getTabCount() > 0) {
            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(MainActivity.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;
        }

    }
}

API知識點
public class
Activity
extends ContextThemeWrapper
implements ComponentCallbacks2 KeyEvent.Callback LayoutInflater.Factory2 View.OnCreateContextMenuListener Window.Callback

Known Direct Subclasses
AccountAuthenticatorActivity, ActivityGroup, AliasActivity, ExpandableListActivity, FragmentActivity, ListActivity, NativeActivity

Known Indirect Subclasses
ActionBarActivity, LauncherActivity, PreferenceActivity, TabActivity

Class Overview
An activity is a single, focused thing that the user can do. Almost all activities interact with the user, so the Activity class takes care of creating a window for you in which you can place your UI with setContentView(View).

ActionBar getActionBar()
Retrieve a reference to this activity's ActionBar.


public abstract class
ActionBar
extends Object

Class Overview
A window feature at the top of the activity that may display the activity title, navigation modes, and other interactive items.

abstract int getNavigationMode()
Returns the current navigation mode.

abstract void setNavigationMode(int mode)
Set the current navigation mode.

abstract void setDisplayOptions(int options, int mask)
Set selected display options.

abstract int getTabCount()
Returns the number of tabs currently registered with the action bar.

abstract ActionBar.Tab newTab()
Create and return a new ActionBar.Tab.

abstract void addTab(ActionBar.Tab tab)
Add a tab for use in tabbed navigation mode.

abstract void removeTabAt(int position)
Remove a tab from the action bar.

abstract void removeAllTabs()
Remove all tabs from the action bar and deselect the current tab.


public static abstract class
ActionBar.Tab
extends Object

Class Overview
A tab in the action bar.
Tabs manage the hiding and showing of Fragments.

abstract ActionBar.Tab setText(CharSequence text)
Set the text displayed on this tab.

abstract ActionBar.Tab setTabListener(ActionBar.TabListener listener)
Set the ActionBar.TabListener that will handle switching to and from this tab.

public static interface
ActionBar.TabListener

Class Overview
Callback interface invoked when a tab is focused, unfocused, added, or removed.

abstract void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft)
Called when a tab that is already selected is chosen again by the user.

abstract void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft)
Called when a tab enters the selected state. 

abstract void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft)
Called when a tab exits the selected state. 


public abstract class
FragmentTransaction
extends Object

Class Overview
API for performing a set of Fragment operations.

abstract FragmentTransaction add(int containerViewId, Fragment fragment, String tag)
Add a fragment to the activity state.

abstract FragmentTransaction remove(Fragment fragment)
Remove an existing fragment.

public class 
Fragment
extends Object
implements ComponentCallbacks2 View.OnCreateContextMenuListener 

Class Overview
A Fragment is a piece of an application's user interface or behavior that can be placed in an Activity.

View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
Called to have the fragment instantiate its user interface view.