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

我們可以使用任何定義Layouts技術(shù)以保證2D picker可以工作在圓形和方形兩種設備上。

實現(xiàn)Page Adapter

Page Adapter提供一組頁面以填充GridViewPager部件。要實現(xiàn)這個adapter，需要繼承Wearable UI庫中的FragmentGridPageAdapter類。

舉個例子，Android SDK內(nèi)的GridViewPager例子中包含了下面的adapter實現(xiàn)，該實現(xiàn)提供一組靜態(tài)的具有自定義背景圖片的card：

public class SampleGridPagerAdapter extends FragmentGridPagerAdapter {

    private final Context mContext;

    public SampleGridPagerAdapter(Context ctx, FragmentManager fm) {
        super(fm);
        mContext = ctx;
    }

    static final int[] BG_IMAGES = new int[] {
            R.drawable.debug_background_1, ...
            R.drawable.debug_background_5
    };

    // A simple container for static data in each page
    private static class Page {
        // static resources
        int titleRes;
        int textRes;
        int iconRes;
        ...
    }

    // Create a static set of pages in a 2D array
    private final Page[][] PAGES = { ... };

    // Override methods in FragmentGridPagerAdapter
    ...
}

picker調(diào)用getFragment和getBackground來取得內(nèi)容以顯示到grid的每個位置中。

// Obtain the UI fragment at the specified position
@Override
public Fragment getFragment(int row, int col) {
    Page page = PAGES[row][col];
    String title =
        page.titleRes != 0 ? mContext.getString(page.titleRes) : null;
    String text =
        page.textRes != 0 ? mContext.getString(page.textRes) : null;
    CardFragment fragment = CardFragment.create(title, text, page.iconRes);

    // Advanced settings (card gravity, card expansion/scrolling)
    fragment.setCardGravity(page.cardGravity);
    fragment.setExpansionEnabled(page.expansionEnabled);
    fragment.setExpansionDirection(page.expansionDirection);
    fragment.setExpansionFactor(page.expansionFactor);
    return fragment;
}

// Obtain the background image for the page at the specified position
@Override
public ImageReference getBackground(int row, int column) {
    return ImageReference.forDrawable(BG_IMAGES[row % BG_IMAGES.length]);
}

getRowCount方法告訴picker有多少行內(nèi)容是可獲得的，getColumnCount方法告訴picker每行中有多少列內(nèi)容是可獲得的。

// Obtain the number of pages (vertical)
@Override
public int getRowCount() {
    return PAGES.length;
}

// Obtain the number of pages (horizontal)
@Override
public int getColumnCount(int rowNum) {
    return PAGES[rowNum].length;
}

adapter是實現(xiàn)細節(jié)取決于我們指定的某組頁面。由adapter提供的每個頁面是Fragement類型。在這個例子中，每個頁面是一個使用默認card layouts的CardFragment實例。然而，我們可以在同一個2D picker混合不同類型的頁面，比如cards，action icons，和自定義layouts，由具體情況決定。

不是所有行都需要有同樣數(shù)量的頁面。注意這個例子中的每行有不同的列數(shù)。我們也可以用一個 GridViewPager 組件實現(xiàn)只有一行或一列的1D picker。

http://wiki.jikexueyuan.com/project/android-training-geek/images/07_uilib.png" alt="" />

Figure 1: GridViewPager例子

對于那些超出設備屏幕大小的card，GridViewPager為它們提供了滾動支持。這個例子配置了每張card可以按照需要進行展開，所以用戶可以滾動卡片的內(nèi)容。當用戶滾動到card的盡頭，向同一方向滑動將顯示grid中的下一頁（如果下一頁存在的話）。

我們可以使用getBackground()方法自定義每頁的背景。當用戶在頁面間滑動時，GridViewPager自動在不同的背景之間使用視差滾動和淡出效果。

分配adapter實例給page grid

在activity中，分配一個adapter實現(xiàn)實例給GridViewPager組件：

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        final GridViewPager pager = (GridViewPager) findViewById(R.id.pager);
        pager.setAdapter(new SampleGridPagerAdapter(this, getFragmentManager()));
    }
}

上一篇：創(chuàng)建使用Material Design的應用下一篇：啟動與停止線程池中的線程