Comment faire un simple bouton arrondi dans Storyboard?

Je viens de commencer à apprendre le développement iOS, je ne trouve pas comment faire simple bouton arrondi. Je trouve des ressources pour les anciennes versions. Dois-je définir un arrière-plan personnalisé pour un bouton? En Android, je voudrais juste utiliser un patch 9, mais je sais qu’iOS ne dispose pas de cette fonctionnalité.

entrer la description de l'image ici

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

Sinon, vous pouvez le faire en code:

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

Réponse courte: OUI

Vous pouvez absolument faire un simple bouton arrondi sans avoir besoin d’une image d’arrière-plan supplémentaire ou d’écrire du code pour le même. Suivez simplement la capture d’écran ci-dessous pour définir les atsortingbuts d’exécution du bouton afin d’obtenir le résultat souhaité.

Il ne s’affichera pas dans le Storyboard mais cela fonctionnera parfaitement lorsque vous exécuterez le projet.

 #import  

entrer la description de l'image ici

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 dans Identity Inspector et dans IB, vous aurez une propriété rounded :

entrer la description de l'image ici

  1. Créez une classe Cocoa Touch.

entrer la description de l'image ici

  1. 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 } } } 
  2. Référer l’image

entrer la description de l'image ici

Vous pouvez connecter IBOutlet de votre bouton depuis le storyboard.

Ensuite, vous pouvez définir le corner radius du corner radius de votre bouton pour faire son tour de coin.

par exemple, votre outlet est myButton alors,

Obj – C

  self.myButton.layer.cornerRadius = 5.0 ; 

Rapide

  myButton.layer.cornerRadius = 5.0 

Si vous voulez un bouton rond exact, la width et la height votre bouton doivent être equal et cornerRadius doit être égal à height ou width / 2 (la moitié de la largeur ou de la hauteur).

Comme d’autres réponses ont suggéré d’effectuer la majeure partie de ce travail en code, une seule réponse permettait de visualiser vos modifications dans l’interface IB du storyboard. Ma réponse va au-delà de cette réponse en vous permettant de changer le coin de la vue, du bouton, de l’image, etc.

S’il vous plaît jeter un oeil au code suivant. Pour utiliser ce code, créez un nouveau fichier rapide appelé RoundedView ou tout ce que vous souhaitez appeler, puis accédez à votre storyboard et remplacez la classe par “RoundedView”, “RoundedImageView” ou “RoundedButton”.

 import UIKit @IBDesignable class RoundedImage: UIImageView { override func layoutSubviews() { super.layoutSubviews() updateCornerRadius() } @IBInspectable var rounded: Bool = false { didSet { updateCornerRadius() } } @IBInspectable var cornerRadius: CGFloat = 0.1 { didSet { updateCornerRadius() } } func updateCornerRadius() { layer.cornerRadius = rounded ? cornerRadius : 0 layer.masksToBounds = rounded ? true : false } } @IBDesignable class RoundedView: UIView { override func layoutSubviews() { super.layoutSubviews() updateCornerRadius() } @IBInspectable var rounded: Bool = false { didSet { updateCornerRadius() } } @IBInspectable var cornerRadius: CGFloat = 0.1 { didSet { updateCornerRadius() } } func updateCornerRadius() { layer.cornerRadius = rounded ? cornerRadius : 0 layer.masksToBounds = rounded ? true : false } } @IBDesignable class RoundedButton: UIButton { override func layoutSubviews() { super.layoutSubviews() updateCornerRadius() } @IBInspectable var rounded: Bool = false { didSet { updateCornerRadius() } } @IBInspectable var cornerRadius: CGFloat = 0.1 { didSet { updateCornerRadius() } } func updateCornerRadius() { layer.cornerRadius = rounded ? cornerRadius : 0 layer.masksToBounds = rounded ? true : false } } 

J’ai trouvé le moyen le plus simple de le faire, en plaçant cornerRadius à la moitié de la hauteur de la vue.

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

Lors de l’ajout de layer.cornerRadius dans le storyboard, assurez-vous de ne pas avoir d’espaces de layer.cornerRadius ou de fin. Si vous copiez, vous pouvez insérer des espaces. Ce serait bien si XCode disait une sorte d’avertissement ou d’erreur.

Essaye ça!!

  override func viewDidLoad() { super.viewDidLoad() var button = UIButton.buttonWithType(.Custom) as UIButton button.frame = CGRectMake(160, 100, 200,40) button.layer.cornerRadius =5.0 button.layer.borderColor = UIColor.redColor().CGColor button.layer.borderWidth = 2.0 button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal) button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside) button.clipsToBounds = true view.addSubview(button) } func OnClickroundButton() { NSLog(@"roundButton Method Called"); } 
 import UIKit @IBDesignable class MyButton: UIButton { override func layoutSubviews() { super.layoutSubviews() } func updateCornerRadius(radius:CGFloat) { layer.cornerRadius = radius } @IBInspectable var cornerRadius:CGFloat = 0{ didSet{ updateCornerRadius(radius: cornerRadius) } } }