最近の更新

2014年7月23日水曜日

Android WearのGridViewPagerでカードをグリッド表示する方法

【目的】
Android WearのGridViewPagerでカードをグリッド表示させます。



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

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



【手順1】
1.「Androidプロジェクトの作成・実行方法(バージョン別一覧)」のAndroidプロジェクトの作成手順で、「AndroidWearSample14-001-GridViewPager」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
項目名 項目に設定する値
アプリケーション名(Application Name) com.example.androidwearsample14_001
プロジェクト名(Project Name) AndroidWearSample14-001-GridViewPager
パッケージ名(Package Name) com.example.androidwearsample14_001
Build SDK API 20
Minimum Required SDK API 20

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



【手順2】
1.「AndroidManifest.xml」は以下の通り。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidwearsample14_001"
    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_001.MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順3】
1.「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" />
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



【手順4】
1.「src/com/example/androidwearsample14_001/MainActivity.java」は以下の通り。
package com.example.androidwearsample14_001;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;
import android.support.wearable.view.CardFragment;
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 = 5;

    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) {
            return SampleFragment.newInstance(row, column);
        }
    }

    public static class SampleFragment extends CardFragment {
        private static SampleFragment newInstance(int row, int column) {
            Bundle bundle = new Bundle();
            bundle.putString(CardFragment.KEY_TITLE, (row + 1) + "行/" + (column + 1) + "列");
            bundle.putString(CardFragment.KEY_TEXT, "本文1行目\n本文2行目\n本文3行目");
            SampleFragment sampleFragment = new SampleFragment();
            sampleFragment.setArguments(bundle);
            return sampleFragment;
        }
    }
}
2.「Ctrl+Shift+F」を押し、コードをフォーマッティング。
3.「Ctrl+S」を押し、ファイルを保存。



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



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




2.スワイプでグリッドを移動できます。

























以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事