GridViewPagerはAndroidWear用の新しいビューです。ViewPagerはスワイプで左右のページに移動できましたが、GridViewPagerは名前の通りViewPagerのグリッド版で、上下左右のページに移動できます。

準備

Wearモジュールのbuild.gradleに次の依存関係を設定します。AndroidStudioでWearモジュールを追加、あるいはWearを含むプロジェクトの新規作成をすれば自動で下記の設定がされているはずです。

compile 'com.google.android.support:wearable:+'

GridViewPagerを使う

レイアウト

activity_main.xml

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

アダプタの設定

ViewPagerと同様にアダプタを設定する必要があります。いろいろ細かいところを省いてシンプルにするとこんな感じ。

MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final GridViewPager gridViewPager = (GridViewPager) findViewById(R.id.gridViewPager);
        gridViewPager.setAdapter(new MyAdapter(getFragmentManager()));
    }
}

アダプタの作成

アダプタにはGridPagerAdapterを使用しますが、今回はそのサブクラスのFragmentGridPagerAdapterを使ってみます。

FragmentGridPagerAdapterのコンストラクタと抽象メソッド

FragmentGridPagerAdapterのサブクラスを作って、最低限必要なコンストラクタとメソッドをIDEに自動生成させるとこんな感じになります。

public static class MyAdapter extends FragmentGridPagerAdapter {

    public MyAdapter(final FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getFragment(final int row, final int column) {
        return null;
    }

    @Override
    public int getRowCount() {
        return 0;
    }

    @Override
    public int getColumnCount(final int row) {
        return 0;
    }
}

FragmentGridPagerAdapterはFragmentManagerを取るコンストラクタを定義しているので、サブクラスのコンストラクタで適切に呼び出してやる必要があります。
getFragmentメソッドは、与えられた行と列(rowとcolumn)に対応するフラグメントを返します。
getRowCountメソッドは行数を、getColumnCountメソッドは与えられた行に対応する列数を返します。

例えば3行4列のページ構成にしたい場合は次のように実装します。

@Override
public int getRowCount() {
    return 3;
}

@Override
public int getColumnCount(final int row) {
    return 4;
}

行数列数が可変の場合は、例えばこんな感じ。

@Override
public int getRowCount() {
    return categories.size();
}

@Override
public int getColumnCount(final int row) {
    final List<Page> pages = categories.get(row).getPages();
    return pages.size();
}

背景の設定

ページ毎の背景を設定するにはgetBackgroundメソッドをオーバライドする必要があります。

@Override
public ImageReference getBackground(final int row, final int column) {
    return ImageReference.forDrawable(R.drawable.background);
}

ImageReferenceはforBitmapとforDrawable、forImageUriの3つのstaticメソッドを持っているので、これを使って簡単に生成することができます。

CardFragmentを使う

FragmentGridPagerAdapterのgetFragmentメソッドで、フラグメントを返す必要があります。ここで普通のFragmentを使うことももちろんできますが、せっかくなのでWear用に新しく登場したCardFragmentを使ってみましょう。タイトルと説明(あとアイコン)のみ表示すればいい、レイアウトはこだわらないというのであればCardFragmentは一瞬で作れます。

このようなCardFragmentを作るにはこう記述するだけです。

CardFragment.create("title", "description", R.drawable.ic_launcher);

最後の引数でアイコンを指定していますが、これはオプションです。

カスタムレイアウト

自分で定義したレイアウトを使いたい場合はCardFragmentを継承し、onCreateContentViewメソッドを適切にオーバライドします。Fragment#onCreateViewと引数は同じで、使い勝手も同じです。

CardFragmentの設定

展開の禁止

先の例の"description"を表示する部分はデフォルトで、表示する文字数に応じて縦に展開されます。これを禁止するには、つまり表示する文字を途中で切ってスクロールをさせないためには次のように設定します。

cardFragment.setExpansionEnabled(false);

展開方向の設定

表示文字数が多い場合の、カードが展開される方向を設定します。

cardFragment.setExpansionDirection(CardFragment.EXPAND_UP);

EXPAND_DOWNの場合 (デフォルト)

EXPAND_UPの場合

高さの最大値の設定

カードの高さの最大値を親の高さの何倍か、というような設定ができます。

// 最大でも親の1.5倍の高さ
cardFragment.setExpansionFactor(1.5f);

カードのグラビティ設定

カードのグラビティを設定します。

cardFragment.setCardGravity(Gravity.TOP);

デフォルトはGravity.DOWNです。設定できる値はGravity.TOPかGravity.DOWNのみです。

Wear用ViewのGridViewPagerを使う

準備