Android 使用Tabs創(chuàng)建Swipe視圖

編寫:Lin-H - 原文:http://developer.android.com/training/implementing-navigation/lateral.html

Swipe View提供在同級屏幕中的橫向?qū)Ш?，例如通過橫向劃屏手勢切換的tab(一種稱作橫向分頁的模式)。這節(jié)課會教你如何使用swipe view創(chuàng)建一個tab layout實現(xiàn)在tab之間切換，或顯示一個標(biāo)題條替代tab。

Swipe View 設(shè)計

在實現(xiàn)這些功能之前，你要先明白在Designing Effective Navigation, Swipe Views design guide中的概念和建議

實現(xiàn)Swipe View

你可以使用Support Library中的ViewPager控件在你的app中創(chuàng)建swipe view。ViewPager是一個子視圖在layout上相互獨立的布局控件(layout widget)。

使用ViewPager來設(shè)置你的layout，要添加一個<ViewPager>元素到你的XML layout中。例如，在你的swipe view中如果每一個頁面都會占用整個layout，那么你的layout應(yīng)該是這樣:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

要插入每一個頁面的子視圖，你需要把這個layout與PagerAdapter掛鉤。有兩種adapter(適配器)你可以用:

FragmentPagerAdapter

在同級屏幕(sibling screen)只有少量的幾個固定頁面時，使用這個最好。

FragmentStatePagerAdapter

當(dāng)根據(jù)對象集的數(shù)量來劃分頁面，即一開始頁面的數(shù)量未確定時，使用這個最好。當(dāng)用戶切換到其他頁面時，fragment會被銷毀來降低內(nèi)存消耗。

例如，這里的代碼是當(dāng)你使用FragmentStatePagerAdapter來在Fragment對象集合中進行橫屏切換:

public class CollectionDemoActivity extends FragmentActivity {
    // 當(dāng)被請求時, 這個adapter會返回一個DemoObjectFragment,
    // 代表在對象集中的一個對象.
    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    ViewPager mViewPager;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collection_demo);

        // ViewPager和他的adapter使用了support library
        // fragments,所以要用getSupportFragmentManager.
        mDemoCollectionPagerAdapter =
                new DemoCollectionPagerAdapter(
                        getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mDemoCollectionPagerAdapter);
    }
}

// 因為這是一個對象集所以使用FragmentStatePagerAdapter,
// 而不是FragmentPagerAdapter.
public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
    public DemoCollectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new DemoObjectFragment();
        Bundle args = new Bundle();
        // 我們的對象只是一個整數(shù) :-P
        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public int getCount() {
        return 100;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "OBJECT " + (position + 1);
    }
}

// 這個類的實例是一個代表了數(shù)據(jù)集中一個對象的fragment
public static class DemoObjectFragment extends Fragment {
    public static final String ARG_OBJECT = "object";

    @Override
    public View onCreateView(LayoutInflater inflater,
            ViewGroup container, Bundle savedInstanceState) {
        // 最后兩個參數(shù)保證LayoutParam能被正確填充
        View rootView = inflater.inflate(
                R.layout.fragment_collection_object, container, false);
        Bundle args = getArguments();
        ((TextView) rootView.findViewById(android.R.id.text1)).setText(
                Integer.toString(args.getInt(ARG_OBJECT)));
        return rootView;
    }
}

這個例子只顯示了創(chuàng)建swipe view的必要代碼。下面一節(jié)向你說明如何通過添加tab使導(dǎo)航更方便在頁面間切換。

添加Tab到Action Bar

Action bar tab能給用戶提供更熟悉的界面來在app的同級屏幕中切換和分辨。

使用ActionBar來創(chuàng)建tab，你需要啟用NAVIGATION_MODE_TABS，然后創(chuàng)建幾個ActionBar.Tab的實例，并對每個實例實現(xiàn)ActionBar.TabListener接口。例如在你的activity的onCreate()方法中，你可以使用與下面相似的代碼:

@Override
public void onCreate(Bundle savedInstanceState) {
    final ActionBar actionBar = getActionBar();
    ...

    // 指定在action bar中顯示tab.
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    // 創(chuàng)建一個tab listener，在用戶切換tab時調(diào)用.
    ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 顯示指定的tab
        }

        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 隱藏指定的tab
        }

        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 可以忽略這個事件
        }
    };

    // 添加3個tab, 并指定tab的文字和TabListener
    for (int i = 0; i < 3; i++) {
        actionBar.addTab(
                actionBar.newTab()
                        .setText("Tab " + (i + 1))
                        .setTabListener(tabListener));
    }
}

根據(jù)你如何創(chuàng)建你的內(nèi)容來處理ActionBar.TabListener回調(diào)改變tab。但是如果你是像上面那樣，通過ViewPager對每個tab使用fragment，下面這節(jié)就會說明當(dāng)用戶選擇一個tab時如何切換頁面，當(dāng)用戶劃屏切換頁面時如何更新相應(yīng)頁面的tab。

使用Swipe View切換Tab

當(dāng)用戶選擇tab時，在ViewPager中切換頁面，需要實現(xiàn)ActionBar.TabListener來調(diào)用在ViewPager中的setCurrentItem()來選擇相應(yīng)的頁面:

@Override
public void onCreate(Bundle savedInstanceState) {
    ...

    // Create a tab listener that is called when the user changes tabs.
    ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 當(dāng)tab被選中時, 切換到ViewPager中相應(yīng)的頁面.
            mViewPager.setCurrentItem(tab.getPosition());
        }
        ...
    };
}

同樣的，當(dāng)用戶通過觸屏手勢(touch gesture)切換頁面時，你也應(yīng)該選擇相應(yīng)的tab。你可以通過實現(xiàn)ViewPager.OnPageChangeListener接口來設(shè)置這個操作，當(dāng)頁面變化時當(dāng)前的tab也相應(yīng)變化。例如:

@Override
public void onCreate(Bundle savedInstanceState) {
    ...

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setOnPageChangeListener(
            new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    // 當(dāng)劃屏切換頁面時，選擇相應(yīng)的tab.
                    getActionBar().setSelectedNavigationItem(position);
                }
            });
    ...
}

使用標(biāo)題欄替代Tab

如果你不想使用action bar tab，而想使用scrollable tabs來提供一個更簡短的可視化配置，你可以在swipe view中使用PagerTitleStrip。

下面是一個內(nèi)容為ViewPager，有一個PagerTitleStrip頂端對齊的activity的layout XML文件示例。單個頁面(adapter提供)占據(jù)ViewPager中的剩余空間。

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.PagerTitleStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />

</android.support.v4.view.ViewPager>