アプリを弄ってみる #1 #antama_ws
DESCRIPTION
タブレット描画アプリに線幅変更を付けてみるハンズオンです。TRANSCRIPT
アプリを弄ってみる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);}
→値を変更するとどうなるか?
次は…
設定画面を付けてみましょう。
フォントサイズを指定している時に使っているような物でOK
手掛り
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)
ご清聴ありがとうございました。