スクロールのカクつきの原因が、ジェスチャーでもレイアウトでもなかった話 | 開発ノート

めぐる日記には、同じ日付の写真を年ごとに見比べられる画面がある。左右にスワイプして年を切り替える、写真アプリのような操作感を目指して作っていたんだけど、上下にスクロールするとタイトル部分がガタガタと震えるように引っかかる現象が出ていた。

まずジェスチャーを疑った

左右スワイプでの年の切り替えと、上下スクロールが同じ画面の中で共存しているので、最初はこの2つの操作の判定がお互いに干渉しているんだと思った。スワイプの方向を最初の一瞬でしっかり固定する処理を入れたり、判定の感度を調整したりしたけど、カクつきは変わらなかった。

次にレイアウトの計算方法を疑った

画面の横幅を取得する仕組みを変えてみたらどうか、というのが次の仮説だった。試してみたところ、今度はレイアウトそのものが崩れてしまって、逆に状況が悪化した。一度その変更を取りやめて、元の状態に戻すところからやり直した。

本当の原因

落ち着いて見返してみたら、原因はもっと基本的なところにあった。写真を並べているグリッド表示に、画面に写っている分だけを効率的に描画する仕組み(スクロールする一覧などで定番の、負荷を抑えるための機能)を使っていたんだけど、このグリッドが「縦方向の高さを自動で調整する」という別の指定と組み合わさった時に、スクロールするたびに高さの再計算が何度も走ってしまい、それが引っかかりの正体だった。

効率化のための機能が、今回の使い方とはむしろ逆効果になっていた。この部分を、効率化機能を使わない普通の並べ方に変えたら、引っかかりは綺麗に消えた。

持ち帰ったこと

「効率化のための機能」は常に速くなるわけではなく、使い方によっては逆に遅くなることがある
不具合の原因は、操作(ジェスチャー)よりも表示の仕組み(レイアウト)側にあることも多い
間違った仮説で状況が悪化した時は、一度きっぱり元に戻してから、次の仮説に進んだ方が結果的に早い