Как использовать изображения NinePatch в iOS и macOS

9 января 2025 г.

Изображения NinePatch — это специализированные PNG-изображения, которые позволяют растягивать центр, но сохранять края нетронутыми, подобно самому изображению. Они отлично подходят для масштабируемых кнопок, фонов и других элементов пользовательского интерфейса. В этой статье рассказывается о том, как использовать библиотеку NinePatchKit для реализации изображений NinePatch в приложениях iOS и macOS.

Использование изображения NinePatch в iOS и macOS

1. Создание изображения NinePatch

Теперь вам нужно создать изображение NinePatch. Я рекомендую использовать инструмент 9 Patch Editor для создания вашего изображения. Процесс выглядит следующим образом:

  1. Перейдите на сайт 9 Patch Editor.
  2. Загрузите PNG-изображение, которое вы хотите преобразовать в NinePatch.
  3. Определите границы (это можно сделать, перетаскивая края) и просмотрите результат.
  4. Загрузите результирующее изображение NinePatch. В параметрах загрузки убедитесь, что установлен флажок "Сохранить как скомпилированное изображение", так как это обеспечит наличие в вашем изображении всех необходимых метаданных, чтобы оно могло быть правильно проанализировано NinePatchKit.

2. Включение изображений NinePatch в проект

Вы можете включить изображения NinePatch в свой bundle, Data Set или в любое другое место, но никогда не добавляйте их в Image Set. Во время сборки все PNG-файлы, находящиеся в Image Set, будут оптимизированы путем встраивания фрагментов CgBI и без дополнительных фрагментов, поэтому изображения NinePatch, помещенные в Image Set, больше не будут правильно функционировать при анализе формата из-за изменений, которым они подвергаются.

3. Импорт NinePatchKit

Далее вам потребуется использовать библиотеку NinePatchKit для создания и отрисовки изображений NinePatch. Эта библиотека с открытым исходным кодом предоставляет очень простой API для изображений NinePatch, упрощая их использование внутри приложений на 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. Итог

Теперь вы сможете легко использовать его в приложениях iOS и macOS, используя графику NinePatch. Используя библиотеку NinePatchKit, вы можете легко отрисовывать высококачественные растягиваемые изображения, чтобы улучшить интерфейс вашего приложения.

Примечание

  • Формат изображения: Убедитесь, что ваше изображение находится в правильном формате PNG и содержит все необходимые метаданные NinePatch.
  • Расположение изображения: Включите NinePatch в пакет ресурсов вашего проекта и загрузите его с правильным путем. Не помещайте NinePatch в Image Set, так как это может повредить формат изображения.