Articles

Aangepaste UIView subklasse uit een xib bestand

Aangepaste view met outlets & actions

De juiste manier om aangepaste views uit xib bestanden te laden gaat ongeveer als volgt:

In je aangepaste view object, instantiëer je het xib bestand op precies dezelfde manier als ik je hier boven heb verteld. Het enige verschil is dat je niet de object array hoeft te gebruiken die door de methodes wordt geretourneerd, maar je moet je view objecten via de interface bouwer verbinden, met de Eigenaar van het bestand als referentiepunt, plus een aangepaste container view outlet, die alles zal bevatten wat je nodig hebt. 🤨

// note: view object is from my previous tutorial, with autoresizing masks disabledclass CustomView: View { // this is going to be our container object @IBOutlet weak var containerView: UIView! // other usual outlets @IBOutlet weak var textLabel: UILabel! override func initialize() { super.initialize() // first: load the view hierarchy to get proper outlets let name = String(describing: type(of: self)) let nib = UINib(nibName: name, bundle: .main) nib.instantiate(withOwner: self, options: nil) // next: append the container to our view self.addSubview(self.containerView) self.containerView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate() }}

Dus de initialize methode hier is gewoon het nib bestand laden met de eigenaar van self. Nadat het laadproces klaar is, zullen je outlet pointers gevuld worden met de juiste waarden uit het xib bestand. Er is nog een laatste ding dat we moeten doen. Zelfs de views van het xib-bestand zijn “programmatisch” verbonden met ons aangepast view object, maar visueel zijn ze dat niet. Dus moeten we onze container view toevoegen in de view hiërarchie. 🤐

Als je je aangepaste view object wilt gebruiken, hoef je er alleen maar een nieuwe instantie van te maken – binnen een view controller – en voel je tenslotte vrij om het toe te voegen als een subview!

Eén woord over bounds, frames aka. springs en struts: f*ckng UGLY! Dat zijn twee woorden. Ze worden beschouwd als een slechte praktijk, dus gebruik alsjeblieft auto layout, ik heb een mooie tutorial over ankers, ze zijn geweldig en het duurt ongeveer 15 minuten om ze te leren. 😅

class ViewController: UIViewController { weak var customView: CustomView! override func loadView() { super.loadView() let customView = CustomView() self.view.addSubview(customView) NSLayoutConstraint.activate() self.customView = customView } override func viewDidLoad() { super.viewDidLoad() self.customView.textLabel.text = "Lorem ipsum" }}

Dat is het, nu heb je een volledig werkend custom UIView object dat een xib bestand laad om de inhoud te gebruiken. Was niet zo slecht, toch? 🤪

Nog een extra ding. Als je er niet van houdt om views programmatisch af te handelen of als je gewoon niet wilt rotzooien met de loadView methode, verwijder die dan gewoon helemaal. Zet vervolgens het @IBOutlet sleutelwoord vlak voor je aangepaste view class variabele. Open je storyboard met IB, sleep dan & een nieuw UIView element naar je controller en verbind de custom view outlet. Het zou moeten werken als magie. 💫

Ik beloofde outlets en acties in de titel van deze sectie, dus laten we een beetje praten over IBActions. Ze werken precies hetzelfde als je zou verwachten met controllers. Je kunt eenvoudigweg een knop aan je aangepaste view koppelen en de actie delegeren naar de aangepaste view class. Als je touches of specifieke acties wilt doorsturen naar een controller, moet je het delegate patroon gebruiken of een simpel blok. 😎