Androidプログラムの基本から

by K.I

2014/09/19〜

Index

概要
アプリケーション起動時の動作
- Activity
- AndroidManifest.xml
- Hello Android!
- デフォルトのLayout?
- Activityの追加と遷移
- 遷移先からの戻り方
- 引数を渡して遷移
- 遷移先からデータを返す
Layout
- Layoutリソースの追加
- ActivityにLayoutをセット
- LayoutのWarning
- 文字列の定義
- リソースの参照
- ボタンの動作記述
ListView
- セルのレイアウト
- ListViewのレイアウト
- ListViewにデータをセット
- ListViewのクリック動作記述
ListViewのカスタマイズ
- アニメーションのXML
- Adapterのカスタマイズ
- getViewについて
- カスタムAdapterを使ってみる
Holderを使わないListView
- Layoutクラスのカスタマイズ
- CustomLayoutクラスを使う
- Holderを使わないカスタムAdapter
- Holderを使わないListViewを使う
OverScrollListView
- ListViewのカスタマイズ
- OverScroll用のLayout
- カスタムListViewを使う
グラフィックス
- View
- Viewに描画
- View Group
- カスタムのViewクラスの作成
- カスタムViewクラスを使ってみる
アクションバー
- Optionメニュー
- menuリソースで
- Optionメニュー選択時の処理
- Optionメニューの無効化
- onPrepareOptionsMenuが呼ばれない
- サブメニューにアイコンを付ける
- Spinnerのリソース
- Spinnerを使う
Mouseの動きで描画
- ViewにMouseで描画
- プログラムによるレイアウト
- LayoutInflaterを使う
- LayoutInflaterについて
オフスクリーン
- オフスクリーンの生成
- オフスクリーンを使った描画
- オフスクリーンを使ったCanvas
- Viewのメソッド呼び出し
- Viewの保存
まとめ
エラーメッセージ
- Error parsing XML: not well-formed (invalid token)
参考

概要

Androidのプログラミングは、他のプログラム環境と較べて、

ちょっと取っ付きにくい感じがする

開発環境がGUIになってるので、その操作方法にばかり目が行ってしまい、

肝心のプログラムの構成が分かり辛く、なかなかイメージが湧かないためだと思う。

まぁAndroidのプログラムについては、基本からよく分かっていなかったので、

起動時の動作から、ちゃんと考えてみた。

Eclipseの操作とか、そこらへんは出来るだけ省略して、

分かったことを少しづつ書いていこうと思う。

[top]

アプリケーション起動時の動作

Androidのプログラムは、どのように動いているのか、考えてみる。

Cのコンソールプログラムなら、起動すると、main関数が実行される
Windowsのプログラムならば、WinMain関数が最初に実行される

では、Androidでは何が最初に実行されるんだろう？

最初に、EclipseでAndroidアプリケーションのProjectを作っておく
- 但し、Activityは作成しないでおくので、srcフォルダは空の状態から始める

Activity

Androidでは、Activityという単位でプログラムが実行されるらしい

Activityは、１つの画面に対応している様なので、Windowのようにも思えるが、
実行中のメインループを指しているのかもしれない

とりあえず、１つだけのActivityを持つ javaプログラムを用意して、srcフォルダに入れてやる¹

こんな風に、Activityを継承したクラスを作れば良い（src/HelloAndroid.java）

package hm.orz.bluefish.helloandroid;

import android.app.Activity;
import android.os.Bundle;

public class HelloAndroid extends Activity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
        }
}

でも、複数のActivityがあった場合、どれが最初に実行されるんだろう？

そもそも、Activityを用意するだけでは、プログラムは実行されないようだ。

では、最初に実装されるActivityは、どうやって決まるんだろう？

AndroidManifest.xml

使用するActivityは、AndroidManifest.xmlで定義しておかなければならない。

Projectの作成時に、AndroidManifest.xmlファイルは生成されているので、それに必要な記述を追加する²

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="hm.orz.bluefish.helloandroid"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".HelloAndroid"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

特に、最初に実行されるActivityには、intent-filterの記述が必要³になる

これは、アプリケーション実行のIntent（ACTION_MAIN）を受け付ける
さらに、ランチャーで登録可能なアプリケーションであることを示しているらしい

ちなみにintent-filterに、category.DEFAULTを指定しないと、暗黙的IntentにActivityが応答しないらしい。

とりあえずは、無くても動くみたいだけど。

参考： IntentFilterにDEFAULT_CATEGORYが必要な理由 →よく理解していないが、とりあえずメモ

Hello Android!

ここまでで、メインのActivityのjavaファイルを用意して、

AndroidManifest.xmlに、Activityの定義をしたので、Androidでちゃんと起動するプログラムになる。

でも、何もないActivityが表示されるだけのアプリケーションなので、

とりあえず、Toastの記述を追加して、"Hello Android!"と表示されるようにしてみる。

package hm.orz.bluefish.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

public class HelloAndroid extends Activity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                Toast.makeText(this, "Hello Android!", Toast.LENGTH_SHORT).show();
        }
}

たぶん、これが最小限のAndroidアプリケーションじゃないかと思う。

デフォルトのLayout?

Activityの画面レイアウトは、res/layoutフォルダに入れる

Eclipseでプロジェクトを作成する際に、Activityを作っていなかったので、layoutフォルダは空になっている

でも、デフォルトのアプリケーションアイコンは、res/drawableフォルダに入っている

また、アプリケーション名は、res/values/strings.xmlで、定義されている

Androidでは、表示データはres/valueフォルダに入れることになっているらしい

文字列のリソースは、string.xmlに定義するようだ

前項で作成したアプリケーションは、なにもレイアウトの指定をしていないが、

何もないActivityの上の方に、アイコンと、アプリケーション名は表示されている。

これが、デフォルトのLayoutなのかな
- 或いは、デフォルトのActivityってことなのかな？

このデフォルトのレイアウト？の状態を変えることも出来るのかもしれない

Activityの追加と遷移

Activityを追加したら、

まずAndroidManifest.xmlに追加するのを忘れないように！
```
        <activity android:name=".subActivity" </activity>
```

あとは、IntentでActivityを遷移する

        Intent intent=new Intent(this,subActivity.class);
        startActivity(intent);

或いは、後からパッケージ名とクラス名を指定する

        Intent intent = new Intent();
        intent.setClassName(getPackageName(),GDSlayer.class.getCanonicalName());
        startActivity(intent);

遷移先からの戻り方

転移先から戻るには、やはりIntentを使うのかと思ったら、

なんと、これだけで良いらしい。
```
        finish();
```
Activityは、デフォルトでは順にスタックに積まれて行くので、
- 一つ前に戻るだけなら、Activityを終了させるだけで、Backボタンを押した時も同じ動作になる

intent.setFlagsで、ここら辺は、いろいろ設定できるみたいだが、

まぁ面倒なので、今は考えない。

引数を渡して遷移

Activityの遷移で、引数を渡す

Bundleで、データを束ねて送るらしい

final Intent intent = new Intent(this,subActivity.class);
intent.putExtra("str","ABC");
intent.putExtra("num",123);
startActivity(intent);

遷移先のActivityで、以下の様に引数を受け取ることが出来る

public class subActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
                String str = getIntent().getStringExtra("str");
                int num = getIntent().getIntExtra("num", -1);
        }
}

キーが無い時は、getStringExtraはnull、getIntExtraは第2引数の値を返す

遷移先からデータを返す

起動先アクティビティから結果を送り返してもらう方法

startActivityではなく、startActivityForResultで起動、

起動先で、setResultでIntentを返して、
onActivityResultで受け取るということらしい

。。なんか、ちょっと面倒だ。

でも、値を戻す方法は別として、受け取りはイベントでやるのは良いかもしれない。

¹この例では、hm.orz.bluefish.helloandroidというパッケージを作って、その中に入れてやる必要がある。
²packageの記述は、パッケージを作ると自動的に追加されるようだ。
³Activityの名前は、大文字小文字含めて正しく指定しないと実行時に落ちる。

[top]

Layout

Activityの上に、いろいろ表示するために、Layoutリソースを使う

Layoutリソースの追加

Layoutのリソースを用意して、表示してみる

src/layoutフォルダに、main.xmlファイルを追加
試しに、簡単なレイアウトを作る

main.xmlをダブルクリックして、グラフィカル・レイアウトでPaletteから、

レイアウト→LinerLayout(Vertical)を配置
フォーム・ウィジェット→LargeTextを配置
テキスト・フィールド→プレーン・テキストを配置
フォーム・ウィジェット→ボタンを配置

最初の行の、xmlの記述はテキストで追加した

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >
                                                ////green
        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

下にあるタブで、main.xmlのテキストファイルを見てみると、

最初の行に、エラーマークが付いている
```
エラー: Error parsing XML: no element found
```

ファイル→全て保存とすると、エラーが消えた。何故？⁴

エラーじゃないけど、Infoのアイコンがいくつか表示されている

エラーじゃないので、とりあえず無視する

ActivityにLayoutをセット

Layoutリソースを定義して、gen/hm.orz.bluefish.helloandroid/R.javaを見ると、

main.xmlに定義した内容が、Rクラスにも定義されているのが分かる
R.javaは、自動生成されるので、これを直接編集する必要はない

Activityに、Layoutをセットするには、

setContentViewで、Rクラスのlayout.mainを指定すれば良い

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                Toast.makeText(this, "Hello Android!", Toast.LENGTH_SHORT).show();

                setContentView(R.layout.main);
        }

実行してみると、layout/main.xmlで定義したレイアウトが表示される

でも、この状態ではLayoutを表示しているだけで、機能を記述していないので、ボタンを押しても何も反応しない。

LayoutのWarning

Layout定義で表示されていた、infoというよりWarningかな。

いちおう確認しておく

これは、Textはリソースを使いなさいということか

[I18N] Hardcoded string "****", should use @string resource

Androidでは、res/valuesで定義するのが流儀ということなんだろう。

これは、inputTypeとhintが指定されていないと言っているのか？

labelFor云々は、わからん。。

この行で見つかった複数の注釈:
        - No label views point to this text field with an
         android:labelFor="@+id/@+id/editText1" attribute
        - This text field does not specify an inputType or a hint

main.xmlの、EditTextに以下を追加しておく

android:hint="EditTextに表示される文字列"
android:inputTyte="text" //文字列入力の場合、textを指定

文字列の定義

Androidでは、文字列は基本的にstringリソースで定義するのが作法らしい

Warningが出た箇所の文字列を定義してみよう

res/values/string.xmlに以下を追加

stringリソースの名前と文字列を定義

<resources>

    <string name="app_name">HelloAndroid!!</string>
    <string name="textview_text">名前</string>
    <string name="edittext_hint">名前を入れてください</string>
    <string name="button_text">入力</string>
    
</resources>

res/layout/main.xmlで、以下の変更または追加

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/textview_text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/edittext_hint"
        android:inputType="text" >
        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/button_text" />

</LinearLayout>

TextViewのラベル文字列の設定
EcitTextのhint文字列と、inputTypeの設定
Buttonの文字列の設定

で、こうなる。

リソースの参照

定義したリソースは、Rクラスでは以下の様に参照する

R.リソース種別.リソース名
```
Ex.     R.string.textview_text
```

別のリソースファイルからは、以下の様に参照する

@リソース種別/リソース名
```
Ex.     @string/textview_text
```

XMLファイルのlayout定義で、以下のような記述がある

android:id="@+id/textView1"

これは、新規のIDを生成して、Rクラスに追加するという意味らしい

＋の無い以下のような記述は、IDの参照になる

@id/textView1

ボタンの動作記述

Layoutだけ定義しても、何も動かない。

GUIの操作に対して、どのように動作するかを記述しなければならない。

Androidではイベントに対する処理を、イベントリスナーと呼ばれる割り込み処理のようなもので登録する

setOnClickListenerで、ボタンクリック時の処理を定義する

package hm.orz.bluefish.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;
import android.text.Editable;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.EditText;

public class HelloAndroid extends Activity {
        private EditText edit;
        
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                Toast.makeText(this, "Hello Android!", Toast.LENGTH_SHORT).show();

                setContentView(R.layout.main);
                
                edit = (EditText)this.findViewById(R.id.editText1);
                findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
                        public void onClick(View v) {
                                Editable name = edit.getText();
                                Toast.makeText(HelloAndroid.this, "こんにちは！ "+ name +"さん", Toast.LENGTH_LONG).show();
                        }
                });
        }
}

ボタンが押された時、Toastで挨拶を表示するようにした

→ボタンを押すと、しばらくの間、挨拶が表示される

⁴Eclipseは、よく分からないことが多い。。

[top]

ListView

最初に何をやるか考えたけど、Androidのインターフェースとして、よく使われる

リスト表示して選択させる ListViewをやってみようと思う

セルのレイアウト

まず、セルというか、１行分のレイアウトをXMLで定義する。

この基本となるレイアウトには、TextViewの定義を必ず入れる（res/layout/list.xml）

この例では、ImegeViewでアイコンのイメージも入れるようにしてみた

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/list_textView1"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center_vertical|center_horizontal"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

TextView以外の部品があるときは、TextViewのIDを指定する必要があるので、
- IDはユニークな名前にしておくこと

ListViewのレイアウト

とりあえずActivityには、ListViewだけを配置したものを用意した（res/layout/main.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

ListViewはGraphicalLayoutで作ったまま使ってはいけないによると、wrap_contentではなく、match_parentにすべきかも⁵。

ListViewにデータをセット

ArrayAdapterに、ActivityのContext、１行分のリソースとTextViewのID、配列データを渡して

それを、ListViewにセットする

package hm.orz.bluefish.hellolistview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class HelloListView extends Activity {
    private ListView list;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        String[] ldata = {"AAA","BBB","CCC","DDD","EEE","FFF"};

        list = (ListView)this.findViewById(R.id.listView1);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list, R.id.list_textView1, ldata);
        list.setAdapter(adapter);
    }
}

これで、ListViewにデータが表示される

ListViewのクリック動作記述

ListViewのアイテムをクリックした時のイベントリスナ

OnItemClickListenerを実装する

package hm.orz.bluefish.hellolistview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class HelloListView extends Activity {
    private ListView list;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        String[] ldata = {"AAA","BBB","CCC","DDD","EEE","FFF"};

        list = (ListView)this.findViewById(R.id.listView1);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list, R.id.list_textView1, ldata);
        list.setAdapter(adapter);

        list.setSelection(1);
        list.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?>adapter, View view, int pos, long id) {
                Toast.makeText(HelloListView.this, list.getAdapter().getItem(pos) +" が選択されました", Toast.LENGTH_LONG).show();
            }
        });
    }
}

ListViewをクリックすると、選択内容をToastで表示する

⁵wrap_contentだと、一度仮想的に描画してサイズを確認したあと、改めて描画するというような操作をしているらしい。

[top]

ListViewのカスタマイズ

ListViewのいろんな設定は、基本的にXMLでやるみたいなんだけど、

選択状態の表示とか、いろいろやろうとすると、カスタマイズする方が簡単に思えてきた。

超簡単！ListViewをオシャレにカスタマイズ！横からスライドしてくるリストアイテムを作るという記事をそのままやってみる。

この記事はとても分かり易いので、おすすめ！とりあえず、要点だけメモしておく。

アニメーションのXML

セルのレイアウト、 ListViewのレイアウトは、前述の普通のListViewと同様に作成すれば良い。

あとは、スライドのアニメーションを定義するXMLを作成⁶しておく（src/anim/list_motion.xml）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="700" >

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1.0" />

    <translate
        android:fromXDelta="-100%"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="0" />

</set>

これだけで、700msかけて以下のように変化することを定義できるらしい
- Alpha値（透明度）を、0（透明）→1（不透明）
- Viewの位置を、-100％（左側に隠した状態）→0（元の位置）に移動

ようするに、左側からメニューがスルスルと出てくるように表示することができる

Adapterのカスタマイズ

Adapterというのは、ListViewにデータを割り当てるためのプログラムらしい（src/CustomAdapter.java）

これをカスタマイズする

package hm.orz.bluefish.sidesliderlistview;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class CustomAdapter extends ArrayAdapter<String>{

    static class ViewHolder {
        TextView labelText;
    }

    private LayoutInflater inflater;

    // コンストラクタ
    public CustomAdapter(Context context,int textViewResourceId, ArrayList<String> labelList) {
        super(context,textViewResourceId, labelList);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;
        View view = convertView;

        // Viewを再利用している場合は新たにViewを作らない
        if (view == null) {
            inflater =  (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.list, null);
            TextView label = (TextView)view.findViewById(R.id.list_textView1);
            holder = new ViewHolder();
            holder.labelText = label;
            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }

        // 特定の行のデータを取得
        String str = getItem(position);

        if (!TextUtils.isEmpty(str)) {
            // テキストビューにラベルをセット
            holder.labelText.setText(str);
        }

        // 行毎に背景色を変える
        if(position%2==0){
            holder.labelText.setBackgroundColor(Color.parseColor("#aa0000"));
        }else{
            holder.labelText.setBackgroundColor(Color.parseColor("#880000"));
        }

        // XMLで定義したアニメーションを読み込む
        Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.list_motion);
        // リストアイテムのアニメーションを開始
        view.startAnimation(anim);

        return view;
    }
}

getViewについて

Adapterで、肝心となる処理がgetViewで、

データを「取ってきて描く」という感じのルーチンだと思う

特に、気をつけなければならないのが、引数のconvertView

これがnullの時だけViewを生成すること
nullじゃ無いときは、既に生成されたViewがあるので、データの入れ替えだけ行うということらしい。

inflaterっていうのは、「膨らませる」というような意味みたいだが、

まぁ、XMLから実際のViewを作るというようなものらしい

holderっていうのは、生成したViewのデータを保持するキャッシュのようなもの？なのかな

ここらへんは、決まり文句みたいなものらしいけど、ちょっと面倒⁷だなぁ。

あとは、「行毎に背景色を変える」で、奇数行、偶数行で背景色を変えている

これは、リストViewの表示方法をカスタマイズする参考になるだろう。

さらに、「XMLで定義したアニメーションを読み込む」で、XMLで定義したアニメーションを実行している

これだけでスライドの動きを出せるのは、簡単でいいなぁ

カスタムAdapterを使ってみる

あとは、標準のAdapterの代わりに、カスタムAdapterを使うようにするだけ（src/SideSliderListView.java）

package hm.orz.bluefish.sidesliderlistview;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class SideSliderListView extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // ListViewのインスタンスを取得
        ListView list = (ListView)findViewById(R.id.listView1);
 
        // リストアイテムのラベルを格納するArrayListをインスタンス化
        final ArrayList<String> labelList = new ArrayList<String>();
 
        // "List Item + ??"を20個リストに追加
        for(int i=1; i<=20; i++){
            labelList.add("List Item "+i);
        }

        CustomAdapter mAdapter = new CustomAdapter(this, R.layout.list, labelList);
        list.setAdapter(mAdapter);

        list.setSelection(1);
        list.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?>adapter, View view, int pos, long id) {
                Toast.makeText(SideSliderListView.this, labelList.get(pos) +" が選択されました", Toast.LENGTH_LONG).show();
            }
        });
    }
}

このカスタムViewは、とても動きがとても面白いので、本当におススメです。 →元記事
- まぁ、説明がわかりやすいというのが、一番良いところなんだけれども。

⁶ListViewのカスタマイズということだけなら、このファイルは特に要らないけど。
⁷なんかシステムでやっても良い様なことまで、やらされてるんじゃないかなって気がする。

[top]

Holderを使わないListView

ViewHolderを使わないでListViewを高速化するという記事を参考に、やってみた

前項のsidesliderlistviewを、Holderを使わない様に書き換えてみる

Layoutクラスのカスタマイズ

LinearLayoutを継承して、CustomLayoutクラスを作る（src/CustomLayout.java）

Itemとして、icon（ImageView）と、title（TextView）を持つようにする

package hm.orz.bluefish.sidesliderlistview;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomLayout extends LinearLayout {
        TextView mTitleView;
        ImageView mIconView;

        public CustomLayout(Context context, AttributeSet attrs) {
                super(context, attrs);
        }

        @Override
        protected void onFinishInflate() {
                super.onFinishInflate();

                mTitleView = (TextView) findViewById(R.id.list_textView1);
                mIconView = (ImageView) findViewById(R.id.imageView1);
        }

        public void bindView(Item item) {
                mTitleView.setText(item.title);
                mIconView.setImageResource(item.icon);
        }

}

onFinishInflateで、findViewByIdするのが肝心のようだ
- Handlerは、findViewByIdの呼び出し回数を減らす（生成済みなら使いまわす）ためなので、同様の効果があるらしい

Itemクラスの定義（src/Item.java）

package hm.orz.bluefish.sidesliderlistview;

public class Item {
        public String title;
        public int icon;
}

CustomLayoutクラスを使う

CustomLayoutクラスを使って、XMLでレイアウトを定義する（res/layout/list.xml）

って言っても、LinearLayoutを作成した作成したクラス名に入れ替えただけ

<?xml version="1.0" encoding="utf-8"?>
<hm.orz.bluefish.sidesliderlistview.CustomLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/list_textView1"
         android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center_vertical|center_horizontal"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</hm.orz.bluefish.sidesliderlistview.CustomLayout>

Holderを使わないカスタムAdapter

Holderを使わないと、Adapterの処理はかなりすっきりする（src/CustomAdapter.java）

package hm.orz.bluefish.sidesliderlistview;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;

public class CustomAdapter extends ArrayAdapter<Item>{
    private LayoutInflater inflater;
    private int mItemLayoutResource;

    // コンストラクタ
    public CustomAdapter(Context context,int resource, ArrayList<Item> object) {
        super(context,resource, object);
        inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mItemLayoutResource = resource;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final CustomLayout view;

        // Viewを再利用している場合は新たにViewを作らない
        if (convertView == null) {
            view = (CustomLayout)inflater.inflate(mItemLayoutResource, null);
        } else {
            view = (CustomLayout)convertView;
        }

        view.bindView(getItem(position));

        // 行毎に背景色を変える
        if(position%2==0){
                view.mTitleView.setBackgroundColor(Color.parseColor("#aa0000"));
        }else{
            view.mTitleView.setBackgroundColor(Color.parseColor("#880000"));
        }

        // XMLで定義したアニメーションを読み込む
        Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.list_motion);
        // リストアイテムのアニメーションを開始
        view.startAnimation(anim);

        return view;
    }
}

Holderを使わないListViewを使う

メインは基本的に変わらないが、ArrayListをItem単位に変更（src/SideSliderListView.java）

package hm.orz.bluefish.sidesliderlistview;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class SideSliderListView extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // ListViewのインスタンスを取得
        ListView list = (ListView)findViewById(R.id.listView1);

        // リストアイテムを格納するArrayListをインスタンス化
        final ArrayList<Item> labelList = new ArrayList<Item>();

        // Itemを20個リストに追加
        for(int i=1; i<=20; i++){
            Item item = new Item();
            item.title = "List Item "+i;
            item.icon = R.drawable.ic_launcher;
            labelList.add(item);
        }

        CustomAdapter mAdapter = new CustomAdapter(this, R.layout.list, labelList);
        list.setAdapter(mAdapter);

        list.setSelection(1);
        list.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?>adapter, View view, int pos, long id) {
                Toast.makeText(SideSliderListView.this, labelList.get(pos) +" が選択されました", Toast.LENGTH_LONG).show();
            }
        });
    }
}

Layoutのカスタマイズは、ちょっと面倒だけど、

Holderの動作が、いまいち分かり辛かったので、むしろこの方が分かり易いかもしれない。

[top]

OverScrollListView

ListViewをスクロールして、範囲外になった時、

ミョーンと伸びてまた戻るという動作を、OverScrollというらしい

これの実装の仕方が紹介されていたので、カスタムListViewを作ってみた。

ListViewのカスタマイズ例として、ほとんどそのままやってみました。

ListViewのカスタマイズ

OverScroll用に、ListViewをカスタマイズする（src/CustomListView.java）

といっても、元々その機能は持っているので、overScrollByメソッドの、maxOverScrollYを設定するだけで良い。

package hm.orz.bluefish.overscrolllistview;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ListView;

public class CustomListView extends ListView {

        private int maxOverScrollY = 0;

        public CustomListView(Context context) {
                super(context);
        }

        public CustomListView(Context context, AttributeSet attrs) {
                super(context, attrs);
                this.maxOverScrollY = attrs.getAttributeIntValue(null, "maxOverScrollY", 0);    }

        public CustomListView(Context context, AttributeSet attrs, int defStyle) {
                super(context, attrs, defStyle);
                this.maxOverScrollY = attrs.getAttributeIntValue(null, "maxOverScrollY", 0);    }


        @Override
        protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY,
                        int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
                return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
                                scrollRangeX, scrollRangeY, maxOverScrollX, this.maxOverScrollY, isTouchEvent);
        }
}

コンストラクタで使っている、attrs.getAttributeIntValueで、XMLの設定を読むことが出来るようだ。
- カスタマイズしたViewのパラメータ設定に、いろいろ使えそうな機能だ

OverScroll用のLayout

そして、カスタマイズしたListViewを使って、OverScroll設定するLayoutファイルを作成する（res/layout/main.xml）

以下のように、作成したCustomListViewを、パッケージ名も含めて記述する

<?xml version="1.0" encoding="utf-8"?>
<hm.orz.bluefish.overscrolllistview.CustomListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

    android:overScrollMode="always"
    android:overScrollHeader="@drawable/ic_launcher"
    android:overScrollFooter="@drawable/ic_launcher"
    maxOverScrollY="500"
/>

overScrollHeader、Footerは、ListViewの上部、下部の空きに表示される色（Ex.#000000）、或いはImageを指定できる
で、maxOverScrollYを、0より大きく設定すれば、OverScroll機能が働く

１行分のリストは、前に使ったものの使いまわし（res/layout/list.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/list_textView1"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center_vertical|center_horizontal"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

カスタムListViewを使う

あとは普通に、ListViewを呼び出すだけ（OverScrollListView.java）

特に通常のListViewの呼び出しと変わりなし

package hm.orz.bluefish.overscrolllistview;

import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;

public class OverScrollListView extends ListActivity {

    String[] ldata = {"AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list, R.id.list_textView1, ldata);
        setListAdapter(adapter);
    }
}

OverScrollは、たいしたことは無い機能だが、iPhoneでは標準的な動作であり、
- ListViewが全く動かないより、レスポンスがあった方が、やっぱりしっくりくる。

[top]

グラフィックス

Androidで、グラフィックスを表示する

View

Androidは、Viewと呼ばれる部品を配置して、画面を構成している

TextViewや、ボタンは、それぞれViewになっている。
AppleのiOSでは、Viewを階層的に作れたと思うけど、AndroidのViewは直接階層を持てないようだ。

その代わりに、View GroupでViewを配置する

View GroupもViewだが、これは階層を持てるので、複雑な構造を定義できる

ActivityにLayoutをセットするときに、setContentViewで、リソースファイルのIDを指定したが、

setContentViewは、Viewクラスを継承したクラスを指定することも出来る
```
        DrawView view = new DrawView(this);
        setContentView(view);
```

ちなみにViewの引数は Contextで、

Contextというのは、アプリケーション環境の情報へアクセスするためのインターフェースらしい

余談になるが、thisはこの場合はActivityのことだが、ActivityはContextクラスを継承したものなので、ActivityのContextを指す

ApplicationのContextは、getApplicationContextで取得できるが、この場合はそれも使える

ActivityのContextを使うか、ApplicationのContextを使うべきかは、場合によって違うらしい

動いていたとしても、メモリリークの原因になることもあるらしい

自分は、まだよく分かっていないので、現状は動けば良いという事で保留としておく。

以降、Application Contextを使った例が多いが、間違っているかもしれない。

Viewに描画

Viewクラスを継承した、DrawViewというクラスを作成する（src/HelloGraphics.java）

onDrawイベントで、描画を行う

package hm.orz.bluefish.hellographics;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Bundle;
import android.view.View;

public class HelloGraphics extends Activity {

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                DrawView view = new DrawView(getApplication());
                setContentView(view);
        }

        class DrawView extends View {

                public DrawView(Context context) {
                        super(context);
                }

                public void onDraw(Canvas c) {
                        c.drawColor(Color.BLACK);
        
                        Paint fill_paint = new Paint();
                        fill_paint.setStyle(Paint.Style.FILL);
                        fill_paint.setColor(Color.BLUE);
                        c.drawRect(500f, 500f, 1000f, 1000f, fill_paint);
        
                        fill_paint.setColor(Color.RED);
                        c.drawOval(new RectF(0f, 0f, 500f, 500f), fill_paint);
                }
        }
}

これで、とりあえず Activityに図形を描画することが出来た

View Group

でも実際、アプリケーションを作るとしたら、Viewが１つだけというのは、ちょっと困る

View Groupを使って、Viewを並べることになると思う。

しかし例えば、TextViewと、DrawViewと、Buttonを並べて、

DrawViewに描画するのは、どうすれば良いんだろう？

ActivityにViewGroupを、プログラムで配置する例はいろいろ見つけられたんだけど、

その配置したViewに、描画する例を見つけることが出来なかった。

それに部品の配置は、xmlファイルでやった方が楽なので、

プログラムで配置することは、そもそもあまり考えていない。

例えば、Windowsのプログラムであれば、

Dialogリソースに、Textコントロール、Pictureコントロール、Buttonを配置して、
Windowに、Dialogリソースを貼り付けて、Dialogリソース用のWindowProcedureを定義するという感じになると思う

Androidでも、同じようにやりたいんだけどなぁ。

カスタムのViewクラスの作成

Viewクラスを継承して作成した描画用のViewを、XMLで配置することが出来れば良いんじゃないか？

ということで検索してみると、こちらの記事を見つけた

それを基に、カスタムのViewクラスを作成してみる（src/CustomView.java）

package hm.orz.bluefish.hellographics;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class CustomView extends View {
        public CustomView(Context cont) {
                super(cont);
        }

        public CustomView(Context cont, AttributeSet attr) {
                super(cont,attr);
        }

        @Override
        protected void onDraw(Canvas c){
                c.drawColor(Color.BLACK);

                Paint fill_paint = new Paint();
                fill_paint.setStyle(Paint.Style.FILL);
                fill_paint.setColor(Color.BLUE);
                c.drawRect(500f, 500f, 1000f, 1000f, fill_paint);

                fill_paint.setColor(Color.RED);
                c.drawOval(new RectF(0f, 0f, 500f, 500f), fill_paint);
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
                int widthSize = MeasureSpec.getSize(widthMeasureSpec);
                int heightSize = MeasureSpec.getSize(heightMeasureSpec);
                setMeasuredDimension(widthSize,heightSize);
        }
}

XMLファイルで、Layout可能にするためには、

XML用のコンストラクタと、大きさを返すonMeasureメソッドを追加する必要があるらしい

カスタムViewクラスを使ってみる

XMLファイルは普通にGUIで、TextViewとButtonをLinerLayoutで配置した後、

以下のように、作成したCustomViewを、Package名も含めて記述する（res/layout/main.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.04"
        android:gravity="center_vertical|center_horizontal"
        android:text="Title"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <hm.orz.bluefish.hellographics.CustomView
        android:id="@+id/customView1"
        android:layout_width="wrap_content"
        android:layout_height="290dp"
        android:layout_weight="0.20" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="41dp"
        android:text="Button" />

</LinearLayout>

main.xmlをグラフィカル・レイアウトで見ると、ちゃんと中身が表示されているし、
- 標準の部品と同じように、大きさを変更することも出来る⁸。。

Activityは、Layoutリソースを参照するだけで良い。（src/HelloGraphics.java）

package hm.orz.bluefish.hellographics;

import android.app.Activity;
import android.os.Bundle;

public class HelloGraphics extends Activity {

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
        }
}

これでやりたいことが、少し出来るようになってきたかな。

⁸これって、けっこう凄いことだよね。

[top]

アクションバー

アクションバーは、画面の一番上のタイトルバーに、いろいろなウィジェットを仕込むことが出来る

デフォルトでは、アプリケーションのアイコンとアプリケーション名が入っている

参考

Optionメニュー

ActionBarにメニューを付ける

onCreateOptionsMenuをオーバーライドすれば良い

        @Override
        public boolean onCreateOptionsMenu( Menu menu ) {
                super.onCreateOptionsMenu( menu );

                menu.add( 0, MENUID_FILE, 0, "Select Open File..." );
                menu.add( 0, MENUID_ABOUT, 0, "About Application..." );
                return true;
        }

選択時の処理のために、IDを付けておく

menuリソースで

リソースで追加する場合は、メニューリソースファイル

例えば、src/menu/xxx_menu.xmlを用意する

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

 <item
 android:id="@+id/file_open"
 android:icon="@drawable/file_open"
 android:showAsAction="ifRoom"
 android:title="@string/file_open"/>

 <item
 android:id="@+id/about"
 android:icon="@drawable/about"
 android:showAsAction="ifRoom"
 android:title="@string/about"/>

</menu>

icon指定で、Bar上に表示する場合のアイコンを指定できる。

showAsActionで、表示方法を制御する

値	表示方法
ifRoom	Barに表示できない場合は、Overflowメニューに表示
withText	Textを表示
never	常にOverflawメニューに表示する
always	常にBar上に表示
collapseActionView	android:actionViewLayoutで指定したActionViewと関連付ける

Inflateで、リソースからメニューを生成する

        @Override
        public boolean onCreateOptionsMenu( Menu menu ) {
                super.onCreateOptionsMenu( menu );

                MenuInflater inflater = getMenuInflater();
                 inflater.inflate(R.menu.xxx_menu, menu);
                 return true;
        }

Optionメニュー選択時の処理

Optionメニュー選択時の処理は、

add時に付加したID、或いはmenuリソースで指定したIDで処理を振り分ける

        @Override
        public boolean onOptionsItemSelected( MenuItem item ) {
                switch( item.getItemId() ) {
                case MENUID_FILE:
                case R.id.file_open:
                        // 処理
                        return true;

                case MENUID_ABOUT:
                case R.id.about:
                        // 処理
                        return true;
                }
                return false;
        }

addでMENUIDを指定した場合と、menuリソースのID指定の両方のラベルが付いているが、実際は必要な方だけあれば良い。

Optionメニューの無効化

メニューの表示前に実行されるonPrepareOptionsMenuをオーバーライドして、

メニュー項目を、Disable状態にすれば、動的にメニューの状態をコントロールできる。

        @Override
        public boolean onPrepareOptionsMenu(Menu menu)  {
                super.onPrepareOptionsMenu(menu);
                
                MenuItem menu_about = (MenuItem)menu.findItem(R.id.about);
                
                menu_about.setEnabled(flag);    // flagで、Enable/Disable状態を制御
                return true;
        }

例えば、ファイルを開くまでは出来ない操作等は、Disableにしておくとか。

onPrepareOptionsMenuが呼ばれない

なんか最初だけ呼ばれるんだけど、それ以降は呼ばれないみたいだ。

ググって見ると、ActivityでinvalidateOptionsMenuを呼ぶと、onPrepareOptionsMenuが呼ばれてメニューが更新されるらしい。

参考： stackOverflow

設定変更する度に、いちいちinvalidateしなきゃいけないのは、なんか面倒だ。

設定とか別クラスでやってたりするので、その度にActivityで更新しなおすのは嫌だし

名前からして動的に設定するためのonPrepareだと思うんだけど、どうしてこんな仕様に⁹したんだろう？

結局、毎回メニュー表示前に纏めてやるしかないかなぁ。メニュー選択時にやればいいのかな。。

    @Override
    public boolean onMenuItemSelected(int featureId, MenuItem item) {
        this.invalidateOptionsMenu();
        return super.onMenuItemSelected(featureId, item);
    }

うーん、これだと最初だけ更新されないなぁ。onPrepareはちゃんと呼ばれてるんだけど。間に合わないのかな。

続けてやると、ちゃんと次からは反映されるようになるから単純に間に合ってないわけじゃなさそうなんだけど。。
結局は、仕方ないので、メニューを変更しているクラスで、いちいちinvalidateするようにした。

もっと良い方法がありそうなんだけど。これじゃ馬鹿みたいじゃないか。。

普通に常にPrepareしてくれよ¹⁰。。。

サブメニューにアイコンを付ける

オーバーフローメニューにアイコンを付ける方法を調べたけど、分からなかった。

サブメニューにアイコンを付けることは出来るので、サブメニューをオーバーフローのアイコンにすると見た目はそれらしくなる。

メニューリソースの例

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

 <item
 android:id="@+id/item1"
 android:icon="@drawable/item1"
 android:showAsAction="always"
 android:title="@string/item1"/>

 <item
 android:id="@+id/item2"
 android:icon="@drawable/item2"
 android:showAsAction="always"
 android:title="@string/item2"/>

 <item
 android:id="@+id/item3"
 android:icon="@drawable/item3"
 android:showAsAction="always"
 android:title="@string/item3"/>

 <item
 android:id="@+id/overflow"
 android:icon="@drawable/overflow"
 android:showAsAction="always"
 android:title="@string/overflow">
         <menu>
                 <item
                 android:id="@+id/sub1"
                 android:icon="@drawable/sub1"
                 android:showAsAction="never"
                 android:title="@string/sub1"/>

                 <item
                 android:id="@+id/sub2"
                 android:icon="@drawable/sub2"
                 android:showAsAction="never"
                 android:title="@string/sub2"/>

                 <item
                 android:id="@+id/sub3"
                 android:icon="@drawable/sub3"
                 android:showAsAction="never"
                 android:title="@string/sub3"/>
        </menu>
 </item>

</menu>

Spinnerのリソース

Spinnerは、メニューというか、ComboBoxのようなインターフェース

まずSpinnerに表示するデータを用意する（res/values/strings.xml）

<resources>
        <string name="app_name">CanvasTest</string>
        <string-array name="color_list">
            <item>Black</item>
            <item>Red</item>
            <item>Green</item>
            <item>Blue</item>
            <item>Cyan</item>
            <item>Magenta</item>
            <item>Yellow</item>
        </string-array>
</resources>

アクションバー上の表示用リソース（res/layout/spinner.xml）

普通のTextViewを置いただけだが、textColorを#FFFFFF（白色）にしておく

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#ffffff" />

ドロップダウン時の表示用リソース（res/layout/spinner_down,xml）

TextViewのtextColorを白色にして、さらにpadding（Textの周りの余裕）の設定を追加

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="40dp"
    android:paddingLeft="10dp"
    android:paddingRight="40dp"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#ffffff" />

Spinnerを使う

Spinner用のリソースを用意したら、ActionBarにSpinnerを設定する

public class CanvasTest extends Activity
        implements OnNavigationListener {

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);

                setContentView(R.layout.main);

                getActionBar().setDisplayShowTitleEnabled(false);
                getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
                ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.color_list, R.layout.spinner);
                adapter.setDropDownViewResource( R.layout.spinner_down);
                getActionBar().setListNavigationCallbacks(adapter, this);
                getActionBar().setSelectedNavigationItem(pos)   //初期位置
        }

        @Override
        public boolean onNavigationItemSelected(int pos, long id) {
                Toast.makeText(this, "pos = " + pos, Toast.LENGTH_SHORT).show();
                return true;
        }
}

まず、ActionBarのタイトル表示をしない様にして、モードを設定
Spinnerのデータと表示方法をリソースで設定
さらに、DropDown時の表示方法もリソースで設定
あとは、リスト選択時のコールバックを設定？して、
onNavigationItemSelectedメソッドで、選択時の動作を記述する
初期位置は無指定の場合、0（一番上）になる

⁹もしかすると、Theme使ってる所為かもしれないけど。
¹⁰MacとかWindowsでは、Menuは動的に変化することが前提なので、メニュー準備のイベントは必ず呼ばれるけど、Androidは何でこうなってるんだろう。。

[top]

Mouseの動きで描画

Mouseの動きで描画するにはどうすれば良いんだろう

CanvasとPathによる手書きViewの簡単な実装がとても分かりやすかったので、これに沿ってやってみる。

ViewにMouseで描画

Mouseで描画可能なカスタムViewを作成する（src/CustomVew.java）

Mouseの動きで、線（Path）を描画する

package hm.orz.bluefish.canvastest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff.Mode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {
        private Paint  paint;
        private Path  path;

        public CustomView(Context cont) {
                super(cont);
                initView();
        }

        public CustomView(Context cont, AttributeSet attr) {
                super(cont,attr);
                initView();
        }

        private void initView() {
                path = new Path();

                paint = new Paint();
                paint.setColor(0xFF008800);
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeJoin(Paint.Join.ROUND);
                paint.setStrokeCap(Paint.Cap.ROUND);
                paint.setStrokeWidth(10);
        }

        @Override
        protected void onDraw(Canvas c){
                c.drawPath(path, paint);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {

                float x = event.getX();
                float y = event.getY();

                switch(event.getAction()){
                case MotionEvent.ACTION_DOWN:
                        path.moveTo(x, y);
                        invalidate();
                        break;
                case MotionEvent.ACTION_MOVE:
                        path.lineTo(x, y);
                        invalidate();
                        break;
                case MotionEvent.ACTION_UP:
                        path.lineTo(x, y);
                        invalidate();
                        break;
                }
                return true;
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
                int widthSize = MeasureSpec.getSize(widthMeasureSpec);
                int heightSize = MeasureSpec.getSize(heightMeasureSpec);
                setMeasuredDimension(widthSize,heightSize);
        }
}

コンストラクタで、Pathを生成して、色と線幅を設定する
- Mouseをクリックしたところに、線の開始ポイントを移動して、
- Mouseの動きに合わせて、線を描画する

プログラムによるレイアウト

作成したCustomViewを、Activityに直接置くだけなら、以下のようにすれば良い

public class CanvasTest extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new CustomView(this));
  }
}

せっかくなので、レイアウトして置きたいんだけど、どうすれば良いんだろうか？

普通は、XMLファイルを指定すれば良いんだけど。。
```
setContentView(R.layout.main);
```
でもこの場合に、CustomViewのViewを求める方法が分からない
- 後々、ちょっかいを掛けたいので、個別のViewを求めたいんだけどなぁ。

プログラムでレイアウトすれば、それぞれの部品のViewを求めることが出来るんだけど。。

        LinearLayout layout = new LinearLayout(this);
        setContentView(layout);

        final TextView   tv = new TextView(this);
        final CustomView cv = new CustomView(this);
        final Button     bt = new Button(this);

        tv.setHeight(150);
        tv.setText("Title");
        tv.setTextSize(50);
        tv.setGravity(1);
        bt.setHeight(200);
        bt.setText("Button");
        bt.setTextSize(50);
        layout.addView(tv);
        layout.addView(btn);
        layout.addView(cv);

この方法では、レイアウトの設定がかなり面倒だ。。というか、やってられない。。。

あとから考えてみると、単に以下のように記述すれば出来そうな気がするんだけど、（141005追記）

public class CanvasTest extends Activity {
  CustomView cv;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    cv = (CustomView)findViewById(R.id.customView1);
  }
}

Inflaterを使う必要は無いんじゃないか？なんで出来ないと思ったんだろう。。

LayoutInflaterを使う

いろいろ調べると、LayoutInflaterを使うとViewの設定を個別に出来る様だ（src/CanvasTest.java）

これで、TextView,CustomView,ButtonのViewを、それぞれ tv,cv,btとして取得できる

package hm.orz.bluefish.canvastest;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class CanvasTest extends Activity {

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);

                LayoutInflater inflater = getLayoutInflater();
                View layout = inflater.inflate(R.layout.main, null);
                setContentView(layout);

                TextView tv = (TextView)layout.findViewById(R.id.textView1);
                CustomView cv = (CustomView)layout.findViewById(R.id.customView1);
                Button bt = (Button)layout.findViewById(R.id.button1);
                
                bt.setOnClickListener(new OnClickListener() {
                        public void onClick(View v) {
                        Toast.makeText(CanvasTest.this, "Click!", Toast.LENGTH_LONG).show();
                }
            });
        }
}

Inflaterの仕組みが、いまいち分かってないんだけど。。

Layoutは、XMLファイルで指定すれば良い（res/layout/main.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center_vertical|center_horizontal"
        android:text="Title"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="50sp"
        android:layout_weight="1"/>

    <hm.orz.bluefish.canvastest.CustomView
        android:id="@+id/customView1"
        android:layout_width="wrap_content"
        android:layout_height="500dp"
        android:layout_weight="10"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Claer"
        android:textSize="50sp"
        android:layout_weight="1"/>

</LinearLayout>

LayoutInflaterについて

LayoutInflaterは、基本的にはXMLのレイアウトを動的にセットするためのものらしい。

普通はsetContentViewしていないと、findViewByIdは使えないっぽい。

でもLayoutInflaterを使えば、セットしていなくてもfindViewByIdが使えるみたいだ。（ここら辺は、ちょっと未確認だけど）

今のところ、動的にセットするために使っていないので、ViewGroupをnullにして使ってるけど、

まぁこれは本来の使い方では無いのかもしれない。

LayoutInflater関連参考

LayoutInflaterの挙動のメモ
- 親をちゃんと指定しないとダメな時もあるらしい
LayoutInflaterについて勉強する

[top]

オフスクリーン

画面に直接描画するんじゃなくて、表示されないCanvasに描いておいて、

表示画面に転送するようなやり方を、オフスクリーンとかダブルバッファとか言う

オフスクリーン・キャンバスの利用によるお絵かきソフトの開発を参考にして、オフスクリーンを使ってみる

オフスクリーンの生成

表示用のCanvasとは別に、同じ大きさのCanvasを用意する。

実際に描画する実体のBitmapを生成して、Canvasに貼り付ける感じ

Bitmap bitmap = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);

Bitmap.config.ARGB_8888というのは、Bitmapの１ピクセルあたりのデータを定義している

これ以外にも、以下のようなBitmapを定義することが出来るらしい

Bitmap.config	1ピクセルあたりの、byte数/定義内容
ARGB_8888	4byte/αチャネル(8bit)、R(8bit)、G(8bit)、B(8bit)
ARGB_4444	2byte/αチャネル(4bit)、R(4bit)、G(4bit)、B(4bit)
RGB_565	2byte/αチャネルなし、R(5bit)、G(6bit)、B(5bit)
ALPHA_8	1byte/αチャネル(8bit)のみ

View生成時にCanvasを生成すれば良いが、

とりあえずは、onSizeChanged（Viewのサイズ変更時）で、オフスクリーンを生成する
- これだと、画面の向きを変えた時も再生成されてしまうが、今回はそれでよしとする

オフスクリーンを使った描画

オフスクリーンを使った描画の手順を考えてみる

いままでは、Mouseの動きに合わせて、Pathを記録しながら描画していた

Pathは１つしかないので、色を変えても全部の色が変わってしまう。

今度は、Pathを描き終わったら、オフスクリーンへも描画するようにする

で、描き始める前に、オフスクリーンを表示画面にコピーしてから、

その上に、追加で描画するようにする
最後に、やはりオフスクリーンに、表示画面が保存されることになる

こうすると、オフスクリーンには、いままで描いた絵が保存され、

Mouseで描いている間は、最後のPathのみ描くことになる

描いているPathの色を変えても、今まで描いた絵には影響しないし、

onDrawで描くのは、最後のPathのみになるので、処理も軽くなる

オフスクリーンを使ったCanvas

オフスクリーンを使って、カスタムViewを作り直してみる

package hm.orz.bluefish.canvastest;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {
        private Canvas canvas;
        private Bitmap bitmap;
        private Paint  paint;
        private Path   path;
        private Context appCont;

        public CustomView(Context cont) {
                super(cont);
                initView(cont);
        }

        public CustomView(Context cont, AttributeSet attr) {
                super(cont,attr);
                initView(cont);
        }

        private void initView(Context cont) {
                appCont = cont.getApplicationContext();

                path = new Path();
                paint = new Paint();
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeJoin(Paint.Join.ROUND);
                paint.setStrokeCap(Paint.Cap.ROUND);
                paint.setStrokeWidth(10);
        }

        @Override
        protected void onDraw(Canvas c){
                c.drawBitmap(bitmap, 0, 0,null);
                c.drawPath(path, paint);
        }

        @Override
        protected void onSizeChanged(int w,int h,int oldw,int oldh) {
                bitmap = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
                canvas = new Canvas(bitmap);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {

                float x = event.getX();
                float y = event.getY();

                switch(event.getAction()){
                case MotionEvent.ACTION_DOWN:
                        path.reset();
                        path.moveTo(x, y);
                        invalidate();
                        break;
                case MotionEvent.ACTION_MOVE:
                        path.lineTo(x, y);
                        invalidate();
                        break;
                case MotionEvent.ACTION_UP:
                        path.lineTo(x, y);
                        canvas.drawPath(path, paint);
                        path.reset();
                        invalidate();
                        break;
                }
                return true;
        }

        public void setColor(int color) {
                paint.setColor(color);
        }

        public void clearView() {
                canvas.drawColor(Color.TRANSPARENT, android.graphics.PorterDuff.Mode.CLEAR);
                invalidate();
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
                int widthSize = MeasureSpec.getSize(widthMeasureSpec);
                int heightSize = MeasureSpec.getSize(heightMeasureSpec);
                setMeasuredDimension(widthSize,heightSize);
        }
}

clearViewメソッドは、Canvasをクリアするコマンドを調べて定義したんだけど、
- この呪文のようなModeは何なんだろう？ちゃんと動くんだけどね。。

Viewのメソッド呼び出し

オフスクリーンを使ったViewを呼び出すActivityのプログラム

Buttonで、Viewのメソッドを呼び出すようにしてみた

package hm.orz.bluefish.canvastest;

import android.app.ActionBar;
import android.app.ActionBar.OnNavigationListener;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class CanvasTest extends Activity
implements OnNavigationListener {

        TextView tv;
        CustomView cv;
        Button bt;

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);

                LayoutInflater inflater = getLayoutInflater();
                View layout = inflater.inflate(R.layout.main, null);
                setContentView(layout);

                tv = (TextView)layout.findViewById(R.id.textView1);
                cv = (CustomView)layout.findViewById(R.id.customView1);
                bt = (Button)layout.findViewById(R.id.button1);

                bt.setOnClickListener(new OnClickListener() {
                        public void onClick(View v) {
                                Toast.makeText(CanvasTest.this, "Click!", Toast.LENGTH_LONG).show();
                                cv.clearView();
                        }
                });

                getActionBar().setDisplayShowTitleEnabled(false);
                getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
                ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                                this, R.array.color_list, R.layout.spinner);
                adapter.setDropDownViewResource( R.layout.spinner_down);
                getActionBar().setListNavigationCallbacks(adapter, this);
        }

        @Override
        public boolean onNavigationItemSelected(int pos, long id) {
                Toast.makeText(this, "pos=" + pos, Toast.LENGTH_SHORT).show();
                int color = Color.WHITE;
                switch(pos){
                case 0: color = Color.BLACK; break;
                case 1: color = Color.RED; break;
                case 2: color = Color.GREEN; break;
                case 3: color = Color.BLUE; break;
                case 4: color = Color.CYAN; break;
                case 5: color = Color.MAGENTA; break;
                case 6: color = Color.YELLOW; break;
                }
                cv.setColor(color);
                return true;
        }
}

CustomViewのメソッドにアクセスするために、inflaterを使って、CustomViewのViewを個別に取得している
- Buttonで、画面クリアするために、clearViewを呼び出している
色の設定は、ActionBar上にSpinnerDropDownリストで選択して、setColorを呼び出す
- 前述の、 Spinnerのリソースをそのまま使用した。Spinnerの使い方はそちらを参照

Viewの保存

ViewをPNGファイルとして保存する saveAsPngImageメソッドを追加する

        public void saveAsPngImage(){
                try {
                        File extStrageDir =
                                        Environment.getExternalStorageDirectory();
                        File file = new File(
                                extStrageDir.getAbsolutePath() + "/" + Environment.DIRECTORY_DCIM,
                                getFileName());
                        FileOutputStream outStream = new FileOutputStream(file);
                        bitmap.compress(CompressFormat.PNG, 100, outStream);
                        outStream.close();

                        Toast.makeText(appCont,"Image saved",Toast.LENGTH_SHORT).show();
                } catch (FileNotFoundException e) {
                        Toast.makeText(appCont,"FileNotFoundException!!",Toast.LENGTH_SHORT).show();
                        e.printStackTrace();
                } catch (IOException e) {
                        Toast.makeText(appCont,"IOException!!",Toast.LENGTH_SHORT).show();
                        e.printStackTrace();
                }
        }

        protected String getFileName(){
                Calendar c = Calendar.getInstance();
                String s = c.get(Calendar.YEAR)
                                + "_" + (c.get(Calendar.MONTH)+1)
                                + "_" + c.get(Calendar.DAY_OF_MONTH)
                                + "_" + c.get(Calendar.HOUR_OF_DAY)
                                + "_" + c.get(Calendar.MINUTE)
                                + "_" + c.get(Calendar.SECOND)
                                + "_" + c.get(Calendar.MILLISECOND)
                                + ".png"; 
                return s;
        }

StrageDir（普通は/sdrom/）の下のDCIMフォルダに日付を表すファイル名で保存する

でも、FileNotFoundExceptionになってしまい、保存出来ない。

しばらく悩んだんだけど、結局、AndroidManifestにパーミッションの設定を加える必要があるらしい
```
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
```

[top]

まとめ

というか、例によって感想だけど、

Androidは、いろいろ面倒な手続きが多い気がする

リソースをXMLで書かなきゃ¹¹いけないし、デフォルトの設定だと、ちょっと見づらかったり
Inflaterとか、Intentとか、Adapterとか、Holderとか、独自の用語、仕組みが多すぎる

マルチウィンドウでも無いわけなので、プログラム構造的にはWindowsより簡単で良いと思うんだけど。。

もうちょっと、シンプルなものにして欲しかったなぁ。

でも、オフスクリーンが作れることが分かったので、自分の作りたいプログラムが出来そうな気がしてきた。

まぁ、わかんないことは、まだまだ、いろいろあるんだけど。

¹¹XMLって、冗長な感じがして、どうもあまり好きじゃない。

[top]

エラーメッセージ

Error parsing XML: not well-formed (invalid token)

リソース定義の、XMLファイルのフォーマットに誤りがあるというエラー

このエラーが出て、実際、xmlファイルのフォーマットが間違っていたんだけど、

直した後、エラーマークが出ないのに、パッケージエクスプローラのエラーが消えない
```
エラー: Error parsing XML: not well-formed (invalid token)
```
結局、すべて保管とか、Cleanとか、全体を一旦コピーしてPasteし直して保管とか
いろいろやってる内に直った。原因不明¹²

フォーマットが正しいのに、このエラーになる場合、

一旦、エラー部分を全部Cutして、エラーが無いことを確認してから、もう一度、Pasteすると直るみたいだ。

¹²一度、このエラーが出ると、Eclipseの状態が少しおかしくなるのかもしれない。

[top]

参考

美しいOnClickListenerの実装方法 →OnClickListenerのいろいろな実装方法を比較されている

自作のViewを作成してxmlファイルでレイアウト →この記事のおかげで、Viewを自由にレイアウトできるようになった

オリジナル・ウィジットを作ろう →上記と同様の記事。後から見つけた。

[top] [プログラムの部屋に戻る]