使用RxBinding響應控制項的非同步事件__Rxjava和Rxandroid學習

（轉載）http://www.jianshu.com/p/c2c7c46e6b97

歡迎Follow我的GitHub, 關注我的簡書. 其餘參考Android目錄.

RxBinding是Rx中處理控制項非同步呼叫的方式, 也是由Square公司開發, Jake負責編寫. 通過綁定組件, 非同步擷取事件, 並進行處理. 編碼風格非常優雅. 讓我來講解一下如何使用, 本文含有程式碼範例.

本文代碼的Github下載地址, 關注RxBinding部分, 其餘參考.
Rx 1. 依賴

除了RxJava, 再添加RxBinding的依賴.

    // RxBinding    compile 'com.jakewharton.rxbinding:rxbinding:0.3.0'    compile 'com.jakewharton.rxbinding:rxbinding-appcompat-v7:0.3.0'    compile 'com.jakewharton.rxbinding:rxbinding-design:0.3.0'

2. 頁面配置

Toolbar和Fab, 兩個較新的控制項.

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    android:orientation="vertical"    tools:context=".BindingActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.v7.widget.Toolbar            android:id="@+id/rxbinding_t_toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            android:popupTheme="@style/AppTheme.PopupOverlay"            tools:targetApi="21"/>    </android.support.design.widget.AppBarLayout>    <include layout="@layout/content_rxbinding"/>    <android.support.design.widget.FloatingActionButton        android:id="@+id/rxbinding_fab_fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom|end"        android:layout_margin="@dimen/fab_margin"        android:src="@android:drawable/ic_dialog_email"/></android.support.design.widget.CoordinatorLayout>

兩個EditText控制項, 對比傳統方法和RxBinding方法.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              xmlns:app="http://schemas.android.com/apk/res-auto"              xmlns:tools="http://schemas.android.com/tools"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:orientation="vertical"              android:padding="@dimen/activity_margin"              app:layout_behavior="@string/appbar_scrolling_view_behavior"              tools:context=".BindingActivity"              tools:showIn="@layout/activity_binding">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="@string/usual_approach"/>    <EditText        android:id="@+id/rxbinding_et_usual_approach"        android:layout_width="match_parent"        android:layout_height="48dp"        android:hint="@null"/>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="@string/reactive_approach"/>    <EditText        android:id="@+id/rxbinding_et_reactive_approach"        android:layout_width="match_parent"        android:layout_height="48dp"        android:hint="@null"/>    <TextView        android:id="@+id/rxbinding_tv_show"        android:layout_width="match_parent"        android:layout_height="wrap_content"/></LinearLayout>

使用include子布局, 使頁面結構清晰. 3. 邏輯

使用ButterKnife注入控制項, 使用RxBinding方式繫結控制項, 非同步監聽事件.

/** * Rx綁定 * <p> * Created by wangchenlong on 16/1/25. */public class BindingActivity extends AppCompatActivity {    @Bind(R.id.rxbinding_t_toolbar) Toolbar mTToolbar;    @Bind(R.id.rxbinding_et_usual_approach) EditText mEtUsualApproach;    @Bind(R.id.rxbinding_et_reactive_approach) EditText mEtReactiveApproach;    @Bind(R.id.rxbinding_tv_show) TextView mTvShow;    @Bind(R.id.rxbinding_fab_fab) FloatingActionButton mFabFab;    @Override protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_binding);        ButterKnife.bind(this);        initToolbar(); // 初始化Toolbar        initFabButton(); // 初始化Fab按鈕        initEditText(); // 初始化編輯文本    }    // 初始化Toolbar    private void initToolbar() {        // 添加功能表按鈕        setSupportActionBar(mTToolbar);        ActionBar actionBar = getSupportActionBar();        // 添加瀏覽按鈕        if (actionBar != null) {            actionBar.setDisplayHomeAsUpEnabled(true);        }        RxToolbar.itemClicks(mTToolbar).subscribe(this::onToolbarItemClicked);        RxToolbar.navigationClicks(mTToolbar).subscribe(this::onToolbarNavigationClicked);    }    // 點擊Toolbar的項    private void onToolbarItemClicked(MenuItem menuItem) {        String m = "點擊\"" + menuItem.getTitle() + "\"";        Toast.makeText(this, m, Toast.LENGTH_SHORT).show();    }    // 瀏覽點擊    private void onToolbarNavigationClicked(Void v) {        Toast.makeText(this, "瀏覽點擊", Toast.LENGTH_SHORT).show();    }    @Override public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.menu_rxbinding, menu);        return super.onCreateOptionsMenu(menu);    }    // 初始化Fab按鈕    private void initFabButton() {        RxView.clicks(mFabFab).subscribe(this::onFabClicked);    }    // 點擊Fab按鈕    private void onFabClicked(Void v) {        Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "點擊Snackbar", Snackbar.LENGTH_SHORT);        snackbar.show();        RxSnackbar.dismisses(snackbar).subscribe(this::onSnackbarDismissed);    }    // 銷毀Snackbar, event參考{Snackbar}    private void onSnackbarDismissed(int event) {        String text = "Snackbar消失代碼:" + event;        Toast.makeText(this, text, Toast.LENGTH_SHORT).show();    }    // 初始化編輯文本    private void initEditText() {        // 正常方式        mEtUsualApproach.addTextChangedListener(new TextWatcher() {            @Override            public void beforeTextChanged(CharSequence s, int start, int count, int after) {            }            @Override public void onTextChanged(CharSequence s, int start, int before, int count) {                mTvShow.setText(s);            }            @Override public void afterTextChanged(Editable s) {            }        });        // Rx方式        RxTextView.textChanges(mEtReactiveApproach).subscribe(mTvShow::setText);    }}

Toolbar使用RxToolbar監聽點擊事件; Snackbar使用RxSnackbar監聽;
EditText使用RxTextView監聽; 其餘使用RxView監聽.
動畫

Rx響應式編程是處理非同步回調的一種優雅方式, 每一個最求完美的程式員都應該學會.

OK, that's all! Enjoy it!

文／SpikeKing（簡書作者）
原文連結：http://www.jianshu.com/p/c2c7c46e6b97
著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。