CSS Spriteっぽいことを手軽にiOSでやる
やりたいこと
アトラス化(1つの画像に複数がまとまられていること)されている画像をいい感じにスライダー上に表示させたい。
具体的にはYouTubeのシークバーとサムネイルみたいなことをしたい。
できたもの
やったこと
アトラス化されている画像は下記のようなものを想定してみます。
ルールは簡単で、1枚の画像にN行*M列
枚がパッキングされているのみです。
ここから特定のindexを指定し、それをトリミングして表示させました
UIScrollViewのContentSizeとContentOffsetを使う
今回は手軽にやりたいので、UIScrollViewをViewPortの役割のために使って見ます。
やることは下記の通り
- UIScrollViewに元の画像をUIImageViewでaddSubviewする
- UIScrollViewのサイズを決める
- 元画像のサイズと元画像を基準にしたトリミングサイズを割り出す
- トリミングサイズとUIScrollViewのサイズから拡縮率を算出する
- UIImageViewのサイズに拡縮率をかける
- 表示したいindexから列の行と行を割り出し、そこにcontentOffsetを合わせる
なぜUIScrollViewをつかったか?
ほかには、元画像からトリミングした画像を生成し、UIImageViewにセットするという方法が挙げられると思います。
- 画像のキャッシュが1枚で済む(複雑なキャッシュ戦略を実装しなくていい)
- 画像の生成が走らない
この2つの利点が大きいのでは?ということで、UIScrollViewでよしなにトリミングする方法を選びました。