NinePatch 画像は、中央部分を伸縮させ、エッジ部分はそのままにする特殊な PNG 画像です。これらは、スケーラブルなボタン、背景、その他の UI 要素に最適です。この記事では、NinePatchKitライブラリを使用して、iOS および macOS アプリケーションで NinePatch 画像を実装する方法について説明します。
iOS および macOS での NinePatch 画像の使用
1. NinePatch 画像の作成
まず、NinePatch 画像を作成する必要があります。9 Patch Editorツールを使用して画像を生成することをお勧めします。手順は以下のとおりです。
- 9 Patch Editorのサイトにアクセスします。
- NinePatch に変換したい PNG 画像をアップロードします。
- 境界線を定義し（エッジをドラッグすることで可能）、結果をプレビューします。
- 結果の NinePatch 画像をダウンロードします。ダウンロードオプションで「コンパイル済みの画像として保存」オプションをチェックしてください。これにより、画像に必要なすべてのメタデータが含まれ、NinePatchKitで正しく解析されるようになります。
2. NinePatch 画像をプロジェクトに含める
NinePatch 画像は、bundle、Data Set、または任意の場所に含めることができますが、Image Setには絶対に追加しないでください。ビルド中に、Image Setに格納されているすべての png は、CgBIチャンクの埋め込みによって最適化され、追加のチャンクなしで処理されるため、Image Setに埋め込まれた NinePatch 画像は、変更によって解析形式が正しく機能しなくなります。
3. NinePatchKit のインポート
次に、NinePatch 画像を作成およびレンダリングするために、NinePatchKitライブラリを使用する必要があります。このオープンソースライブラリは、NinePatch 画像の非常にシンプルな API を提供し、iOS および macOS アプリケーション内での使用を簡素化します。CocoaPods経由でプロジェクトにリンクするか、プロジェクト内にコードを手動で追加できます。
-
CocoaPods の使用：
Podfileに次の行を追加します。pod 'NinePatchKit'次に、
pod installを実行します。 -
手動統合： NinePatchKitライブラリをダウンロードし、
NinePatchUtilsフォルダーをプロジェクトに追加します。
4. コード内での NinePatch 画像の使用
NinePatchKitを使用して、NinePatch 画像を読み込み、レンダリングできます。以下は、NinePatchImageViewでどのように使用できるかを示す簡単な例です。
#import <NinePatchKit/NinePatchKit.h>
...
NSString * path = [[NSBundle mainBundle] pathForResource:@"YourNinePatchImageName" ofType:@"png"];
NinePatchImageView * imageView = [[NinePatchImageView alloc] init];
imageView.showImage = [NinePatchUtils imageWithContentsOfFile:path];
[imageView.contentView addSubview:CustomView]; // contentViewにサブビューを追加
"YourNinePatchImageName"を、NinePatch 画像の拡張子なしの名前で置き換えます。このコードスニペットは、NinePatchImageViewを作成し、NinePatchUtilsを使用して NinePatch 画像をロードします。NinePatchImageViewはUITableViewCellに似ており、より複雑なレイアウトのために、追加のサブビューをcontentViewに追加できます。
5. まとめ
これで、NinePatch グラフィックを使用して、iOS および macOS アプリケーションで簡単に使用できるようになります。NinePatchKitライブラリを使用することで、高品質な伸縮可能な画像を簡単にレンダリングし、インターフェースの使い心地を向上させることができます。
注意
- 画像形式： 画像が正しい PNG 形式であり、必要なすべての NinePatch メタデータが含まれていることを確認してください。
- 画像の場所： NinePatch をプロジェクトのリソースパッケージに含め、正しいパスでロードしてください。NinePatch を
Image Setに入れないでください。画像形式が破損する可能性があります。