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é.
Réponses:
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 = trueRé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.
clipsToBoundspour que cela fonctionne.
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é:
layer.masksToBounds = trueégalement
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
}
}
}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/2Vous 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.0Si 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()
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)
}
}
}