Créer une étiquette associée à des boutons sur des clics par programmation

Question

Supposons que j'ai un champ de texte et un bouton. Il existe un associé IBaction avec le bouton et le champ de texte.

Lorsque le bouton est cliqué, il crée une étiquette avec le texte tapé dans le champ de texte. Et en même temps, créez des boutons à côté du champ d'étiquette. (comme les boutons de lecture ou de pause)

Il est facile d'ajouter un élément statique, il suffit de le faire glisser et déposer. Mais je ne sais pas comment ajouter ces éléments de l'interface utilisateur par programmation avec la mise en page et les contraintes.

S'il vous plaît m'en dire plus à ce sujet ou de fournir des liens vers moi.

Answer 1

Il devrait y avoir différentes façons d'atteindre votre objectif. Voici un exemple d'ajout de sous-vues contenant un libellé et un bouton et des contraintes à la sous-vue. Les valeurs par défaut textField et button sont ajoutées dans le storyboard.

import UIKit 

class ViewController: UIViewController { 

    @IBOutlet weak var textField: UITextField! 
    @IBOutlet weak var button: UIButton! 

    var lastY: CGFloat = 100 

    override func viewDidLoad() { 
     super.viewDidLoad() 
    } 

    @IBAction func buttonClicked(_ sender: UIButton) { 
     let contentView = UIView() 
     addViewsTo(contentView) 
     contentView.translatesAutoresizingMaskIntoConstraints = false 
     view.addSubview(contentView) 

     // Add size constraints to the content view (260, 30) 
     NSLayoutConstraint(item: contentView, attribute: .width, relatedBy: .equal, 
          toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 260.0).isActive = true 
     NSLayoutConstraint(item: contentView, attribute: .height, relatedBy: .equal, 
          toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 30.0).isActive = true 
     // Add position constraints to the content view (horizontal center, 100 from the top) 
     NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: lastY).isActive = true 
     NSLayoutConstraint(item: contentView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0.0).isActive = true 

     // Update last Y position to have the gaps between views to be 10 
     lastY += 40 
    } 

    // Add label and button to the content view 
    func addViewsTo(_ contentView: UIView) { 
     // Add a label with size of (100, 30) 
     let label = UILabel() 
     label.text = textField.text 
     label.frame = CGRect(x: 0.0, y: 0.0, width: 100.0, height: 30.0) 
     contentView.addSubview(label) 

     // Add a button with size of (150, 30) 
     let button = UIButton() 
     button.setTitle("Button of \(textField.text ?? "")", for: .normal) 
     button.setTitleColor(.blue, for: .normal) 
     button.layer.borderWidth = 1 
     button.layer.borderColor = UIColor.black.cgColor 
     button.frame = CGRect(x: 110.0, y: 0.0, width: 150.0, height: 30.0) 
     contentView.addSubview(button)   
    } 
} 

Answer 2

Vos questions portent sur la façon de créer par programme un bouton et un champ de texte, puis de définir une contrainte. D'abord, lancez l'élément d'interface utilisateur, configurez-le et ajoutez-le à votre contrôleur de vue. Puis assignez-lui une contrainte. Mes ensembles de contraintes préférés sont le rembourrage en haut, le rembourrage à gauche, la hauteur de vue et la largeur de vue.

Utilisez un UIButton par exemple

let button = UIButton() 
//Set up button, like title, color, etc 

self.view.addSubView(button)//Add the button to the current view 

//Set up constraints 
let margins = view.layoutMarginsGuide 
button.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant: 0).isActive = true 
button.topAnchor.constraint(equalTo: margins.topAnchor, constant: 70).isActive = true 
button.widthAnchor.constraint(equalToConstant: 100).isActive = true 
button.heightAnchor.constraint(equalToConstant: 30).isActive = true