かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

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

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列のカードが出るアプリの完成です。実行結果は以下のような感じ。

f:id:okazuki:20140728202304p:plain

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