android-binding before/after (hokuriku,net)
Post on 29-Nov-2014
1.295 Views
Preview:
DESCRIPTION
TRANSCRIPT
Hokuriku.NET vol.12
Android-BindingBefore / After
2013/8/3大場 知悟 (@tworks)
はじめに
お約束
内容は個人に帰属します所属する組織を代表するものではありません
資料内サンプル
http://blog.tworks.jp/wp-content/uploads/2013/08/AndroidBindingSample.zip
自己紹介大場知悟(おおばとものり)
@tworks匿名文化の Twitter で本名を強いられている人です
北陸遠いよ北陸2012 年 9 月 11 日 ~ Hokuriku.NET vol.10~こどもの運動会により、あえなくキャンセル
2013 年 4 月 13 日 ~ Hokuriku.NET X WCAF~AM 5:20 徹夜で発表資料を作成AM 5:33 淡路島付近で( M ) 6 . 3 の地震 交通機関 STOP
大場が北陸に近づこうとすると何かが起こる ... ?
本題
今日のお話Android アプリ開発のお話
本日はここ
プログラミング
デザイン・ユーザーインターフェース
アジェンダ簡単な Androidアプリ
簡単な Androidアプリ
(おまけ)
複雑な Androidアプリ
Before Android-BindingAfter Android-Binding
簡単なアプリ
つくるもの
UIテキスト表示欄ボタン
ボタンをつつくとテキスト表示欄に「じんぐる」を表示
Before
Android-Binding
簡単な 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
@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);}
MainActivity.java
簡単な 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=" こんにちは " /></RelativeLayout>
activity_main.xml
TextView textView = (TextView)findViewById(R.id.hello_text);textView.setText(" じんぐる ");
MainActivity.java
簡単な 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(new OnClickListener() { @Override public void onClick(View arg0) { TextView textView = (TextView)findViewById(R.id.hello_text); textView.setText(" じんぐる! "); }});
MainActivity.java
突然ですが欠点を
いけてないところ①View ( UI )を Activity (コード)から名前で参照している
名前を変えるなら両方の修正が必要 findViewById("…") の呪い
でも名前を付けないと、いろんなことが できなくなっちゃう
いけてないところ②View ( UI )の型を Activity(コード)側で意識している
TextView textView =
(TextView )findViewById(R.id.hello_text);
左辺の型推論があれば我慢できるけど… Javaめ!
いけてないところ②View ( UI )の型を Activity(コード)側で意識しているが、コードが本質的に扱いたいのは文字列だけ→扱いたい内容にギャップが生じている
View
TextView・ Text・色・位置・ etc...
コード" じんぐる
"(文字変数)
TextView・ Text・色・位置・ etc...
理想とするならば ...
View ( UI )の型を Activity(コード)側で意識しないで、本質的に扱いたい文字列を UI に設定できれば ...
View
TextView・ Text・色・位置・ etc...
コード" じんぐる
"(文字変数)
What is
Android-Binding
What is "Android-Binding"
いけてない所を解決するライブラリhttps://code.google.com/p/android-binding/https://github.com/gueei/AndroidBinding
What is "Bind"
バインド 【 bind 】束縛 ( する ) 、拘束 ( する ) 、結びつける、関連付ける、などの意味を持つ英単語。 IT の分野では、何らかの要素やデータ、ファイルなどが相互に関連付けられている状態や、そのような状態を実現する機能などのことを指すことが多い。
データベース管理システム (DBMS) で、データベースを操作するプログラムを作成する際に、 SQL 文にプログラムの変数を埋め込むことをバインド変数という。
準備
libs の下に配置
Android-Binding
概念編
ViewModel (1/5)
View に対しコードが本質的に扱いたいものや振る舞いを定義するクラス
「名前」を管理する変数
ViewModelView
名前を入力する UI
プロパティ Binding (2/5)Viewのプロパティと ViewModelの変数を関連づける宣
言
Bind可能なソースは、~~ Observableという変数
<TextViewbinding:text="yourName" />
StringObservable yourName;
ViewModelView
プロパティ Binding (2/5)
ViewModelの変数を変更すると Viewに反映される
このとき View( UI)の名前や Viewの型を一切使っていない! →依存関係が少なくなる
StringObservable yourName;yourName.set(“ じんぐる ");
ViewModelView
じんぐる
ちな Observable とは~~ Observable に変更が発生したとき、Binding先に変更があったことを通知する仕組みを内蔵している。これによりViewModel 側は View の型を意識しなくて済む!
StringObservable yourName;yourName.set(“ じんぐる ");
ViewModelView
①値が変わったよ!
②了解、参照しますね
じんぐる
プロパティ Binding (2/5)
片方向
双方向
<TextViewbinding:text="yourName" />
StringObservable yourName;
<TextViewbinding:text="yourName" />
StringObservable yourName;
Command Binding (3/5)
View のイベントをコード側のメソッドと関連付ける宣言
従来、 setOn~~Listener とやっていた箇所
buttonClick = new Command() {};
<Buttonbinding:onClick="buttonClick" />
ViewModelView
Command Binding (3/5)
Command の Invokeメソッドが実行される
このときも View ( UI )の名前を一切使っていない!
public Command buttonClick = new Command() { @Override public void Invoke(View parent, Object... args) { yourName.set(" じんぐる "); }};
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); }}
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); }}
Before
Android-Binding
Beforepublic class MainActivity extends Activity {
@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(" じんぐる ");
}
});
}
}
After
Android-Binding
Afterpublic class MainActivity extends BindingActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
MainActivityViewModel vm = new MainActivityViewModel();
setAndBindRootView ( R.layout.activity_main, vm);
}
}
Afterpublic class MainActivityViewModel {
public StringObservable yourName = new StringObservable();
public Command buttonOnClick = new Command() {
@Override
public void Invoke(View parent, Object... args) {
yourName.set(" じんぐる !!");
}
};
}
複雑な
Android アプリ
こんなアプリ1.EditText に入力
2.Add ボタン押下で ListView に項目追加
3.ListView の項目押下で Toast 表示
ListView
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
Before
ArrayAdapter
R.layout.list_item
list_item.xmlListView1 行のView
activity_main.xmlメイン画面の View
MainActivity
R.layout.nameListView
setOnClickListenersetOnItemClickListener
After
list_item.xmlListView1 行のView
activity_main.xmlメイン画面の View
MainActivityViewModel
// ListView の Items と Bind するインスタンスpublic ArrayListObservable<ListViewItemViewModel> datas;
// ListView でクリックされた Item と Bind するインスタンスpublic ObjectObservable clickedListViewItem;
ListViewItemViewModel
// ListView Item のデータとBindpublic StringObservable data
MainActivity
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 のデータとBindpublic StringObservable data;
MainActivity
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(""); }};
Android-Binding
メリット
• findViewById(...) から解放される• コード側が View の型を意識しなくてよくなる• 分業とか ... は理想論ですねw
デメリット
• Layout.xml の タグbinding:xxx="yyy" が手打ち
まとめ Android-Binding でスッキリしたコード
を目指せる
Microsoft.NET の XAML と同じ概念ですので、 XAMLer な方は Android-Bindingで Android 開発者にデビューできちゃう!(かも)
Android-Binding は MIT ライセンス(昔は LGPL だった)
Java はとっとと型推論を!
ご清聴ありがとうございました
top related