記事画面のコメント下に広告を仕込んでみましょう

[ymnder]

記事画面を最後までスクロールしたときに、ダミーの広告を表示します。フッター要素としてアイテムを追加しましょう。

[ymnder]

記事画面には記事とコメントが表示されています。
コメントを最後までスクロールした場合に、画面の最下部に広告が表示されるようにしましょう。
広告はダミーのものを表示します。

step1: RecyclerViewを知る
RecyclerViewは簡単に言うとリストを表示できるViewです。
RecyclerViewには、Adapterというものをセットする必要があります。
Adapterの中では�、データと描画要素の紐付けが行われます。
紐付はViewHolderという単位で行われ、１つのデータに１つのViewHolderが対応します。

CommentAdapterがどのようにコメントのデータとViewを紐付けているかを見てみましょう。

step2: ViewHolderを追加する
このリポジトリの設計では、直接Adapterに List<Item?> を追加しています。
ViewModelのようにListItemを抽象的な形で表現していません。
Itemを抽象化し、外でフッターとなるアイテムを追加し、Adapterは渡されたアイテムの紐づけに徹するという実装がきれいそうです。
しかし、とりあえずフッターが必要なだけですので、Adapterの中だけでできる簡易的な修正だけで対応を行ってみます。

まず、 recyclerview footer と検索をしてみます。
addFooterのようなメソッドがあればよかったのですが、RecyclerViewには存在しません。
そこで、フッターを表示するための新しいViewHolderを追加します。
既にあるViewHolderを参考に、FooterViewHolderを定義してみましょう。

次にonCreateViewHolderとgetItemViewTypeを修正します。
今までは１種類のデータしか考える必要がありませんでしたので、常に同じViewHolderを返却していました。
これからはviewTypeをコメントデータを 0、フッターを 1として区別して定義して扱います。

onCreateViewHolderではviewTypeが引数として渡されますので、対応したViewHolderを返すようにします。
onBindViewHolderも同様に、viewTypeに応じてdataをbindするようにします。

getItemViewTypeでは、viewTypeを返すロジックを書きます。
フッターは、コメントの最後に表示するアイテムです。
コメントよりも後に表示されるので、コメント + 1 の位置に表示できれば良さそうです。
今のリストアイテムのpositionがコメントのデータ数より小さい場合、 position < comments.size の場合に0を、超える場合は1を返すことでデータの区別を行うようにします。

コメントサイズよりもフッターの分１つデータが増えています。
そこで、getItemCountも comments.size + 1 しておきましょう。

RecyclerViewだけで完結させて新しいViewを表示できたか確認しましょう。

step3[extra]: ViewHolderでなくViewModelを定義します。
今後もしかしたらヘッダーや他のフッター、ABテストで異なるViewを表現するなど仕様が複雑になる可能性があります。
この場合、Adapterの責務が増え見通しが悪くなってしまいます。
そこで、外でリストアイテムを抽象化したViewModelを定義し、Adapterに渡すようにします。
この手法をとると、ViewModelが正しい順番で生成できているかユニットテストを書けます。