Android-BindingBefore / After

2013/7/20

お約束

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

はじめに

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

自己紹介

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

自己紹介

•仕事UI クライアントアプリの開発Windows Store アプリ・ iOS ・ Android

•アラフォープログラマ来週、アラフォーから昇格！プログラマー 35 歳説なんてなかったんや ...

アジェンダ

•簡単な Android アプリ

•簡単な Android アプリ

（おまけ）•複雑な Android アプリ

Before Android-Binding

After Android-Binding

BeforeAndroid-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="Hello World!" /></RelativeLayout>

activity_main.xml

TextView textView = (TextView)findViewById(R.id.hello_text);textView.setText("Hello プロ生ちゃん !!");

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（コード）側で意識している

HogeHogeButton hogeButton =

(HogeHogeButton)findViewById(R.id.hoge_button);

左辺の型推論があれば我慢できるけど… Java め！

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 可能な変数

<TextViewbinding:text="yourName" />

ObservableString yourName;

ViewModel View

プロパティ Binding (2/5)

•ViewModel の変数を変更するとView に反映される

•このとき View （ UI ）の名前を一切使っていないのがポイント！

ObservableString yourName;yourName.set(" 暮井 慧 ");

ViewModel View

暮井 慧

プロパティ Binding (2/5)

•片方向

•双方向

<TextViewbinding:text="yourName" />

ObservableString yourName;

<TextViewbinding:text="yourName" />

ObservableString yourName;

Command Binding (3/5)

•View のイベントをコード側のメソッドと関連付ける宣言

従来、 setOn~~Listener とやっていた箇所

buttonClick = new Command() {};

<Buttonbinding:onClick="buttonClick" />

コードView

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); }}

BeforeAndroid-Binding

Before

public 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(" マジ天使 !!");

　　　 }

　　 });

　 }

}

AfterAndroid-Binding

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);

　 }

}

After

public 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 でスッキリしたコードを目指せる

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

• Java はとっとと型推論を！

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