CATiledLayer

Updated
Mar 24, 2021 3:54 AM
Created
Mar 24, 2021 2:15 AM
Tags
Keywords
Date

CATiledLayerとUIScrollViewを使って、超巨大な画像を表示するサンプル - 24/7 twenty-four seven

(参考) 無為空間 |タイルビューの挙動確認用サンプル CATiledLayerとUIScrollViewを組み合わせて、巨大な画像をスムーズにスクロールして表示するサンプルです。 表示する画像はこちらを使用しました。 Garden | photo page - everystockphoto 画像の大きさは2448x3264です。 大きな画像を一度に読み込むとメモリが足りなくなるので、あらかじめ小さな単位に分割しておきます。 画像の分割は GraphicConverterなどを使用すると簡単です。 分割した画像を、画面に表示される部分だけ読み込むので、ファイル名を規則的に付けておきます。 GraphicConverterなら、自動的にimage-01-01.jpg, image-01-02.jpg, ...のような名前に自動的に付けてくれます。 今回は、タテ、ヨコそれぞれ10分割にしました。 分割後の画像サイズは245x327です。 まず、表示レイヤーにCATiledViewを使用するビュー(TiledView)を作成します。 + (Class)layerClass { return [CATiledLayer class]; } ビュー全体のサイズに、もとの画像サイズを指定します。 タイル1つぶんのサイズに分割後の画像サイズを指定します。 TiledView *tiledView = [[TiledView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 2448.0f, 3264.0f)]; tiledView.tiledLayer.tileSize = CGSizeMake(245.0f, 327.0f); TiledViewをスクロールビューのサブビューとして設定します。 scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0f,

CATiledLayerとUIScrollViewを使って、超巨大な画像を表示するサンプル - 24/7 twenty-four seven