Android WearのGridViewPagerで個別のレイアウトページを表示する方法

【目的】
Android WearのGridViewPagerで個別レイアウトのページ表示させます。



【準備】
１．「Extrasライブラリ(Android Support Library v20等)のアップデート」の手順で、「Android Support Library」をv20に更新しておきます。
２．「wearable 1.0.0のライブラリプロジェクトの作成方法」の手順で、「wearable 1.0.0」のライブラリプロジェクトを作成しておきます。
※ADT23.0.2ではAndroid Wearに対応していない為の、暫定処置です。

※実機でデバッグする場合には以下を実行しておきます。
「Sumsung Gear LiveのADBドライバのインストール方法」の手順で、ADBドライバをインストールしておきます。



【手順１】
１．「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの作成手順で、「AndroidWearSample14-002-GridViewPagerFragment」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。

項目名	項目に設定する値
アプリケーション名(Application Name)	com.example.androidwearsample14_002
プロジェクト名(Project Name)	AndroidWearSample14-002-GridViewPagerFragment
パッケージ名(Package Name)	com.example.androidwearsample14_002
Build SDK	API 20
Minimum Required SDK	API 20

２．「wearable 1.0.0プロジェクトをライブラリに指定する方法」の手順で、wearable 1.0.0をライブラリ設定しておきます。
３．「android-support-v13.jarをライブラリに設定する方法」の手順で、android-support-v13.jarをライブラリ設定しておきます。



【手順２】
１．「AndroidManifest.xml」は以下の通り。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidwearsample14_002"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="20"
        android:targetSdkVersion="20" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:theme="@android:style/Theme.DeviceDefault.Light" >
        <activity android:name="com.example.androidwearsample14_002.MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

２．「Ctrl+Shift+F」を押し、コードをフォーマッティング。
３．「Ctrl+S」を押し、ファイルを保存。



【手順３】
１．「res/layout/activity_main.xml」は以下の通り。

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

２．「Ctrl+Shift+F」を押し、コードをフォーマッティング。
３．「Ctrl+S」を押し、ファイルを保存。



【手順４】
１．「任意のファイルの作成方法」の手順で「res/layout/fragment_column1.xml」を作成。
２．「res/layout/fragment_column1.xml」は以下の通り。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="1列目" />

    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

３．「Ctrl+Shift+F」を押し、コードをフォーマッティング。
４．「Ctrl+S」を押し、ファイルを保存。



【手順５】
１．「任意のファイルの作成方法」の手順で「res/layout/fragment_column2.xml」を作成。
２．「res/layout/fragment_column2.xml」は以下の通り。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/orange"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="2列目" />

    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

３．「Ctrl+Shift+F」を押し、コードをフォーマッティング。
４．「Ctrl+S」を押し、ファイルを保存。



【手順６】
１．「src/com/example/androidwearsample14_002/MainActivity.java」は以下の通り。

package com.example.androidwearsample14_002;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;
import android.support.wearable.view.FragmentGridPagerAdapter;
import android.support.wearable.view.GridViewPager;

public class MainActivity extends Activity {
    private static final int NUMBER_ROW = 3;
    private static final int NUMBER_COL = 2;

    private MainAdapter mainAdapter;
    private GridViewPager gridViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridViewPager = (GridViewPager) findViewById(R.id.fragment_container);
        mainAdapter = new MainAdapter(getFragmentManager());
        gridViewPager.setAdapter(mainAdapter);

    }

    private static class MainAdapter extends FragmentGridPagerAdapter {
        public MainAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

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

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

        @Override
        public Fragment getFragment(int row, int column) {
            if (column == 0) {
                return new Column1Fragment(row);
            } else {
                return new Column2Fragment(row);
            }
        }
    }
}

２．「Ctrl+Shift+F」を押し、コードをフォーマッティング。
３．「Ctrl+S」を押し、ファイルを保存。



【手順７】
１．「任意のファイルの作成方法」の手順で「src/com/example/androidwearsample14_002/Column1Fragment.java」を作成。
２．「src/com/example/androidwearsample14_002/Column1Fragment.java」は以下の通り。

package com.example.androidwearsample14_002;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class Column1Fragment extends Fragment {
    private int row;

    public Column1Fragment(int row) {
        this.row = row;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_column1, container, false);
        ((TextView) view.findViewById(R.id.text)).setText((row + 1) + "行目");
        return view;
    }
}

３．「Ctrl+Shift+F」を押し、コードをフォーマッティング。
４．「Ctrl+S」を押し、ファイルを保存。



【手順８】
１．「任意のファイルの作成方法」の手順で「src/com/example/androidwearsample14_002/Column2Fragment.java」を作成。
２．「src/com/example/androidwearsample14_002/Column2Fragment.java」は以下の通り。

package com.example.androidwearsample14_002;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class Column2Fragment extends Fragment {
    private int row;

    public Column2Fragment(int row) {
        this.row = row;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_column2, container, false);
        ((TextView) view.findViewById(R.id.text)).setText((row + 1) + "行目");
        return view;
    }
}

３．「Ctrl+Shift+F」を押し、コードをフォーマッティング。
４．「Ctrl+S」を押し、ファイルを保存。






【手順９】
１．「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの実行手順で、実行。
※Android Wearの実機で動かす場合は、実機とPCをUSBで接続する。



【手順１０】
１．Sumsung Gear Live(Android Wear)の場合、以下の様に表示されます。

２．列ごとに異なるレイアウトで表示しています。

以上です。