Как использовать раскадровку для создания и предварительного просмотра пользовательских представлений?

Xcode и Swift (Objective-C to) позволяют создавать пользовательские UIView, такие как пользовательские UIButton или пользовательские UITableViewCells. Вы можете нарисовать свое представление в раскадровке и использовать настраиваемый класс UIView для определения свойств вашего нового представления. Но в большинстве случаев вам нужно использовать это представление во многих местах вашего приложения. Как лучше всего этого добиться? Я дам вам свой метод достижения этого.

Создайте собственный класс с XIB

Сначала нам нужно создать наш собственный класс UIView. Я хочу, чтобы этот класс можно было редактировать с помощью Interface Builder (IB). Добавьте файл в свой проект «Файл → Новый → Файл…». В окне добавления нового файла выберите «Просмотр» в категории «Пользовательский интерфейс».

Затем нам нужно создать класс для добавления наших настраиваемых свойств. Добавьте в проект еще один файл «Файл → Новый → Файл…». В окне добавления нового файла выберите «Swift File» в категории «Источник».

Нарисуйте свой вид с помощью Interface Builder

Откройте файл просмотра MyButton.xib. Как видите, вид равен размеру экрана устройства. Сначала выберите вид в инспекторе объектов IB и удалите его.

Теперь добавьте кнопку в XIB, как обычно. И настраивайте его, как хотите. В моем случае мне нужна такая кнопка:

Жирный шрифт и белый цвет текста
Красный фон
Белая граница 2 пикселя

Как вы знаете, мы не можем редактировать слой с помощью Interface Builder, поэтому нам нужно закодировать нашу белую границу размером 2 пикселя. Для этого нам нужно написать наш собственный класс MyButton.swift.

Пользовательский класс MyButton

Откройте MyButton.swift. Файл полностью пуст, поэтому добавьте UIKit и класс.

import Foundation
import UIKit
class MyButton: UIButton {
}

Следующим шагом нам нужно установить владельца файла. В WIB на левой панели выберите File’s Owner и установите MyButton как Custom Class.

Затем подключите кнопку к классу с помощью IBOutlet, как обычно. В моем случае я даю кнопке имя «просмотр».

Чтобы использовать всю магию IB, мы добавляем в начало класса атрибут «@IBDesignable». Это позволяет рисовать и предварительно просматривать текущий класс в IB. Каждое изменение кода будет сразу видно в IB. Классно, правда?

Затем вы добавляете свои функции инициализации для создания экземпляра класса. «@IBDesignable» требует использования init (frame: CGRect) для правильной работы. Затем добавьте функцию настройки, чтобы настроить наш вид. Не забудьте добавить белую рамку в init, это и есть цель!

Вам просто нужно «связать» xib с классом, выбрав MyButton в атрибуте класса в Identity Inspector. Если все в порядке, XIB и класс будут автоматически скомпилированы XCode. Вы должны увидеть «Успешно», а сообщение об ошибке не появится.

Выполнено! Вот и волшебство ...

Теперь в основной раскадровке добавьте кнопку, измените тип на «Пользовательский» и примените класс «MyButton».

С помощью этой техники вы можете раздвинуть границы дизайна с помощью Storyboard и даже создать свой собственный фреймворк на основе компонентов UIKit. Это экономит много времени и особенно упрощает обслуживание вашего приложения.

Как использовать раскадровку для создания и предварительного просмотра пользовательских представлений?