DiffUtil で簡単に RecyclerView を更新する

list_mail

例えば, RecyclerView で一覧を作成して表示しているとして


1. 田中一郎
2. 佐藤二郎
3. 鈴木三郎
....

サーバなどに問い合わせて取得された以下データ


1. 田中一郎
2. ジローラモ
3. 鈴木三郎
...

を一覧画面に反映させたい場合.

RecyclerView.Adapter に更新を通知する場合,

RecyclerView.Adapter | Android Developers

notify*() のうちアイテムの更新に関するものは


notifyDataSetChanged()
notifyItemChanged(int position, Object payload)
notifyItemChanged(int position)
notifyItemRangeChanged(int positionStart, int itemCount, Object payload)
notifyItemRangeChanged(int positionStart, int itemCount)

ですが, それぞれ以下の面倒な部分がありました.


notifyDataSetChanged()

→ 変更部分のみに関してのアニメーションが表示されない.


notifyItemChanged(int position, Object payload)
notifyItemChanged(int position)
notifyItemRangeChanged(int positionStart, int itemCount, Object payload)
notifyItemRangeChanged(int positionStart, int itemCount)

→ アニメーションは表示されるが, 変更部分の position を計算して渡す必要がある.

その他 hasStableIds() と Loader を使ったりなど面倒でしたよね.

DiffUtil を使う

support-library-v7 24.2.0 で登場の DiffUtil を使いましょう.

DiffUtil | Android Developers

コールバッククラス作成後, それを使った更新メソッドを Adapter 内に記述します.

MyDiffUtilCallback.java


public class MyDiffUtilCallback extends DiffUtil.Callback{

    List<Person> oldPersons;
    List<Person> newPersons;

    public MyDiffUtilCallback(List<Person> oldPersons, List<Person> newPersons) {
        this.oldPersons = oldPersons;
        this.newPersons = newPersons;
    }

    @Override
    public int getOldListSize() {
        return oldPersons.size();
    }

    @Override
    public int getNewListSize() {
        return newPersons.size();
    }

    @Override
    public boolean areItemsTheSame(int oldItemPosition, int newItemPosition) {
        return oldPersons.get(oldItemPosition).id == newPersons.get(newItemPosition).id;
    }

    @Override
    public boolean areContentsTheSame(int oldItemPosition, int newItemPosition) {
        return oldPersons.get(oldItemPosition).equals(newPersons.get(newItemPosition));
    }

    @Nullable
    @Override
    public Object getChangePayload(int oldItemPosition, int newItemPosition) {
	// some additional information
        return super.getChangePayload(oldItemPosition, newItemPosition);
    }
}

MyRecyclerViewAdapter.java


public void updateList(ArrayList<Person> newList) {
        DiffUtil.DiffResult diffResult = DiffUtil.calculateDiff(new MyDiffUtilCallback(this.persons, newList));
        diffResult.dispatchUpdatesTo(this);
}

これで, アイテムのポジションの計算はおまかせにして, 同時に綺麗なアニメーションが変更部分に適用されます.

実際, データ量が多い場合は厳しいようなので, RxJava なら メインスレッドにて以下.


@Override
public void onNext(DiffUtil.DiffResult result) {
    result.dispatchUpdatesTo(mProductAdapter);
}

kotlinなら同様に以下。


internal class DiffUtilCallback(
    private val oldItems: List<Item>,
    private val newItems: List<Item>
) : DiffUtil.Callback() {

  override fun getOldListSize() = oldItems.size

  override fun getNewListSize() = newItems.size

  override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int)
      = oldItems[oldItemPosition].id == newItems[newItemPosition].id

  override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int)
      = oldItems[oldItemPosition] == newItems[newItemPosition]
}

以下のように使うと便利かもしれません.

リアクティブにデータ更新検知して自動画面更新させる


リアクティブにデータ更新検知して自動画面更新させる

Square 生まれのライブラリを使います.

SQLBrite

square/sqlbrite: A lightweight wrapper around SQLiteOpenHelper which introduces reactive stream semantics to SQL operations.

SQLiteOpenHelper をラップするように使い, ContentProvider(ContentResolver) のように更新を通知する役割を担当します.

SQLBrite__A_Reactive_Database_Foundation

SQLBrite: A Reactive Database Foundation

RxJava と連携させて使いましょう.


SqlBrite sqlBrite = SqlBrite.create();
BriteDatabase db = sqlBrite.wrapDatabaseHelper(openHelper, Schedulers.io());

// 対象テーブル名を含むSQLクエリーを登録
Observable<Query> users = db.createQuery("users", "SELECT * FROM users");
final AtomicInteger queries = new AtomicInteger();

// データ更新を監視して受け取る
users.subscribe(new Action1<Query>() {
  @Override public void call(Query query) {
    queries.getAndIncrement();
  }
});


System.out.println("Queries: " + queries.get()); // Prints 1

db.insert("users", createUser("jw", "Jake Wharton"));
db.insert("users", createUser("mattp", "Matt Precious"));
db.insert("users", createUser("strong", "Alec Strong"));

System.out.println("Queries: " + queries.get()); // Prints 4

このしくみを利用すると,

CursorLoader + ContentProvider

の部分を

RxJava + SQLBrite

で置き換えてリアクティブに記述できます.

MVP実装の例

googlesamples/android-architecture at dev-todo-mvp-rxjava

Observable を DataSource で作成して,

TasksLocalDataSource.java:77


    @Override
    public Observable<List<Task>> getTasks() {
        String[] projection = {
                TaskEntry.COLUMN_NAME_ENTRY_ID,
                TaskEntry.COLUMN_NAME_TITLE,
                TaskEntry.COLUMN_NAME_DESCRIPTION,
                TaskEntry.COLUMN_NAME_COMPLETED
        };
        String sql = String.format("SELECT %s FROM %s", TextUtils.join(",", projection), TaskEntry.TABLE_NAME);
        return mDatabaseHelper.createQuery(TaskEntry.TABLE_NAME, sql)
                .mapToList(mTaskMapperFunction);
    }

Repository 経由させて,

TaskRepository:96


    @Override
    public Observable<List<Task>> getTasks() {
        // ...
        if (mCacheIsDirty) {
            return remoteTasks;
        } else {

            // Query the local storage if available. If not, query the network.
            Observable<List<Task>> localTasks = mTasksLocalDataSource.getTasks();
            return Observable.concat(localTasks, remoteTasks).first();

        }
    }

Presenter 上で subscribe しておけば,

TaskPresenter:104


        Subscription subscription = mTasksRepository
                .getTasks()
                .flatMap(new Func1<List<Task>, Observable<Task>>() {
                    @Override
                    public Observable<Task> call(List<Task> tasks) {
                        return Observable.from(tasks);
                    }
                })
                .filter(new Func1<Task, Boolean>() {
		  // ...
                })
                .toList()
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Observer<List<Task>>() {
                    @Override
                    public void onCompleted() {
                        mTasksView.setLoadingIndicator(false);
                    }

                    @Override
                    public void onError(Throwable e) {
                        mTasksView.showLoadingTasksError();
                    }

                    @Override
                    public void onNext(List<Task> tasks) {
                        processTasks(tasks);
                    }
                });

データベースで対象テーブルに更新されるとすぐに自動的に再読み込みが実行されて画面が更新されます.

MVP に CursorLoader を利用すると, Presenter で受け取るコールバックが煩雑になりやすいのでこれを使うと便利です.

DiffUtil で簡単に RecyclerView を更新する


いまどきの MVP 実装パターンを眺めるべし「Android Architecture Blueprints」

このような, 質問がありました.

こんにちは。

私はアプリの開発を2年ほどやっているものです。
しかし, いつも似たようなコードの繰り返しばかりで少しも進歩していないように思っています。

小さい会社なので, モバイルアプリ開発者は私だけで, だれも私のコードを見ることがないので, 私のコードの間違いを指摘されることはなく, 会社で開発されている他のコードを見ることもありません。

最新技術を利用しすばらしい実装を行っているオープンソースアプリのコードを勉強したいです。

そのようなアプリをどこで見つけたらよいか教えて下さい。

よろしくお願いいたします。

I would like to study some up-to-date open source apps, preferably with material design, do you have any suggestions? : androiddev

このような環境で日々を過ごし, 似たようなことを考えてる開発者は多いと思います。

以下のサイトはいかがでしょうか. よくある ToDo アプリでのサンプルとなっています.

Android Architecture Blueprints [beta] - A collection of samples to discuss and showcase different architectural tools and patterns for Android apps.

ここでフォーカスされているのは, 構造, 設計, テスト, メンテナンスのしやすさですが, リファレンスとして, または, アプリ開発のスタート地点として利用できます.

MVP (基本的な Model-View-Presenter)

googlesamples/android-architecture at todo-mvp

このサンプルはすべての基本となります. 構造を持つフレームワークを使わないシンプルな Model-View-Presenter パターンの実装例です. ローカル/リモートのデータソースである Repository を手作業で Dependency Injection しています. 非同期処理はコールバックを利用しています.

mvp

MVP + Loader

googlesamples/android-architecture at todo-mvp-loaders

Repository から Loader を使ってデータを取得します.

- コールバックなしで Repository 内のデータを非同期で読み込むことができる.
- データソースを監視しており, Repository の内容が変化すると新しい結果として配送できる.
- 画面回転のあと自動的に直近の Loader を再接続できる.

mvp-loaders

MVP + Loader + ContentProvider

googlesamples/android-architecture at todo-mvp-contentproviders

Repository からのデータ取得に ContentProvider を使います.

- 構造化されたデータへのアクセス操作可能.
- 別プロセスで稼働しているコードからデータへ接続できる標準的なインターフェースとなる.

mvp-contentproviders

MVP + DataBinding

googlesamples/android-architecture at todo-databinding

DataBiding ライブラリを利用して, UI要素にデータとアクションをバインドしています. 厳格には Model-View-ViewModel や Model-View-Presenter パターンではありません. ViewModel と Presenter 両方使用しています.

DataBinding ライブラリは, データとUI要素を連携する重複するコードを削減してくれます.

- レイアウトファイルがUI要素へのバインドに利用されている.
- 同時にイベントもアクションハンドラーと結合されている.
- データの監視が可能で必要であるときには自動で更新するようにセットすることができる.

mvp-databinding

MVP + Clean Architecture

googlesamples/android-architecture at todo-mvp-clean

Clean Architecture に基づいており, Presentation と Repository レイヤーの間に Domain レイヤーが存在して, アプリを3つのレイヤーに分けています.

Domain レイヤーでは, すべてのビジネスロジックを収納しており, Presenter に使われる use-case か interactor と命名されたクラスから始まる. これらの use-case は Presentation レイヤーから作ることができるすべての実装可能なアクションを提供します.

mvp-clean

その他

その他, 最近流行のフレームワークや考え方を考慮しての実装サンプルも続々と作成中のようです.

Architecture Blueprints の非同期処理実装にみる Android SDK の方向性

MVP + Dagger2
MVP + RxJava
MVP + Fragmentなし

非常に柔軟性のある使えるサンプルとなると思われます. ぜひご確認あれ.

Architecture Blueprints の非同期処理実装にみる Android SDK の方向性

Hacker News Radio (翻訳) - Google Play の Android アプリ