IOS розширене використання UIImage - AZOFT блог
Жодна розробка iOS-програми не обходиться без UIImage. Це і іконки кнопок, і фонові зображення, і багато іншого. Але не всі розробники знають, яким потужним та функціональним інструментом може стати це простий об'єкт, якщо підійти до нього з правильного боку. Декілька таких «сторон» я вам сьогодні розкрию. Забігаючи вперед скажу, що мова піде про заливання фону текстурою, створення «гумових» елементів інтерфейсу, наприклад, кнопок, зміну зображень та накладення масок.
Почну з функції «Замостити». Можна довго вивчати документацію до UIImage і UIImageView, але не знайти відповіді питання, як розмножити картинку межах заданого поля. Відповідь може здатися дивною — нам потрібна UIColor, точніше, її метод colorWithPatternImage. Наведений нижче код заливає фон поточного зображення текстурою:
Наступна досить корисна можливість UIImage – створення «гумових» картинок.
Допустимо, потрібно нам зробити кілька кнопок однакового вигляду, але різного розміру, або повісити значок на кшталт того, що висить над іконками додатків або показується в панелі вкладок. Щоб не створювати кожну кнопку окремо, а зробити, щоб зображення самі підлаштовувалися під потрібний розмір просто пропишемо:
Зображення кнопки у ресурсах:
Цей метод використовується при розробці будь-яких серйозних програм. Крім того, що його зручно використовувати для модифікації однакових ресурсів, він значно скорочує розмір програми.
До речі, деякі контролери, наприклад UIImageView, дозволяють задавати параметри розтягування прямо в InterfaceBuilder (група Stretching розділу View, вкладці Attributes). Працює це не для всіх елементів UI, і ті жкнопки ніяк не реагують на зміну цих параметрів, але все досить просто.
Тепер у коді можна використовувати наступну конструкцію:
В результаті у нас вийшло:
Насправді, ми нічого не вирізатимемо, а застосуємо до зображення маску. Маска – це спеціальне чорно-біле зображення, що збігається за розмірами з оригінальним. Звертаю вашу увагу, що зображення має бути саме чорно-білим (режим Grayscale у Photoshop). Це дуже важливий момент, інакше фокус не вдасться. Чим чорніший піксел, тим менш прозорим буде зображення під маскою. Тобто. зовсім білий – повна прозорість, сірий – напівпрозорість, зовсім чорний – немає прозорості. До зображення маски є ще одне вимога: у ньому має бути прозорості, тобто. альфа-канал необхідно вимикати. Інакше маска не буде застосована до вихідного зображення. Ідеальний варіант - зберегти зображення маски у форматі, який не підтримує прозорість взагалі, наприклад, JPG.
Доробляємо наш код у ViewController:
У результаті отримуємо:
Є, щоправда, один невеликий підводний камінь, але про нього розповім трохи пізніше.
Зрештою, робимо завершальний штрих - додамо рамку. У цьому нам допоможе наступний метод:
Знову допрацьовуємо контролер:
Ось результат усіх наших зусиль:
А тепер той самий підводний камінь, про який я говорив. Іноді буває ситуація, коли вихідне зображення з якихось причин немає альфа-каналу. Зазвичай він і не потрібний, але в процесі обробки такого зображення можуть виникати небажані артефакти у вигляді чорних полігонів там, де має бути прозорість. У тестовому проекті відтворити таку ситуацію не вдалося, але насправді такі випадкизустрічаються, переважно на iOS 4.3 (таке відчуття, що у фреймворках Apple завівся баг, але в 5.0 його вже виправили).
Щоб вирішити цю проблему, потрібно додати в зображення альфа-канал, що відсутній. Але це досить трудомістка операція, вдаватися до якої слід лише у виняткових випадках. При цьому потрібно якомога кешувати підсумкове зображення.