Android-Binding
Before / After
2013/7/20
お約束
内容は個人に帰属します
所属する組織を代表するものではありません
はじめに
本資料のサンプルアプリ
http://blog.tworks.jp/wp-
content/uploads/2013/07/AndroidBin
dingSample.zip
自己紹介
• 大場知悟(おおばとものり)
• @tworks
• 本名を強いられているッ!
自己紹介
• 仕事
UIクライアントアプリの開発
Windows Storeアプリ・iOS・Android
• アラフォープログラマ
来週、アラフォーから昇格!
プログラマー35歳説なんてなかったんや...
アジェンダ
• 簡単なAndroidアプリ
• 簡単なAndroidアプリ
(おまけ)
• 複雑なAndroidアプリ
Before Android-Binding
After Android-Binding
Before
Android-Binding
簡単なAndroidアプリ
<RelativeLayout xmlns:android=
"http://schemas.android.com/apk/res/android">
<TextView
android:id="@id/hello...
簡単なAndroidアプリ
<RelativeLayout xmlns:android=
"http://schemas.android.com/apk/res/android">
<TextView
android:id="@+id/hell...
簡単なAndroidアプリ
<Button
android:id="@+id/hello_button"
android:layout_width="wrap_content"
android:layout_height="wrap_conte...
いけてないところ
• View(UI)をActivity(コード)から
名前で参照している
名前を変えるなら両方の修正が必要
findViewById("…") の呪い
• View(UI)の型をActivity
(コード)側で意識している
H...
Android-Binding
• いけてない所を解決するライブラリ
https://code.google.com/p/android-binding/
https://github.com/gueei/AndroidBinding
• 次ス...
準備
libsの下に配置
Android-Binding
概念編
ViewModel (1/5)
• Viewの射影
• Viewのふるまいを変数で定義する
クラス定義
• 「名前」を管理する変数
ViewModel View
名前を入力するUI
プロパティBinding (2/5)
• ViewのプロパティとViewModelの変数を関
連づける宣言
• Observable~~がBind可能な
変数
<TextView
binding:text="yourName" />
Obser...
プロパティBinding (2/5)
• ViewModelの変数を変更するとView
に反映される
• このときView(UI)の名前を
一切使っていないのがポイント!
ObservableString yourName;
yourName....
プロパティBinding (2/5)
• 片方向
• 双方向
<TextView
binding:text="yourName" />
ObservableString yourName;
<TextView
binding:text="you...
Command Binding (3/5)
• Viewのイベントをコード側のメソッ
ドと関連付ける宣言
従来、setOn~~Listenerとやっていた箇所
buttonClick = new Command() {
};
<Button
b...
Command Binding (3/5)
• CommandのInvokeメソッドが実行
される
• このときもView(UI)の名前を
一切使っていない!
public Command buttonClick = new Command()...
BindingActivity (4/5)
• View(UI)とViewModelを紐づける
機構
• setAndBindRootViewで紐づけ
public class MainActivity extends BindingActiv...
App起動クラスの変更 (5/5)
• Appの起動クラスとAndroid-Bindingライ
ブラリの初期化を追加
• 起動クラスを
Android.manifestへ宣言
// Applicationエントリーポイント
public cla...
Before
Android-Binding
Before
public class MainActivity extendsActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.on...
After
Android-Binding
After
public class MainActivity extends BindingActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
s...
After
public class MainActivityViewModel {
public StringObservable yourName = new StringObservable();
public Command butto...
複雑な
Androidアプリ
こんなアプリ
1. EditTextに入力
2. Addボタン押下でListViewに項目追
加
3. ListViewの項目押下でToast表示
ListView
MainActivityクラス
ListViewとListViewAdapter
ArrayAdapterクラス
// ListViewに表示するデータ
ArrayList<String> datas;
// ListViewの1行を表示するメ...
Before
ArrayAdapter
R.layout.list_item
list_item.xml
ListView1行のView
activity_main.xml
メイン画面のView
MainActivity
R.layout.na...
After
list_item.xml
ListView1行のView
activity_main.xml
メイン画面のView
MainActivityViewModel
// ListViewのItemsとBindするインスタンス
publ...
After
<TextView
binding:text="data" />
<ListView
binding:itemSource="datas"
binding:clickedItem="clickedListViewItem"
bind...
After
//Add ButtonのClick処理
public Command buttonOnClick = new Command() {
@Override
public void Invoke(View parent, Object...
Android-Binding
メリット
• findViewById(...)から解放される
• コード側がViewの型を意識しなくてよくなる
• 分業とか...は理想論ですねw
デメリット
• Layout.xml の タグ
binding...
まとめ
• Android-Bindingでスッキリした
コードを目指せる
• Android-Bindingは
MITライセンス
(昔はLGPLだった)
• Javaはとっとと型推論を!
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Android-Binding Before / After

5,098
-1

Published on

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

Published in: Technology, News & Politics

Android-Binding Before / After

  1. 1. Android-Binding Before / After 2013/7/20
  2. 2. お約束 内容は個人に帰属します 所属する組織を代表するものではありません
  3. 3. はじめに
  4. 4. 本資料のサンプルアプリ http://blog.tworks.jp/wp- content/uploads/2013/07/AndroidBin dingSample.zip
  5. 5. 自己紹介 • 大場知悟(おおばとものり) • @tworks • 本名を強いられているッ!
  6. 6. 自己紹介 • 仕事 UIクライアントアプリの開発 Windows Storeアプリ・iOS・Android • アラフォープログラマ 来週、アラフォーから昇格! プログラマー35歳説なんてなかったんや...
  7. 7. アジェンダ • 簡単なAndroidアプリ • 簡単なAndroidアプリ (おまけ) • 複雑なAndroidアプリ Before Android-Binding After Android-Binding
  8. 8. Before Android-Binding
  9. 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. 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. 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. 12. いけてないところ • View(UI)をActivity(コード)から 名前で参照している 名前を変えるなら両方の修正が必要 findViewById("…") の呪い • View(UI)の型をActivity (コード)側で意識している HogeHogeButton hogeButton = (HogeHogeButton)findViewById(R.id.hoge_button); 左辺の型推論があれば我慢できるけど…Javaめ!
  13. 13. Android-Binding • いけてない所を解決するライブラリ https://code.google.com/p/android-binding/ https://github.com/gueei/AndroidBinding • 次スライドからポイントを説明
  14. 14. 準備 libsの下に配置
  15. 15. Android-Binding 概念編
  16. 16. ViewModel (1/5) • Viewの射影 • Viewのふるまいを変数で定義する クラス定義 • 「名前」を管理する変数 ViewModel View 名前を入力するUI
  17. 17. プロパティBinding (2/5) • ViewのプロパティとViewModelの変数を関 連づける宣言 • Observable~~がBind可能な 変数 <TextView binding:text="yourName" /> ObservableString yourName; ViewModel View
  18. 18. プロパティBinding (2/5) • ViewModelの変数を変更するとView に反映される • このときView(UI)の名前を 一切使っていないのがポイント! ObservableString yourName; yourName.set("暮井 慧"); ViewModel View 暮井 慧
  19. 19. プロパティBinding (2/5) • 片方向 • 双方向 <TextView binding:text="yourName" /> ObservableString yourName; <TextView binding:text="yourName" /> ObservableString yourName;
  20. 20. Command Binding (3/5) • Viewのイベントをコード側のメソッ ドと関連付ける宣言 従来、setOn~~Listenerとやっていた箇所 buttonClick = new Command() { }; <Button binding:onClick="buttonClick" /> コードView
  21. 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. 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. 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. 24. Before Android-Binding
  25. 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. 26. After Android-Binding
  27. 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. 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. 29. 複雑な Androidアプリ
  30. 30. こんなアプリ 1. EditTextに入力 2. Addボタン押下でListViewに項目追 加 3. ListViewの項目押下でToast表示 ListView
  31. 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. 32. Before ArrayAdapter R.layout.list_item list_item.xml ListView1行のView activity_main.xml メイン画面のView MainActivity R.layout.nameListView setOnClickListener setOnItemClickListener
  33. 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. 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. 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. 36. Android-Binding メリット • findViewById(...)から解放される • コード側がViewの型を意識しなくてよくなる • 分業とか...は理想論ですねw デメリット • Layout.xml の タグ binding:xxx="yyy" が手打ち
  37. 37. まとめ • Android-Bindingでスッキリした コードを目指せる • Android-Bindingは MITライセンス (昔はLGPLだった) • Javaはとっとと型推論を!
  38. 38. ご清聴ありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×