Android-Binding Before/After (Hokuriku,NET)

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


<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


<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...

コード" じんぐる

"（文字変数）


理想とするならば ...

View （ UI ）の型を Activity（コード）側で意識しないで、本質的に扱いたい文字列を UI に設定できれば ...

View


コード" じんぐる

"（文字変数）

What is

Android-Binding

What is "Android-Binding"

いけてない所を解決するライブラリhttps://code.google.com/p/android-binding/https://github.com/gueei/AndroidBinding

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)

片方向

双方向





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 の型を意識しなくてよくなる• 分業とか ... は理想論ですねｗ　

デメリット

• Layout.xml のタグbinding:xxx="yyy" が手打ち

まとめ Android-Binding でスッキリしたコード

を目指せる

Microsoft.NET の XAML と同じ概念ですので、 XAMLer な方は Android-Bindingで Android 開発者にデビューできちゃう！（かも）

Android-Binding は MIT ライセンス（昔は LGPL だった）

Java はとっとと型推論を！

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

Android-Binding Before/After (Hokuriku,NET)

Documents

Transcript of Android-Binding Before/After (Hokuriku,NET)