アプリを弄ってみるTakahiro Yoshimura (@alterakey)

22.10.2011

自己紹介

こんな人

埼玉で活動しているアーキテクトです。

適当なアプリをフリーで書いてみました。

Twitterやってます→@alterakey

目標

タブレット描画アプリ

https://github.com/taky/effy

線幅を変えられるようにしましょう。

こんな感じで…

線幅をとりあえず変えてみる

設定画面を付けてみる

設定に従って線幅を変える

素材の準備

EffyをZIPから展開します。

適当なフォルダに

素材の準備

開発環境の準備

Eclipseのインストール

Android SDKのインストール

Effyのインポート

確認しましょう。

EclipseでEffyを実行できますか？

始めましょう。

とりあえず線幅を変えてみましょう。

手掛り

描画にかかわっているのはDrawActivity

実際に描いているのはDA.plot

Paintを使ってCanvasに描いている

方針

DrawActivity.java

private void initialSetup(){ ...! this.setPenColor(color);! this.paint.setStrokeWidth(5.0f);}

→値を変更するとどうなるか？

次は…

設定画面を付けてみましょう。

フォントサイズを指定している時に使っているような物でＯＫ

手掛り

res/xml/config.xml: 設定項目

ConfigActivity: 設定画面

ConfigKey: 設定名

方針

まず項目を追加します。

<ListPreference>タグを追加

フォントサイズのあたりの指定を参考に

res/values/arrays.xmlも忘れずに

名前は当たっていませんか？

方針

res/xml/config.xml

<ListPreference android:key="pen_width" android:title="ペンの太さ"

android:defaultValue="5" android:entries="@array/entries_pen_width" android:entryValues="@array/entry_values_pen_width" />

方針

res/values/arrays.xml (1)

<string-array name="entries_pen_width"> <item>極細</item>

<item>細</item>

<item>中太</item>

<item>太</item>

<item>極太</item>

</string-array>

方針

res/values/arrays.xml (2)

<string-array name="entry_values_pen_width"> <item>2</item> <item>3</item> <item>5</item> <item>8</item> <item>13</item></string-array>

方針

項目名を控えておきます。

CKにPEN_WIDTHとして

方針

ConfigKey.java

public class ConfigKey {! public static final String DROP_ALPHA = "drop_alpha";! public static final String PEN_ALPHA = "pen_alpha";

public static final String PEN_WIDTH = "pen_width";

}

方針

設定画面に項目の現在の値を出します。

デフォルトでは出ない→少々分かりづらい

private変数としてCA.onCreateで初期化

CA.onResumeで現在値を出す

CA.updateSummaryが実際に表示

方針

ConfigActivity.java (1)

public class ConfigActivity extends PreferenceActivity ...{! private ListPreference drop_alpha;! private ListPreference pen_alpha;

private ListPreference pen_width;

@Override protected void onCreate(Bundle savedInstanceState) {

方針

ConfigActivity.java (2)

@Overrideprotected void onCreate(Bundle savedInstanceState) { ... this.pen_alpha = (ListPreference)getPreferenceScreen().findPreference(ConfigKey.PEN_ALPHA);

this.pen_width = (ListPreference)getPreferenceScreen().findPreference(ConfigKey.PEN_WIDTH);

}

方針

ConfigActivity.java (3)

@Overrideprotected void onResume() { ... this.updateSummary(sharedPreferences, ConfigKey.PEN_ALPHA);

this.updateSummary(sharedPreferences, ConfigKey.PEN_WIDTH);

...}

方針

ConfigActivity.java (4)

private void updateSummary(SharedPreferences ...{ ... if (key.equals(ConfigKey.PEN_ALPHA)) this.setSummary(this.pen_alpha, this.pen_alpha.getEntry());

if (key.equals(ConfigKey.PEN_WIDTH)) this.setSummary(this.pen_width, this.pen_width.getEntry());

}

次は…

いよいよ設定項目を反映させましょう。

手掛り

設定項目を読むためにはSharedPreferences

線幅を指定する場所を移動

今は最初に一度だけしかしていない

設定が変更された後にも反映するため

方針

線幅を変更する場所

DA.initialSetup → DA.restyleへ

SharedPreferencesを読んで線幅を変える

直前で背景の濃さ (DROP_ALPHA) を変えている箇所があるので、そこを参考にしながら…

方針

DrawActivity.java

private void initialSetup(){ ... this.paint.setStrokeWidth(5.0f);}

方針

DrawActivity.java

private void restyle(){ ... this.setPenColor(this.paint.getColor());

float pen_width = (float)Integer.parseInt(pref.getString(ConfigKey.PEN_WIDTH, "5")); this.paint.setStrokeWidth(pen_width);

}

ここで…

少しリファクタリングをしましょう。

方針

シンボリック定数によるマジックナンバーの置き換え

DA.restyle(): “drop_alpha” → ConfigKey.DROP_ALPHA

まとめ

PaintでCanvasに描いていくイメージ

設定画面は結構簡単にできるでも本当に使いやすくするには奥が深い

お疲れさまでした！

コードはgithubにあるので (GPL-3)、ガンガン研究してください！

余談

#5、解決策募集中！Android 3.1でメニューが出ないという噂。https://github.com/taky/effy/issues/5

半透明Activityについてメニューができない

起きる機種と起きない機種がある（エミュレータ: 3.2→OK、3.0/3.1→NG）

ご清聴ありがとうございました。