Jak vizualizovat opakovaně použitelné xiby v storyboardech pomocí IBDesignable

Ve Zenchefu používáme storyboardy k navrhování ovladačů zobrazení a získání přehledu o navigaci v aplikaci.

Scénáře však nejsou skvělé pro zobrazení, která chcete použít vícekrát. Například můžete chtít použít komplexní pohled v UIViewControlleru, v UITableViewCell nebo v UICollectionViewCell.

Chcete-li se vyhnout navrhování svého pohledu pokaždé, obvykle máte 2 řešení

1. Navrhněte svůj pohled programově

Tímto způsobem si můžete vytvořit svůj pohled na IBDesignable a implementací pripraviťForInterfaceBuilder uvidíte výsledek ve svých storyboardech, když toto zobrazení zahrnete.

Je to snadné a skvělé, když váš pohled implementuje drawRect pomocí CoreGraphics.

Jakmile však získáte mnoho dílčích náhledů, stane se to nepraktickým. Omezení kódování autolayout může být bolestivé, velikostní třída ještě více. Interface Builder je výkonný a my ho chceme používat co nejvíce.

2. Navrhněte svůj pohled v Xibu

Tímto způsobem si můžete vychutnat všechny funkce Interface Builder pro automatické rozvržení, velikostní třídu a sbírku zvláštností při zachování opakovatelného zobrazení.

Pokaždé, když to potřebujete, musíte načíst váš xib a přidat pohled do hierarchie pohledu programově. Nemůžete také těžit z živých náhledů (představených v Xcode 6). Nevidíte si svůj xib ve svých storyboardech, protože v této fázi jsou všechny IBOutlet nulové. Nepodaří se vykreslit a ladicí program zobrazení vám zobrazí následující chybu:

při rozbalení volitelné hodnoty se neočekávaně našel nulový

3. Alternativní

Tady je způsob, jak zahrnout a vizualizovat xiby v storyboardech:

Krok 1 - Vytvořte kontejner pohledu

Potřebujeme vytvořit třídu obsluhy, která se chová jako kontejner, kterému říkáme XibView.

Náš XibView bude zodpovědný za načtení našeho xibu a za svůj náhled přidá náš pohled.

Má 2 atributy:

  • contentView bude pohled, který jste vytvořili ve svém xibu.
  • nibName je název vašeho souboru xib. Chceme, aby toto pole bylo přístupné inspektorem identity později v našem storyboardu.
@IBDesignable
třída XibView: UIView {

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

Při inicializaci třída:

  • načíst pohled z jeho názvu xib
  • přidat jako subview s automatickou úpravou masky pro omezení autolayout
        přepsat func awakeFromNib () {
super.awakeFromNib ()
xibSetup ()
}

func xibSetup () {
guard let view = loadViewFromNib () else {return}
view.frame = limity
view.autoresizingMask =
                    [.flexibleWidth, .flexibleHeight]
addSubview (zobrazit)
contentView = view
}

func loadViewFromNib () -> UIView? {
stráž nechat nibName = nibName else {return nil}
let bundle = Bundle (pro: type (of: self))
let nib = UINib (nibName: nibName, bundle: bundle)
návrat nib.instantiate (
                    withOwner: self,
                    možnosti: žádné) .prvé jako? UIView
}

Krok 2 - Nastavení „Vlastníka souboru xib“

Ve svém xibu nastavte vlastníka souboru pomocí třídy nástrojů, kterou jste vytvořili. Nevyžaduje žádné další změny ve vašem xibu.

Krok 3 - Přidejte xib do storyboardu

Pokud chcete ve svém scénáři použít svůj názor,

  • nastavit svou třídu jako XibView
  • v inspektoru identity nastavte vlastnost nibName jako název souboru xib

Krok 4 - Vizualizujte xib v storyboardu

Jak vidíte, stále si nemůžete představit xib ve svém storyboardu. Upravte tedy svůj XibView a přidejte následující:

přepsat func preparForInterfaceBuilder () {
super.prepareForInterfaceBuilder ()
xibSetup ()
contentView? .prepareForInterfaceBuilder ()
}

Tím dojde k okamžitému zobrazení vašeho pohledu a spustí se vykreslování IB (ujistěte se, že je také IBDesignable!)

Konečně

Tímto způsobem (opakováním kroku 3) můžete snadno přidat xib do scénáře a zobrazit je jako živé náhledy. Je to docela jednoduché. Nemá to velký dopad na váš kód. Jednoduše zapouzdří váš pohled.