web-dev-qa-db-fra.com

Comment faire un simple bouton arrondi dans Storyboard?

Je viens de commencer à apprendre le développement iOS, je ne trouve pas comment fabriquer 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é.

enter image description here

iosxcodeuibuttonstoryboard
87
Gintas_

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

Sinon, vous pouvez le faire dans le code:

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

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 de l’écriture du code correspondant. Suivez simplement la capture d'écran donnée ci-dessous pour définir les attributs d'exécution du bouton afin d'obtenir le résultat souhaité.

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

enter image description here

Remarque:
Le 'Chemin de la 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 autour de la valeur pour voir le bouton arrondi attendu dans le simulateur ou sur le périphérique physique. Cette procédure vous semblera fastidieuse lorsque vous aurez plus d’un bouton à arrondir dans le storyboard.

179
Nishant

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 la propriété rounded:

enter image description here

76
ChikabuZ
  1. Créez une classe Cocoa Touch.

enter image description here

  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érez l'image.

enter image description here

26
anson

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

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

Comme d’autres réponses ont suggéré d’effectuer la plupart de ces travaux dans le code, une seule réponse a permis 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 Rayon de la vue, du bouton, de l'image, etc.

S'il vous plaît jeter un oeil sur le code suivant. Pour utiliser ce code, créez un nouveau fichier Swift appelé RoundedView ou appelez-le de la sorte, puis accédez à votre storyboard et définissez la classe sur "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
    }
}
3
Joseph Shenton

Vous pouvez connecter IBOutlet of your button depuis le storyboard.

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

par exemple, votre outlet est myButton alors,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Swift

  myButton.layer.cornerRadius = 5.0

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

3
Lion

Lorsque vous ajoutez layer.cornerRadius dans le storyboard, assurez-vous de ne pas avoir d'espaces de début ou de fin. Si vous copiez-collez, vous pourriez avoir des espaces insérés. Ce serait bien si XCode disait une sorte d'avertissement ou d'erreur.

1
venki mohan

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");
}
0
Sanjeet verma