プログラミング生放送　名古屋　第24回目のセッション資料です。

1. Android-Binding
Before / After
2013/7/20

2. お約束
内容は個人に帰属します
所属する組織を代表するものではありません

3. はじめに

4. 本資料のサンプルアプリ
http://blog.tworks.jp/wp-
content/uploads/2013/07/AndroidBin
dingSample.zip

5. 自己紹介
• 大場知悟（おおばとものり）
• @tworks
• 本名を強いられているッ！

6. 自己紹介
• 仕事
UIクライアントアプリの開発
Windows Storeアプリ・iOS・Android
• アラフォープログラマ
来週、アラフォーから昇格！
プログラマー35歳説なんてなかったんや...

7. アジェンダ
• 簡単なAndroidアプリ
• 簡単なAndroidアプリ
（おまけ）
• 複雑なAndroidアプリ
Before Android-Binding
After Android-Binding

8. Before
Android-Binding

9. 簡単なAndroidアプリ
<RelativeLayout xmlns:android=
"http://schemas.android.com/apk/res/android">
<TextView
android:id="@id/hello_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“Hello World!" />
</RelativeLayout>
activity_main.xml
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
MainActivity.java

10. 簡単なAndroidアプリ
<RelativeLayout xmlns:android=
"http://schemas.android.com/apk/res/android">
<TextView
android:id="@+id/hello_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
activity_main.xml
TextView textView =
(TextView)findViewById(R.id.hello_text);
textView.setText("Hello プロ生ちゃん!!");
MainActivity.java

11. 簡単なAndroidアプリ
<Button
android:id="@+id/hello_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="プロ生ちゃん" />
activity_main.xml
Button button = (Button)findViewById(R.id.hello_button);
button.setOnClickListener(newOnClickListener() {
@Override
public void onClick(View arg0) {
TextView textView = (TextView)findViewById(R.id.hello_text);
textView.setText("マジ天使!!");
}
});
MainActivity.java

12. いけてないところ
• View（UI）をActivity（コード）から
名前で参照している
名前を変えるなら両方の修正が必要
findViewById("…") の呪い
• View（UI）の型をActivity
（コード）側で意識している
HogeHogeButton hogeButton =
(HogeHogeButton)findViewById(R.id.hoge_button);
左辺の型推論があれば我慢できるけど…Javaめ！

13. Android-Binding
• いけてない所を解決するライブラリ
https://code.google.com/p/android-binding/
https://github.com/gueei/AndroidBinding
• 次スライドからポイントを説明

14. 準備
libsの下に配置

15. Android-Binding
概念編

16. ViewModel (1/5)
• Viewの射影
• Viewのふるまいを変数で定義する
クラス定義
• 「名前」を管理する変数
ViewModel View
名前を入力するUI

17. プロパティBinding (2/5)
• ViewのプロパティとViewModelの変数を関
連づける宣言
• Observable~~がBind可能な
変数
<TextView
binding:text="yourName" />
ObservableString yourName;
ViewModel View

18. プロパティBinding (2/5)
• ViewModelの変数を変更するとView
に反映される
• このときView（UI）の名前を
一切使っていないのがポイント！
ObservableString yourName;
yourName.set("暮井 慧");
ViewModel View
暮井 慧

19. プロパティBinding (2/5)
• 片方向
• 双方向
<TextView
binding:text="yourName" />
ObservableString yourName;
<TextView
binding:text="yourName" />
ObservableString yourName;

20. Command Binding (3/5)
• Viewのイベントをコード側のメソッ
ドと関連付ける宣言
従来、setOn~~Listenerとやっていた箇所
buttonClick = new Command() {
};
<Button
binding:onClick="buttonClick"
/>
コードView

21. Command Binding (3/5)
• CommandのInvokeメソッドが実行
される
• このときもView（UI）の名前を
一切使っていない！
public Command buttonClick = new Command() {
@Override
public void Invoke(View parent, Object... args) {
yourName.set("暮井 慧");
}
};

22. BindingActivity (4/5)
• View（UI）とViewModelを紐づける
機構
• setAndBindRootViewで紐づけ
public class MainActivity extends BindingActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//ViewModelをインスタンス化
MainActivityViewModel vm = new MainActivityViewModel();
setAndBindRootView(R.layout.activity_main, vm);
}
}

23. App起動クラスの変更 (5/5)
• Appの起動クラスとAndroid-Bindingライ
ブラリの初期化を追加
• 起動クラスを
Android.manifestへ宣言
// Applicationエントリーポイント
public class App extends Application {
@Override
public void onCreate() {
super.onCreate();
// Android-Bindingライブラリの初期化
Binder.init(this);
}
}

24. Before
Android-Binding

25. Before
public class MainActivity extendsActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.hello_button);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
TextView textView = (TextView)findViewById(R.id.hello_text);
textView.setText("マジ天使!!");
}
});
}
}

26. After
Android-Binding

27. After
public class MainActivity extends BindingActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
MainActivityViewModel vm
= new MainActivityViewModel();
setAndBindRootView (
R.layout.activity_main, vm);
}
}

28. After
public class MainActivityViewModel {
public StringObservable yourName = new StringObservable();
public Command buttonOnClick = new Command() {
@Override
public void Invoke(View parent, Object... args) {
yourName.set("マジ天使!!");
}
};
}

29. 複雑な
Androidアプリ

30. こんなアプリ
1. EditTextに入力
2. Addボタン押下でListViewに項目追
加
3. ListViewの項目押下でToast表示
ListView

31. MainActivityクラス
ListViewとListViewAdapter
ArrayAdapterクラス
// ListViewに表示するデータ
ArrayList<String> datas;
// ListViewの1行を表示するメソッド
View getView(int position,View
convertView,ViewGroup parent) {
inflater.inflate(R.layout.list_item, null);
}
list_item.xml
ListView1行のView
main_activity.xml
メイン画面のView

32. Before
ArrayAdapter
R.layout.list_item
list_item.xml
ListView1行のView
activity_main.xml
メイン画面のView
MainActivity
R.layout.nameListView
setOnClickListener
setOnItemClickListener

33. After
list_item.xml
ListView1行のView
activity_main.xml
メイン画面のView
MainActivityViewModel
// ListViewのItemsとBindするインスタンス
publicArrayListObservable<ListViewItemViewModel> datas;
// ListViewでクリックされたItemとBindするインスタンス
publicObjectObservable clickedListViewItem;
ListViewItemViewModel
// ListView ItemのデータとBind
public StringObservable data
MainActivity

34. After
<TextView
binding:text="data" />
<ListView
binding:itemSource="datas"
binding:clickedItem="clickedListViewItem"
binding:onItemClicked="listViewOnItemClick"
binding:itemTemplate="@layout/list_item">
public StringObservable yourName;
public ArrayListObservable<ListViewItemViewModel> datas;
public ObjectObservable clickedListViewItem ;
public Command listViewOnItemClick;
// ListView ItemのデータとBind
public StringObservable data;
MainActivity

35. After
//Add ButtonのClick処理
public Command buttonOnClick = new Command() {
@Override
public void Invoke(View parent, Object... args) {
// ListViewItemのためのViewModelを生成
ListViewItemViewModel viewModel =
new ListViewItemViewModel(yourName.get());
// ListViewのItemsにBindしている
//インスタンスにデータを追加
// これによりListViewへ追加が行われる
datas.add(viewModel); // ArrayListObservable<ListViewItemViewModel> datas
// EditTextの入力値をクリア
yourName.set("");
}
};

36. Android-Binding
メリット
• findViewById(...)から解放される
• コード側がViewの型を意識しなくてよくなる
• 分業とか...は理想論ですねｗ
デメリット
• Layout.xml の タグ
binding:xxx="yyy" が手打ち

37. まとめ
• Android-Bindingでスッキリした
コードを目指せる
• Android-Bindingは
MITライセンス
（昔はLGPLだった）
• Javaはとっとと型推論を！

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