iOS
Пользовательские UIViews из XIB-файлов

замечания

Элементы проводки

Создание файла XIB

Панель меню Xcode> Файл> Создать> Файл.
Выберите iOS, Пользовательский интерфейс, а затем «Вид»:

Дайте вашему XIB имя (да, мы делаем пример Pokemon 👾).
Не забудьте проверить свою цель и нажать «Создать».

Создайте свой взгляд

Чтобы упростить задачу, установите:

• Размер: Freeform
• Строка состояния: нет
• Верхняя панель: нет
• Нижняя панель: нет

Нажмите «Размер инспектор» и измените размер представления.
В этом примере мы будем использовать ширину 321 и высоту 256.

Добавьте некоторые элементы в свой XIB-файл, как показано ниже.
Здесь мы добавим изображение (256x256) и переключатель .

Добавьте ограничения Auto-Layout, нажав «Разрешить автоматические макеты» (внизу справа) и выбрав «Добавить отсутствующие ограничения» в разделе «Все представления».

Просмотрите сделанные изменения, нажав «Показать редактор ассистентов» (вверху справа), затем «Предварительный просмотр».
Вы можете добавить экраны iPhone, нажав кнопку «Плюс».
Предварительный просмотр должен выглядеть следующим образом:

Подкласс UIView

Создайте класс, который будет управлять XIB-файлом.
Панель меню Xcode> Файл> Создать> Файл.
Выберите iOS / Source / Cocoa Touch Class. Нажмите «Далее».

Дайте классу имя, которое должно быть тем же именем, что и файл XIB (Pokemon).
Выберите UIView в качестве типа подкласса, а затем нажмите «Далее».

В следующем окне выберите цель и нажмите «Создать».

Подключите Pokemon.xib к Pokemon.swift с помощью атрибута «Владелец файла»

Нажмите на файл Pokemon.xib в Xcode.
Нажмите на кнопку «Владелец файла».
В «Инспекторе идентификации» (вверху справа) установите класс в наш недавно созданный файл Pokemon.swift.

Покемонов !!!

Да! Перетащите некоторые покемоны в свой проект, чтобы завершить нашу «инфраструктуру».
Здесь мы добавляем два файла PGN, 256x256, прозрачный.

Покажите мне код.

Хорошо, хорошо.
Время добавить код в наш класс Pokemon.swift.

На самом деле это довольно просто:

1. Внедрить необходимые инициализаторы
2. Загрузите файл XIB
3. Настройте представление, которое отобразит XIB-файл
4. Показать приведенный выше вид

Добавьте следующий код в класс Pokemon.swift:

import UIKit

class Pokemon: UIView {
    
    // MARK: - Initializers
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    // MARK: - Private Helper Methods
    
    // Performs the initial setup.
    private func setupView() {
        let view = viewFromNibForClass()
        view.frame = bounds

        // Auto-layout stuff.
        view.autoresizingMask = [
            UIViewAutoresizing.flexibleWidth,
            UIViewAutoresizing.flexibleHeight
        ]

        // Show the view.
        addSubview(view)
    }
    
    // Loads a XIB file into a view and returns this view.
    private func viewFromNibForClass() -> UIView {
        
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        /* Usage for swift < 3.x
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        */

        return view
    }
}

@IBDesignable и @IBInspectable

Добавив @IBDesignable к вашему классу, вы можете сделать это для рендеринга в Interface Builder.
Добавляя @IBInspectable к свойствам вашего класса, вы можете увидеть изменения пользовательских представлений в Interface Builder, как только вы измените эти свойства.

Давайте сделаем Image View нашего пользовательского представления «Inspectable».

Сначала подключите Image View из файла Pokemon.xib к классу Pokemon.swift.

Вызовите imageView а затем добавьте следующий код (обратите внимание на @IBDesignable перед именем класса):

@IBDesignable class Pokemon: UIView {
    
    // MARK: - Properties
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBInspectable var image: UIImage? {
        get {
            return imageView.image
        }
        set(image) {
            imageView.image = image
        }
    }

    // MARK: - Initializers
    ...

Использование пользовательских представлений

Попав в основной файл раскадровки, перетащите UIView в него.
Измените размер представления, скажем, 200x200. Централизация.
Перейдите к инспектору идентификации (вверху справа) и установите класс «Покемон».

Чтобы выбрать Pokemon, перейдите к Инспектору атрибутов (вверху справа) и выберите один из изображений Pokemon, которые вы ранее добавили, используя удивительное @IBInspectable свойства @IBInspectable .

Теперь дублируйте свой пользовательский вид Pokemon.
Дайте ему другой размер, скажем 150x150.
Выберите другое изображение Pokemon, соблюдайте:

Теперь мы добавим больше логики к этому самосогласованному пользовательскому элементу пользовательского интерфейса.
Кнопка позволяет включать / отключать Pokemons.

Создайте IBAction от кнопки Switch до класса Pokemon.swift.
Вызвать действие вроде switchTapped .
Добавьте к нему следующий код:

// MARK: - Actions

@IBAction func switchTapped(sender: UISwitch) {
    imageView.alpha = sender.on ? 1.0 : 0.2
}

// MARK: - Initializers
...

Конечный результат:

Вы сделали!
Теперь вы можете создавать сложные пользовательские представления и использовать их в любом месте.
Это повысит производительность при изоляции кода в автономных элементах пользовательского интерфейса.

Окончательный проект можно клонировать в Github.
( Обновлено до Swift 3.1 )

Как сделать пользовательский повторно используемый UIView с помощью XIB

В следующем примере показаны шаги, связанные с инициализацией представления из XIB.

Это не сложная операция, но необходимо выполнить точные шаги, чтобы сделать это правильно в первый раз, избегая исключений.

Как работает loadNibNamed

Основные шаги:

1. Создать XIB
2. Создать класс .h и .m
3. Определение точек в .h
4. Подключите розетки между .h и XIB

См. Прилагаемый скриншот:

5. Вызывать loadNibNamed внутри функции initWithCoder файла .m. Это необходимо для того, чтобы вы могли напрямую разместить объект UIView в файл раскадровки / родительского UIView XIB и определить его как свое собственное представление. При загрузке раскадровки / родительского XIB другого кода инициализации не требуется. Пользовательский вид может быть добавлен к другим представлениям, как и другие встроенные объекты Objective C view, заданные в XCode.