Articles

Sous-classe UIView personnalisée à partir d’un fichier xib

Vues personnalisées avec outlets & actions

Donc, la bonne façon de charger des vues personnalisées à partir de fichiers xib se déroule à peu près comme suit :

Dans votre objet de vue personnalisée, vous instanciez le fichier xib exactement de la même façon que je vous l’ai dit juste ici. 👆 La seule différence est que vous n’avez pas besoin d’utiliser le tableau d’objets renvoyé par les méthodes, mais vous devez connecter vos objets de vue par le biais du constructeur d’interface, en utilisant le Propriétaire du fichier comme point de référence, plus une sortie de vue conteneur personnalisée, qui contiendra tout ce dont vous avez besoin. 🤨

// 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() }}

Donc la méthode initialize ici est juste le chargement du fichier nib avec le propriétaire de self. Après le processus de chargement terminé, vos pointeurs de sortie vont être remplis avec les valeurs appropriées du fichier xib. Il y a une dernière chose que nous devons faire. Même les vues du fichier xib sont « programmatiquement » connectées à notre objet de vue personnalisé, mais visuellement elles ne le sont pas. Nous devons donc ajouter notre vue conteneur dans la hiérarchie des vues. 🤐

Si vous voulez utiliser votre objet de vue personnalisé, il vous suffit de créer une nouvelle instance à partir de celui-ci – à l’intérieur d’un contrôleur de vue – et enfin n’hésitez pas à l’ajouter comme une sous-vue !

Un mot sur les limites, les cadres aka. les ressorts et les struts : f*ckng UGLY ! C’est deux mots. Ils sont considérés comme une mauvaise pratique, alors s’il vous plaît utilisez la mise en page automatique, j’ai un beau tutoriel sur les ancres, ils sont étonnants et les apprendre prend environ 15 minutes. 😅

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" }}

C’est tout, maintenant vous avez un objet UIView personnalisé complètement fonctionnel qui charge un fichier xib afin d’utiliser son contenu. Ce n’était pas si mal, non ? 🤪

Une dernière chose supplémentaire. Si vous n’aimez pas gérer les vues de manière programmatique ou si vous ne voulez tout simplement pas vous embêter avec la méthode loadView, supprimez-la entièrement. Ensuite, placez le mot-clé @IBOutlet juste avant votre variable de classe de vue personnalisée. Ouvrez votre storyboard en utilisant IB, puis glissez & déposez un nouvel élément UIView dans votre contrôleur et connectez la sortie de vue personnalisée. Cela devrait fonctionner comme par magie. 💫

J’ai promis des outlets et des actions dans le titre de cette section, alors parlons un peu des IBActions. Ils fonctionnent exactement de la même manière que vous vous y attendez avec les contrôleurs. Vous pouvez simplement accrocher un bouton à votre vue personnalisée et déléguer l’action à la classe de la vue personnalisée. Si vous voulez transmettre des touches ou des actions spécifiques à un contrôleur, vous devez utiliser le pattern delegate ou aller avec un simple bloc. 😎