CoordinatorLayout がわかりづらいのは デフォルト のせい?

よくある画面要素の組み合わせ ActionBar + RecyclerView + FAB.

ActionBar 部分をスクロール時に上にスライドさせて消したいですよね!

まずは CoordinatorLayout で囲みます.

レイアウトはこんなかんじの構成ですね.


<CoordinatorLayout>
  <AppBarLayout>
    <Toolbar />
  </AppBarLayout>
  <RecyclerView />
  <FloatingActionButton />  
</CoordinatorLayout>

ここでは, 連携する挙動の始まりとなる「きっかけ」を RecyclerView のスクロールとしましたが, 以下の View や Layout は, デフォルトで同様に「きっかけ」にすることができます.

HorizontalGridView
NestedScrollView
RecyclerView
SwipeRefreshLayout
VerticalGridView

NestedScrollingChild | Android Developers

よく画面をみてみると, RecyclerView の最上段をみることができないようになってますね!

20160414-190459_1

それは, CoordinatorLayout は FrameLayout だからです.

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout | Android Developers

でも, とりあえず無視します.

次に, アクションバー部分が「きっかけ」に反応して「ふるまう」するようにします.

AppBarLayout または Toolbar に, 属性「app:layout_behavior」をつけて, 「ふるまう」時の挙動を追加したくなります.

でも, 必要なかったりします.

ふるまいを記述する Behavior は, デフォルトですで に AppBarLayout にアノテーションを利用してセットされているからです.


@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {

Cross Reference: AppBarLayout.java

なので, ふるまい方の種類だけをその子である Toolbar 記述します.


<CoordinatorLayout>
  <AppBarLayout>
    <Toolbar
      app:layout_scrollFlags="scroll|enterAlways" />
  </AppBarLayout>
  <RecyclerView />
  <FLoatingActionButton />  
</CoordinatorLayout>

ここで, 動かしてみます.

20160414-191401_1

アクションバーが消えていくようになりましたね!

最後に, RecyclerView 自体も「ふるまわ」せます.

AppBarLayout のふるまい方と同じふるまい方をするように同じ Behavior をセットします.


<CoordinatorLayout>
  <AppBarLayout>
    <Toolbar
      app:layout_scrollFlags="scroll|enterAlways" />
  </AppBarLayout>
  <RecyclerView
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  <FLoatingActionButton />  
</CoordinatorLayout>

ここでいきなり現れた文字列 @string/appbar_scrolling_view_behavior は, デフォルトでセットされている


android.support.design.widget.AppBarLayout$ScrollingViewBehavior

のことです.

AppBarLayout にデフォルトで設定されているものと同じですね.

ここで, また動かしてみます.

20160414-195431_1

AppBarLayout の Behavior と同じものを RecyvlerView にもセットしたので, 同じように動きます.

スクロール時にAppBarと同じように開閉スライドすることになるので, RecyclerView との重なり合いがなくなり RecyclerView の最上段も表示されるようになりましたね!

実際の簡略化していないレイアウトを貼っておきます.


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <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/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:layout_scrollFlags="scroll|enterAlways" />
  </android.support.design.widget.AppBarLayout>
  <android.support.v7.widget.RecyclerView
      android:id="@+id/recycler_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  <android.support.design.widget.FloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginRight="16dp"
      android:layout_marginBottom="16dp"
      android:layout_gravity="right|bottom"
      android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

以上のように, レイアウトファイルだけを編集するだけで, インタラクティブな挙動を画面の要素たちに行わせることができるので, 便利な気もしますね!!

→ 少しややこしいので「まとめ」ようとしてつづく (作成中)


プログラマーのヘルプにもなる DuckDuckGo「Programming Instant Answers」

成長を続けているようです. かわいいアヒルでお馴染み(?)の.

DuckDuckGo

DuckDuckGo

こんな機能がアナウンスされています.

DuckDuckGo Blog : How we're trying to help programmers

プログラミング言語とキーワードの組み合わせを入力して検索するとヘルプのように結果が表示されます.

チートシートなども結果として準備されていたりします.

bash_time_-_DuckDuckGo

cheat_sheet_php_-_DuckDuckGo

strpos_php__PHP__-_DuckDuckGo

loop_python__Python__-_DuckDuckGo

hello_world_mysql_-_DuckDuckGo

hello_world_java_-_DuckDuckGo

hello_world_perl_-_DuckDuckGo

現在は, まだ言語によってまだばらつきがあるようですが, 多くの言語をカバーしようとしているようです.

Programming_IA_Coverage_·_duckduckgo_duckduckgo_Wiki

Programming IA Coverage · duckduckgo/duckduckgo Wiki

公開されているドキュメントをみてみるといろいろな試みをおこなっているようで非常に興味深いです.

How_Instant_Answers_Work___DuckDuckHack_Docs

How Instant Answers Work | DuckDuckHack Docs

DuckDuckGoとは?

たしか「プライバシーな情報は取得しない」というフレーズだけが聞こえてきてたように思うのですが, こちらはこちらで進化を続けていたのですね.

早くもっと大きなアヒルに育って欲しいですね.


直感的に理解する RxJava その4: Reactive Android

ReactiveX

その1, その2, その3では, RxJava がどのように機能するかを書きました. Androidアプリの開発では, それをどのように利用するのでしょうか. ここでは Android開発者に向けての実践的なことを書いてみようと思います.

RxAndroid

RxAndroid は Android用の RxJavaエクステンションで, より簡単に利用できるようバインディングなどを含んだものです.

まず最初に, AndroidScheduler です. これは, 既存の Android のもつスレッド処理を考慮したスケジューラを提供します. 別に, UIスレッド処理に関係するコードは必要ありません.
AndroidSchedulers.mainThread() を利用するだけです.


retrofitService.getImage(url)
    .subscribeOn(Schedulers.io())
    .observeOn(AndroidSchedulers.mainThread())
    .subscribe(bitmap -> myImageView.setImageBitmap(bitmap));

もし, あなたが自作の Handler を利用しているのであれば HandlerThreadScheduler を利用して スケジューラとそれをリンクしましょう.

次に, AndroidObservable には, Androidライフサイクル内で有効に利用できる機能があります. それは bindActivity() と bindFragment() です. Observable に対してAndroidSchedulers.mainThread() を使うことで自動的に追加でき, Activity や Fragment が終了した場合にはアイテムを発することを停止することができます.


AndroidObservable.bindActivity(this, retrofitService.getImage(url))
    .subscribeOn(Schedulers.io())
    .subscribe(bitmap -> myImageView.setImageBitmap(bitmap));

また, AndroidObservable.fromBroadcast() は便利です. これは, BroadcasrReceiver のように利用することができる Observable を作成できます. 以下が, ネットワーク接続状態が変化したときに通知するコードです.


IntentFilter filter = new IntentFilter(ConnectivityManager.CONNECTIVITY_ACTION);
AndroidObservable.fromBroadcast(context, filter)
    .subscribe(intent -> handleConnectivityChange(intent));

その他に, View にバインディングできる ViewObserbable が2つあります. あるタイミングで View がクリックされたというイベントを取得したい場合には ViewObserbable.clicks(), TexitView が持っているテキストの変更を監視する ViewObservable.text() があります.


ViewObservable.clicks(mCardNameEditText, false)
    .subscribe(view -> handleClick(view));

Retrofit

Android用RESTクライアントの有名なライブラリである Retrofit は RxJava をサポートしています.

通常ではコールバックを追加して非同期処理を実装します.


@GET("/user/{id}/photo")
void getUserPhoto(@Path("id") int id, Callback<Photo> cb);

RxJava を利用していれば, これの代わりに Observable を返すことができます.


@GET("/user/{id}/photo")
Observable<Photo> getUserPhoto(@Path("id") int id);

これだけで Observable に変換することができます. データを取得するだけでなく, 変換も同時に行います.

また, Retrofit は Observable に対して, 簡単に複数のRESTコールを合成することができます. 以下のサンプルでは, 写真データとそのメタデータを取得したいとします. zip を利用して取得結果を合成します.


Observable.zip(
    service.getUserPhoto(id),
    service.getPhotoMetadata(id),
    (photo, metadata) -> createPhotoWithData(photo, metadata))
    .subscribe(photoWithData -> showPhoto(photoWithData));

これに似たサンプルをその2 (flatMap() を利用) で紹介しました. 複数のREST処理は RxJava + Retrofit でこれだけ簡単に利用できるのです.

今までのコードや処理に時間のかかるコード

Retrofit は適切な Observable を返すことができることは分かりましたが, その他のライブラリを利用している場合はどうなるでしょうか. Observable に変換するコードが必要となるのでしょうか? すべてを変更せずにそのコードをどのようにして利用することができるのでしょうか ?

ほとんどの場合, そのコードから Observable を作成するには Observable.just() とObservable.from() で十分であると思います.


private Object oldMethod() { ... }

public Observable<Object> newMethod() {
    return Observable.just(oldMethod());
}

oldMethod() が短時間の処理であればこれで問題ないでしょう. しかし, 時間のかかる処理であればどうなるでしょう? Observable.just() の前に oldMethod() が実行されスレッドをブロックしてしまいます.

この問題の対応策として, 時間のかかる処理を defer() でラップするという技を私はいつも利用しています.


private Object slowBlockingMethod() { ... }

public Observable<Object> newMethod() {
    return Observable.defer(() -> Observable.just(slowBlockingMethod()));
}

このようにすると Observable が subscribe されるまでは slowBlockingMethod() から結果を返さないようになります.

ライフサイクル

最もややこしい部分です. Activity のライフサイクルに対しての操作はどうなるでしょう? 2つの問題がいつも登場します.

1.「Configuration が変更されるとき(端末の回転時など) に Subscription が継続している」

Retrofit を利用してRESTコールを行い, 外部から取得したデータを ListView に表示するとします. もし, ユーザが画面を回転させたらどうなるでしょうか? そのリクエストを継続したい場合はどうすればよいのでしょうか?

2. Observable が Context を参照したままでいるので メモリーリークが発生する.

この問題は Context を保持している Subscription が引き起こしています. View と連携しているときはわかりやすいですが, なぜか保持しています. 最終的には, たくさんのメモリーを食いつぶしてしまいます.

残念ながら, それぞれの問題には一発で解決できる方法はありませんが, 分かりやすく理解するためのいくつかのガイドラインがあります.

最初の問題は, RxJava のもつキャッシュ機能で解決できます. それを使うことで同じ Observable が重複して動かないように unsubscribe/resubscribe できます. cache() や replay() を使うことで, たとえ unsubscribe してる場合でさえ 遅延なしのリクエストを継続することができます. このことは, Activity が再作成後の新しい Subscription によりレジュームできることを意味しています.


Observable<Photo> request = service.getUserPhoto(id).cache();
Subscription sub = request.subscribe(photo -> handleUserPhoto(photo));

// ...When the Activity is being recreated...
sub.unsubscribe();

// ...Once the Activity is recreated...
request.subscribe(photo -> handleUserPhoto(photo));

注意点としては, 両方のタイミングで同じキャッシュされたリクエストを利用していることです. 遅延のないコールは一度しか行われません. どこにリクエストを保存するかはあなた次第ですが, ライフサイクルを考慮しながら, ライフサイクルの影響を受けないどこかに保存しなければなりません.

二つ目の問題は, ライフサイクルを考慮しながらの Subscription に対しての適切な unsubscribe で解決できます. これの一般的な方法は CompositeSubscription を使うことですべての Subscription を保持し, onDestroy() や onDestroyView() のタイミングに一括で unsubscribe する方法です.


private CompositeSubscription mCompositeSubscription
    = new CompositeSubscription();

private void doSomething() {
    mCompositeSubscription.add(
        AndroidObservable.bindActivity(this, Observable.just("Hello, World!"))
        .subscribe(s -> System.out.println(s)));
}

@Override
protected void onDestroy() {
    super.onDestroy();

    mCompositeSubscription.unsubscribe();
}

このように Activity/Fragment で CompositeSubscription を持つことで, それぞれを追加し, その後, 一括ですべてを unsubscribe することができます.

注意することは, 一度 CompositeSubscription.unsubscribe() するとそれは再利用できません. 再度利用する場合は 新しい CompositeSubscription を作成して利用しなければなりません.

という形でどちらの問題もコード追加で解決できます. これらのボイラープレートなしに問題を解決できる天才がいつか現れて欲しいです.

あとがき

Android についてはこれだけではありません. RxJava はこれからも更新され, Android にもさらに対応されていくでしょう. みなさんがこれらのことをさらに理解しようとするとき, RxAndroid はまだ開発中で, よいサンプルがまだありません. 私がここで提示したサンプルはこれから一年間は興味深いものになると思います.

その間, RxJava がコーディングを簡単にするだけのものだけでなく, もっとおもしろいものを探します. もしあなたがまだ納得していなければ, いつか私を見つけてください, それについてビールを飲みながら話します.

[原文] Grokking RxJava, Part 4: Reactive Android

直感的に理解する RxJava その1: 基本的な構成

直感的に理解する RxJava その2: Operator

直感的に理解する RxJava その3: リアクティブであることのメリット