Comment faire un simple bouton arrondi dans Storyboard ?

Question

Je viens de commencer à apprendre le développement iOS, je ne trouve pas comment faire un simple bouton arrondi. Je trouve des ressources pour les anciennes versions. Dois-je définir un arrière-plan personnalisé pour un bouton ? Dans Android, j'utiliserais simplement un patch 9, mais je sais que iOS n'a pas cette capacité.

Answer 1

Réponse courte : OUI

Vous pouvez tout à fait créer un simple bouton arrondi sans avoir besoin d'une image d'arrière-plan supplémentaire ou d'écrire un quelconque code à cet effet. Il suffit de suivre la capture d'écran ci-dessous, pour définir les attributs d'exécution du bouton, afin d'obtenir le résultat souhaité.

Il n'apparaîtra pas dans le Storyboard mais cela fonctionnera bien lorsque vous exécuterez le projet.

Note :
Le site Chemin clé layer.cornerRadius et la valeur est 5. La valeur doit être modifiée en fonction de la hauteur et de la largeur du bouton. La formule est la hauteur du bouton * 0,50. Jouez donc sur la valeur pour voir le bouton arrondi attendu dans le simulateur ou sur le dispositif physique. Cette procédure peut sembler fastidieuse si vous avez plus d'un bouton à arrondir dans le storyboard.

Answer 2

Vous pouvez faire quelque chose comme ça :

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

Définissez la classe sur MyButton en Identity Inspector et à l'IB, vous aurez rounded propriété :

Answer 3

Pour le faire dans le storyboard, vous devez utiliser une image pour le bouton.

Vous pouvez également le faire en code :

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

Answer 4

1. Créez une classe Cocoa Touch.

2. Insérez le code dans la classe RoundButton.

   import UIKit
   
   @IBDesignable
   class RoundButton: UIButton {
   
       @IBInspectable var cornerRadius: CGFloat = 0{
           didSet{
           self.layer.cornerRadius = cornerRadius
           }
       }
   
       @IBInspectable var borderWidth: CGFloat = 0{
           didSet{
               self.layer.borderWidth = borderWidth
           }
       }
   
       @IBInspectable var borderColor: UIColor = UIColor.clear{
           didSet{
               self.layer.borderColor = borderColor.cgColor
           }
       }
   }

3. Référez-vous à l'image.

Answer 5

J'ai trouvé le moyen le plus simple de le faire, en fixant le cornerRadius à la moitié de la hauteur de la vue.

button.layer.cornerRadius = button.bounds.size.height/2