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.GridViewPager
    xmlns: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;

public class MyActivity extends Activity {

    private TextView mTextView;
    private Button button;

    @Override
    protected void 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);
        }

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

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

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

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

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