GridViewPager + CardFragmentを使ってAndroid WearらしいUIを作る

Android Wearを触る機会を得たので少しアプリの作り方でも…。以下のページが超参考になります。

• Y.A.M の 雑記帳: Android Wear アプリ開発 その1
• Android - Wear用ViewのGridViewPagerを使う - Qiita

Androidも、Androidで動くJavaのような言語も初心者ですが、ちょっとずつね。

Android Studioでプロジェクトを作る

Android Wearのプロジェクトを作ると、四角と丸のレイアウトができるのでざくっと決して、activity_my.xmlでGridViewPagerを使うように書き換えます。

<?xml version="1.0" encoding="utf-8"?><android.support.wearable.view.GridViewPagerxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MyActivity"android:id="@+id/gridViewPager"tools:deviceIds="wear"></android.support.wearable.view.GridViewPager>

そして、MyActivityで、GridViewPagerを取得して、FragmentGridViewPagerを継承して作ったAdapterを渡してやります。FragmentGridViewPagerは、とりあえずCardFragmentを返すようにしています。CardFragmentはcreateメソッドで簡単にカードっぽいUIを作れるので素敵です。

package com.example.kazuki.myapplication;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Context;
import android.hardware.SensorManager;
import android.os.Bundle;
import android.support.wearable.view.CardFragment;
import android.support.wearable.view.FragmentGridPagerAdapter;
import android.support.wearable.view.GridViewPager;
import android.widget.Button;
import android.widget.TextView;

publicclass MyActivity extends Activity {

    private TextView mTextView;
    private Button button;

    @Overrideprotectedvoid onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        final GridViewPager gv = (GridViewPager) this.findViewById(R.id.gridViewPager);
        gv.setAdapter(new MyAdapter(this.getFragmentManager()));
    }

    class MyAdapter extends FragmentGridPagerAdapter {

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

        @Overridepublic Fragment getFragment(int row, int col) {
            return CardFragment.create("sample", "sample description row = " + row + " ,column = " + col);
        }

        @Overridepublicint getRowCount() {
            return3;
        }

        @Overridepublicint getColumnCount(int i) {
            return4;
        }
    }
}

3行4列のカードが出るアプリの完成です。実行結果は以下のような感じ。

まだまだ、実用アプリを作るには程遠いけど、ちょっとずつね…。