Как да визуализирате xibs за многократна употреба в дъските с помощта на IBDesignable

В Zenchef използваме дънни карти, за да проектираме контролери за изглед и да получим преглед на навигацията в приложението.

Въпреки това, дъските за разказване не са чудесни за изгледи, които искате да използвате няколко пъти. Например, може да искате да използвате сложен изглед в UIViewController, в UITableViewCell или в UICollectionViewCell.

За да избегнете проектирането на вашия изглед всеки път, обикновено имате 2 решения

1. Проектирайте изгледа си програмно

По този начин можете да направите своя изглед IBDesignable и като внедрите PrepaForInterfaceBuilder ще видите резултата в своите дъски с карти, когато включите този изглед.

Лесно и чудесно е, когато изгледът ви реализира drawRect, използвайки CoreGraphics.

Въпреки това, щом получите много подвидове, това става непрактично. Кодирането на ограниченията на автоматичното разпределение може да бъде болезнено, клас на размерите дори повече. Interface Builder е мощен и искаме да го използваме колкото можем.

2. Проектирайте изгледа си в Xib

По този начин можете да се насладите на всички функции на Интерфейс Builder за автоматично оформление, клас на размерите и събиране на черти, като същевременно поддържате изгледа си за многократна употреба.

Въпреки това, всеки път, когато имате нужда, трябва да заредите своя xib и да добавите изгледа към вашата йерархия на изгледа програмно. Освен това не можете да се възползвате от изгледи на живо (въведени в Xcode 6). Няма да визуализирате своя xib в своите дъски с карти, тъй като на този етап всички IBOutlet са нулеви. Той няма да се представи и отстраняването на грешки в изгледа ще ви даде следната грешка:

неочаквано намерен нула, докато разгръщате опционална стойност

3. Алтернатива

Ето тук е начин да включите и визуализирате xibs в дъските за разказване:

Стъпка 1 - Създайте контейнер за изглед

Трябва да създадем полезен клас, който се държи като контейнер, който наричаме XibView.

Нашият XibView ще бъде отговорен за зареждането на нашия xib и ще добави изгледа ни като негов подвид.

Има 2 атрибута:

  • contentView ще бъде изгледът, който сте създали във вашия xib.
  • nibName е заглавието на вашия Xib файл. Искаме това поле да бъде достъпно от инспектора за самоличност по-късно в нашата история.
@IBDesignable
клас XibView: UIView {

var contentView: UIView?
@IBInspectable var nibName: String?

При инициализация класът ще:

  • изглед на зареждане от името му xib
  • добавете като подвиждане с автоматизираща маска за ограничения на автоматичното извеждане
        отменя func awakeFromNib () {
super.awakeFromNib ()
xibSetup ()
}

func xibSetup () {
пази нека изглед = loadViewFromNib () else {return}
view.frame = граници
view.autoresizingMask =
                    [. гъвкава ширина,. гъвкава височина]
addSubview (виж)
contentView = изглед
}

func loadViewFromNib () -> UIView? {
пази нека nibName = nibName else {return nil}
нека bundle = Bundle (за: type (of: self))
нека nib = UINib (nibName: nibName, bundle: bundle)
върнете nib.instantiate (
                    със собственик: самостоятелно,
                    опции: нула). първо като? UIView
}

Стъпка 2 - Настройване на xib „Собственик на файл“

Във вашия xib настройте собственика на файла с класа на полезност, който сте създали. Не изисква никакви други промени във вашия xib.

Стъпка 3 - Добавете xib към таблото за снимки

В разказването си, когато искате да използвате изгледа си,

  • задайте своя клас като XibView
  • задайте свойството nibName като ваше име на Xib файл в инспектора за идентичност

Стъпка 4 - Визуализирайте xib в таблото за снимки

Както можете да видите, все още не сте в състояние да визуализирате xib във вашата история. Затова редактирайте своя XibView и добавете следното:

отменя функцията за подготовкаForInterfaceBuilder () {
super.prepareForInterfaceBuilder ()
xibSetup ()
contentView? .prepareForInterfaceBuilder ()
}

Това ще разшири вашето виждане, както се вижда по-рано и ще задейства визуализация на IB (уверете се, че е и IBDesignable!)

накрая

По този начин (като повтаряте стъпка 3) можете лесно да добавите xib към вашата табла за снимки и да ги видите като Live Views. Това е доста ясно. Няма огромно влияние върху кода ви. Той просто капсулира вашия изглед.