will and way

ただの自分用メモを人に伝える形式で書くことでわかりやすくまとめてるはずのブログ

CSS Spriteっぽいことを手軽にiOSでやる

やりたいこと

アトラス化(1つの画像に複数がまとまられていること)されている画像をいい感じにスライダー上に表示させたい。

具体的にはYouTubeのシークバーとサムネイルみたいなことをしたい。

f:id:matsuokah:20180630184049g:plain

できたもの

f:id:matsuokah:20180630184241g:plain

やったこと

アトラス化されている画像は下記のようなものを想定してみます。

f:id:matsuokah:20180630184355p:plain

ルールは簡単で、1枚の画像にN行*M列枚がパッキングされているのみです。 ここから特定のindexを指定し、それをトリミングして表示させました

UIScrollViewのContentSizeとContentOffsetを使う

今回は手軽にやりたいので、UIScrollViewをViewPortの役割のために使って見ます。

やることは下記の通り

  1. UIScrollViewに元の画像をUIImageViewでaddSubviewする
  2. UIScrollViewのサイズを決める
  3. 元画像のサイズと元画像を基準にしたトリミングサイズを割り出す
  4. トリミングサイズとUIScrollViewのサイズから拡縮率を算出する
  5. UIImageViewのサイズに拡縮率をかける
  6. 表示したいindexから列の行と行を割り出し、そこにcontentOffsetを合わせる

なぜUIScrollViewをつかったか?

ほかには、元画像からトリミングした画像を生成し、UIImageViewにセットするという方法が挙げられると思います。

  • 画像のキャッシュが1枚で済む(複雑なキャッシュ戦略を実装しなくていい)
  • 画像の生成が走らない

この2つの利点が大きいのでは?ということで、UIScrollViewでよしなにトリミングする方法を選びました。

リポジトリ

github.com