Comment créer un simple bouton arrondi dans Storyboard?

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? Sous Android, j'utiliserais simplement un correctif 9, mais je sais qu'iOS n'a pas cette capacité.

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

Vous pouvez également le faire dans le code:

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

Réponse courte: OUI

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

Il n'apparaîtra pas dans le, Storyboardmais cela fonctionnera correctement lorsque vous exécuterez le projet.

Remarque:
Le «Chemin de la clé» layer.cornerRadius et sa valeur sont 5. La valeur doit être modifiée en fonction de la hauteur et de la largeur du bouton. La formule pour cela est la hauteur du bouton * 0,50. Jouez donc autour de la valeur pour voir le bouton arrondi attendu dans le simulateur ou sur l'appareil physique. Cette procédure semblera fastidieuse lorsque vous aurez plus d'un bouton à arrondir dans le storyboard.

Vous pouvez faire quelque chose comme ceci:

@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 MyButtondans Identity Inspectoret dans IB, vous aurez la roundedpropriété:

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. Reportez-vous l'image.

J'ai trouvé le moyen le plus simple de le faire, c'est de régler le cornerRadius à la moitié de la hauteur de la vue.

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

Vous pouvez connecter votre IBOutletbouton à partir du storyboard.

Ensuite, vous pouvez définir corner radius votre bouton pour faire son coin rond.

par exemple, votre outletest myButtonalors,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Rapide

  myButton.layer.cornerRadius = 5.0

Si vous voulez exactement le bouton rond, votre bouton est widthet heightdoit être equalet cornerRadiusdoit être égale à la hauteur ou de la largeur / 2 (moitié de la largeur ou de la hauteur).

Comme d'autres réponses ont suggéré d'effectuer la plupart de ce travail dans le code, une seule réponse a en fait fourni un moyen 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 rayon de coin de la vue, du bouton, de l'image, etc.

Veuillez jeter un œil au code suivant. Pour utiliser ce code, créez un nouveau fichier Swift appelé RoundedView ou ce que vous souhaitez appeler puis accédez à votre storyboard et changez la classe en "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
    }
}

Lors de l'ajout layer.cornerRadiusdans le storyboard, assurez-vous que vous n'avez pas d'espaces de début ou de fin. Si vous effectuez un copier-coller, des espaces peuvent être insérés. 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");
}

L'extension est la meilleure option pour ce problème. Créer une extension de vue ou de bouton

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

Appelez-le à partir du code

button.roundCorners()

j'utilise version 11.4 de Xcode

Dans l'inspecteur d'attributs, vous pouvez définir le rayon du coin.

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

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