创建2D-Picker

编写: roya 原文:https://developer.android.com/training/wearables/ui/2d-picker.html

Android Wear中的2D Picker模式允许用户像换页一样从一组项目中导航和选择。

要实现这个模式，你需要添加一个 GridViewPager 元素到你的activity的layout中然后实现一个继承 FragmentGridPagerAdapter类的adapter以提供一组页面。

Note: Android SDK中的GridViewPager例子示范了如何在你的apps中使用 GridViewPager layout。这个例子的位置在 android-sdk/samples/android-20/wearable/GridViewPager目录中。

添加Page Grid

像下面一样添加一个 GridViewPager 元素到你的layout描述文件：

<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技术以保证你的2D picker可以工作在圆形和方形两种设备上。

实现Page Adapter

Page Adapter提供一组页面以填充 GridViewPager 部件。要实现这个adapter，你需要继承Wearable UI Library中的 FragmentGridPageAdapter 类。

举个栗子🌰，Android SDK内的GridViewPager例子🌰中包含了下面的adapter实现将提供一组静态cards和自定义背景图片：

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调用 getFragment 和 getBackground来取得内容以显示到每个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有多少行内容是可获得的，然后 getColumnCount方法告诉picker每行中有多少列内容是可获得的。

// 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是实现细节依赖于你的特定的某组pages。由adapter提供每个页面类型的 Fragment。在这个例子中，每个page是一个使用默认card layouts的 CardFragment 实例。然而，你可以混合不同类型的pages在同一个2D picker，比如cards，action icons，和自定义layouts，由你的情况决定。

不是所有行都需要有同样数量的pages，注意这个例子中的每行有不同的列数。你也可以用一个 GridViewPager 组件实现只有一行或一列的1D picker。

Figure 1:GridViewPager例子

GridViewPager 提供了滚动支持当cards内容超出设备屏幕。这种例子配置了每张card需要被扩展，所以用户可以滚动卡片的内容。当用户到大可滚动卡片的底部，向同样方向滑动将显示grid中的下个page（当下一page可用时）。

你可以使用 getBackground() 方法自定义每页page的背景。当用户划过page，GridViewPager 自动使用视差滚动和淡出效果在不同的背景之间。

分配adapter实例给page grid

在你的activity中，分配一个你的adapter实现实例给 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()));
    }
}