Downloaded 18 times
Android-Binding Before/After (Hokuriku,NET)
- 1. Hokuriku.NET vol.12 2013/8/3 大場 知悟(@tworks)
- 2.
- 3.
- 4.
- 5.
- 6. 2012年9月11日 ～Hokuriku.NET vol.10～ こどもの運動会により、あえなくキャンセル 2013年4月13日～Hokuriku.NET X WCAF～ AM 5:20 徹夜で発表資料を作成 AM 5:33 淡路島付近で（M）6．3の地震 交通機関STOP 大場が北陸に近づこうとすると何かが起こる...？
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. <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
- 13. <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="こんにちは" /> </RelativeLayout> activity_main.xml TextViewtextView = (TextView)findViewById(R.id.hello_text); textView.setText("じんぐる"); MainActivity.java
- 14. <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
- 15.
- 16.
- 17. View（UI）の型をActivity （コード）側で意識している TextView textView = (TextView)findViewById(R.id.hello_text); 左辺の型推論があれば我慢できるけど…Javaめ！
- 18.
- 19.
- 20.
- 21.
- 22. バインド 【 bind】 束縛(する)、拘束(する)、結びつける、関連付け る、などの意味を持つ英単語。ITの分野では、何 らかの要素やデータ、ファイルなどが相互に関連 付けられている状態や、そのような状態を実現す る機能などのことを指すことが多い。 データベース管理システム(DBMS)で、データベー スを操作するプログラムを作成する際に、SQL文に プログラムの変数を埋め込むことをバインド変数 という。
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. 片方向 双方向 <TextView binding:text="yourName" /> StringObservable yourName; <TextView binding:text="yourName"/> StringObservable yourName;
- 30. Viewのイベントをコード側のメソッドと関 連付ける宣言 従来、setOn~~Listenerとやっていた箇所 buttonClick = newCommand() { }; <Button binding:onClick="buttonClick" /> ViewModelView
- 31. CommandのInvokeメソッドが実行される このときもView（UI）の名前を 一切使っていない！ public Command buttonClick= new Command() { @Override public void Invoke(View parent, Object... args) { yourName.set("じんぐる"); } };
- 32. View（UI）とViewModelを紐づける機構 setAndBindRootViewで紐づけ public class MainActivityextends BindingActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //ViewModelをインスタンス化 MainActivityViewModel vm = new MainActivityViewModel(); setAndBindRootView(R.layout.activity_main, vm); } }
- 33. アプリ初期化のおまじない Appの起動クラスとAndroid-Bindingライブラリの初期化 を追加 起動クラスを Android.manifestへ宣言 // Applicationエントリーポイント public classApp extends Application { @Override public void onCreate() { super.onCreate(); // Android-Bindingライブラリの初期化 Binder.init(this); } }
- 34.
- 35. public class MainActivityextendsActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); 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("じんぐる");
- 36.
- 37. public class MainActivityextends BindingActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MainActivityViewModel vm = new MainActivityViewModel(); setAndBindRootView ( R.layout.activity_main, vm); } }
- 38. public class MainActivityViewModel{ public StringObservable yourName = new StringObservable(); public Command buttonOnClick = new Command() { @Override public void Invoke(View parent, Object... args) { yourName.set("じんぐる!!"); } };
- 39.
- 40. 1. EditTextに入力 2. Addボタン押下でListViewに項目追加 3.ListViewの項目押下でToast表示 ListView
- 41. MainActivityクラス 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
- 42.
- 43. 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
- 44. <TextView binding:text="data" /> <ListView binding:itemSource="datas" binding:clickedItem="clickedListViewItem" binding:onItemClicked="listViewOnItemClick" binding:itemTemplate="@layout/list_item"> publicStringObservable yourName; public ArrayListObservable<ListViewItemViewModel> datas; public ObjectObservable clickedListViewItem ; public Command listViewOnItemClick; // ListView ItemのデータとBind public StringObservable data; MainActivity
- 45. // Add ButtonのClick処理 publicCommandbuttonOnClick = 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(""); } };
- 46. メリット • findViewById(...)から解放される • コード側がViewの型を意識しなくてよくなる •分業とか...は理想論ですねｗ デメリット • Layout.xml の タグ binding:xxx="yyy" が手打ち
- 47. Android-Bindingでスッキリしたコードを目 指せる Microsoft.NETのXAMLと同じ概念ですので、 XAMLerな方はAndroid-BindingでAndroid開 発者にデビューできちゃう！（かも） Android-BindingはMITライセンス （昔はLGPLだった） Javaはとっとと型推論を！