こんにちは。名古屋スタジオでアプリエンジニアをしております山下と申します。
アプリエンジニアの仕事の一つとして、アプリのUI実装があります。UIにはボタン、テキストボックスなど色々ありますが、今回はスクロールを実装する際の注意点などを経験談を元に書いてみようと思います。
スクロールとは
スクロールは主に画面に収まらない情報を表示する際に使われるUIの一種です。映りきらない情報についてはスワイプをすることで表示領域を操作して見れるようにするというもので、よく使用されます。
しかし、スクロールは表示させるデータの数によって実装方法を合わせないと動作が重いなどの問題が起きるため注意が必要です。
全てのリストを最初に生成するスクロールの場合
スクロール実装の方法の1つとして、全てのリストを最初に生成するスクロールについて取り上げてみます。
図で書くと上の通りになります。
もし表示させるリストの数が多くなる見込みがない場合であればこれで問題はないですが、数が多い場合は以下の問題が発生します。
- 作るリストの量が多くなり、メモリを大きく消費してしまう
- 描画する量が多いので、表示できる状態になるまで時間がかかる
メモリを大きく消費すると端末のスペックによっては動作がカクついてしまったり、場合によっては使用するメモリの量が増えすぎてしまって最悪クラッシュするなど大きな支障が出てしまいます。
実装時点では表示するリストの数が少なくても、今後大きく増える可能性がある場合はそれを見込んだ実装をする必要があります。
このスクロールの問題点としましては、その時点で表示されない部分のリストも作ってる点となります。
リスト10個のスクロールを上図で示します。初期状態ではリスト1~5は表示領域(赤枠)に入っておりますが、6~10は入っておりません。このように表示されない部分まで作ってしまうとメモリを無駄に消費している部分が出てしまい、それは表示するリストの数が多くなればなるほど大きくなります。
リストを使い回すスクロール
上記の解決方法の１つとしまして、リストを使い回す方法があります。
その手順を下記に示します。
- 作るリストの数は表示されるもののみに止める
表示領域に入っているもののみについてリストを作成し、表示領域外についてはデータだけ持っている状態でリストは作成しないようにします。上図ではリスト1~5までは表示領域内なのでリストを作り、リスト6以降は表示領域外なのでこの時にはリストは作らず情報として持っている状態とします。
- 表示領域の外になったタイミングでリストを初期化し、破棄せずに残しておく
表示領域に入っているものが操作によって表示領域外になった場合は表示に使用していたリストを初期化します。ただし、それを後に使い回すため破棄はせず保持しておきます。上図ではリスト1が操作によって表示領域の外になった場合に使用していたリストを初期化し未使用のリスト一覧として保持している流れをイメージにしてます。
- 表示領域の内に入ったら初期化されて残っているものがあればそれを使い回す。(もし残っているものがなかったらそのときだけリストを新規で作る)
表示領域外のものが表示領域内に入った際に未使用のリストがないかを確認して、あればそれに対して表示する情報を設定します。上図ではリスト6が操作によって表示領域内になった場合に未使用のリストがあるのでそれに対して表示する情報を設定して使用するようにしております。
このようにすることで、表示する情報の量に左右されずに必要最小限のリストの数でスクロールを実装ができ、メモリを大きく消費する点は解消され、データ数が大きくなっても対応できます。
実際に実装してみて思ったこと
以降ではリストを使い回すスクロールを実際に実装した際に思った事を書いてみます。上記のリストを使い回すスクロールは表示するデータ量に左右されないので処理パフォーマンスでは優れているのですが、一方以下の点が個人的に大変でした。
-
リストに表示させる情報の種類を理解した上で初期化処理を考えないと、意図しない表示不具合につながる。
→ リストにどんな情報を表示させるか、特定の条件時には非表示にする部分があるかなどリストの作りを理解した上で初期化する処理を考える必要があります。
→ 注意しないとスクロールして戻した際に本来表示されるべき情報が消えていたり、非表示になるべき情報が表示されたりなどの不具合に繋がります。
→ 表示する情報のパターンが少ない場合はまだしも、多い場合は特に注意したい項目となります。 -
リストにアニメーションがある場合、再生タイミングを調節する処理がないとアニメーションがずれてしまう。
→ アニメーションの再生をスタートするタイミングを調節するものがないと、リスト間でアニメーションの再生にズレが発生してしまい、見た目的には綺麗にはならなくなってしまいます。 -
動作確認のテストケース数が増える
→ 使い回す処理が問題なく稼働しているかも見る必要が出るためテストにかかる時間が増えてしまいます。
→ どのタイミングでどのリストが使い回されるかもしっかり確認した上で行わないと、たまたま問題ないように見えてしまって気づかないという事も起きてしまうため特に注意して見る必要があります。
まとめ
今回は2種類のスクロールの実装方法に関して書いてみました。
表示する情報の数を後で増やしたくなることはよくある話であるため、データ数が大きくなっても問題ないように工夫を加えた実装する方が望ましいです。しかし一方で実装をする際はしっかり確認等を行った状態でなければ意図しない不具合に繋がるリスクは大きくなります。そのため実装は画面の仕様によって使い分けていくのが個人的に良いと考えます。