【Interface&navigation】使用選項卡創建滑動視圖（62）

原

滑動視圖提供兄弟屏幕之間的橫向導航，例如帶有水平手指手勢的標籤（有時稱爲水平分頁的模式）。本課程教您如何使用滑動視圖創建標籤佈局，以便在標籤之間切換，或者如何顯示標題條而不是標籤。

滑動視圖設計

在實現這些功能之前，您應該瞭解設計有效導航和滑動視圖設計指南中所述的概念和建議。

實現滑動視圖

---

您可以使用支持庫中ViewPager 提供的小部件 在應用中創建滑動視圖。這 是一個佈局窗口小部件，其中每個子視圖是佈局中的單獨頁面（單獨的選項卡）。ViewPager

要設置佈局ViewPager，<ViewPager>請在XML佈局中添加 元素。例如，如果滑動視圖中的每個頁面都應使用整個佈局，那麼您的佈局如下所示：

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

要插入代表每個頁面的子視圖，您需要將此佈局掛鉤到a PagerAdapter。您可以使用兩種適配器：

FragmentPagerAdapter
當在表示固定的少量頁面的兄弟屏幕之間導航時，這是最佳的。
FragmentStatePagerAdapter
這最適合在未確定頁數的對象集合中進行分頁。它會在用戶導航到其他頁面時銷燬片段，從而最大限度地減少內存使用量。
例如，以下是您可以FragmentStatePagerAdapter 用來滑動Fragment對象集合的方法：

public class CollectionDemoActivity extends FragmentActivity {
    // When requested, this adapter returns a DemoObjectFragment, 
    // representing an object in the collection. 
    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    ViewPager mViewPager;

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

        // ViewPager and its adapters use support library 
        // fragments, so use getSupportFragmentManager. 
        mDemoCollectionPagerAdapter =
                new DemoCollectionPagerAdapter( 
                        getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mDemoCollectionPagerAdapter);
    } 
} 

// Since this is an object collection, use a FragmentStatePagerAdapter, 
// and NOT a 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();
        // Our object is just an integer :-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);
    } 
} 

// Instances of this class are fragments representing a single 
// object in our collection. 
public static class DemoObjectFragment extends Fragment { 
    public static final String ARG_OBJECT = "object";

    @Override 
    public View onCreateView(LayoutInflater inflater,
            ViewGroup container, Bundle savedInstanceState) {
        // The last two arguments ensure LayoutParams are inflated 
        // properly. 
        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;
    } 
} 

此示例僅顯示創建滑動視圖所需的代碼。以下部分顯示如何添加選項卡以幫助促進頁面之間的導航。

將選項卡添加到操作欄

---

操作欄 選項卡爲用戶提供了一個熟悉的界面，用於在應用程序之間導航和識別兄弟屏幕。

要使用創建選項卡ActionBar，您需要啓用 NAVIGATION_MODE_TABS，然後創建幾個實例ActionBar.Tab並ActionBar.TabListener爲每個實例 提供接口的實現。例如，在您的activity的onCreate()方法中，您可以使用與此類似的代碼：

如何處理ActionBar.TabListener更改標籤的回調取決於您構建內容的方式。但是，如果您正在使用每個選項卡的片段， ViewPager如上所示，以下部分顯示了當用戶選擇選項卡時如何在頁面之間切換，以及當用戶在頁面之間滑動時更新所選選項卡。

使用滑動視圖更改選項卡

---

要ViewPager在用戶選擇選項卡時在頁面之間切換，請ActionBar.TabListener通過調用以下setCurrentItem()內容 實現選擇適當的頁面ViewPager：

@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) {
            // When the tab is selected, switch to the 
            // corresponding page in the ViewPager. 
            mViewPager.setCurrentItem(tab.getPosition());
        } 
        ... 
    }; 
} 

同樣，當用戶使用觸摸手勢在頁面之間滑動時，您應該選擇相應的選項卡。您可以通過實現ViewPager.OnPageChangeListener界面來設置此行爲， 以在每次頁面更改時更改當前選項卡。例如：

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

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setOnPageChangeListener( 
            new ViewPager.SimpleOnPageChangeListener() {
                @Override 
                public void onPageSelected(int position) {
                    // When swiping between pages, select the 
                    // corresponding tab. 
                    getActionBar().setSelectedNavigationItem(position);
                } 
            }); 
    ... 
} 

使用標題條而不是標籤

---

如果您不想包含操作欄選項卡，並且希望爲較短的可視化配置文件提供 可滾動選項卡，則可以使用PagerTitleStrip滑動視圖。

下面是一個活動的示例佈局XML文件，其活動的整個內容是a ViewPager和頂部對齊的 PagerTitleStrip內部。單個頁面（由適配器提供）佔用了內部的剩餘空間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>

聯繫我

QQ:94297366
微信打賞：https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ

公衆號推薦：