Comment définir la couleur de bordure personnalisée de UIView par programmation?


Réponses:


202

Si vous utilisez Swift 2.0+

self.yourView.layer.borderWidth = 1
self.yourView.layer.borderColor = UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor

Remarque: cela ne semble pas fonctionner pour moi (peut-être parce que je suis sur Swift 3.1?). La version de Paras Joshi ( stackoverflow.com/a/29701061/225813 ) a bien fonctionné
Ashley Coolman

J'ai édité ma réponse. il fonctionnera sûrement pour vous .. Ashley Coolman
Shashi Verma

1
Vous n'avez pas besoin d'appeler init explicitement dans swift 3.
ibrahimab

Est-il possible d'utiliser plus d'une couleur?
Gökhan Çokkeçeci

3
Y a-t-il une différence entre vos deux versions?
Fogmeister

88

Dans Swift 4, vous pouvez définir la couleur et la largeur de la bordure sur UIControls en utilisant le code ci-dessous.

let yourColor : UIColor = UIColor( red: 0.7, green: 0.3, blue:0.1, alpha: 1.0 )
yourControl.layer.masksToBounds = true
yourControl.layer.borderColor = yourColor.CGColor
yourControl.layer.borderWidth = 1.0

<Swift 4 , vous pouvez définir la largeur et la couleur de la bordure d'UIView à l'aide du code ci-dessous.

yourView.layer.borderWidth = 1

yourView.layer.borderColor = UIColor.red.cgColor

1
@ShashiVerma vous êtes les bienvenus. Pour plus de détails sur les calques, lisez les différents documents de référence de classe d'objets d'Apple, ce qui vous sera également utile :)
Paras Joshi

16

Utilisez @IBDesignable et @IBInspectable pour faire de même.

Ils sont réutilisables, facilement modifiables à partir du constructeur d'interface et les changements sont immédiatement reflétés dans le storyboard

Conformez les objets du storyboard à la classe particulière

Extrait de code:

@IBDesignable
class CustomView: UIView{

@IBInspectable var borderWidth: CGFloat = 0.0{

    didSet{

        self.layer.borderWidth = borderWidth
    }
}


@IBInspectable var borderColor: UIColor = UIColor.clear {

    didSet {

        self.layer.borderColor = borderColor.cgColor
    }
}

override func prepareForInterfaceBuilder() {

    super.prepareForInterfaceBuilder()
}

}

Permet une modification facile depuis Interface Builder:

Constructeur d'interface


J'aime plus cette solution car c'est une solution réutilisable où nous définissons l'UIView sur la vue personnalisée mais laisse toujours la place à plus de changements.
n0rm

C'était ma façon préférée d'y parvenir, mais avec le mode sombre, cela ne fonctionne pas vraiment bien. Il obtient le style de couleur du MacOS actuel et utilise statique. Mais intégré @IBDesignableet @IBInspectabletout fonctionne bien, il devrait donc y avoir un moyen pour les douanes d'utiliser les ressources de couleur avec le mode sombre / clair également ~ n'importe qui sait comment y parvenir?
Développeur Nomad

12

Vous pouvez écrire une extension pour l'utiliser avec tous les UIViews, par exemple. UIButton, UILabel, UIImageView etc. Vous pouvez personnaliser ma méthode suivante selon vos besoins, mais je pense que cela fonctionnera bien pour vous.

extension UIView{

    func setBorder(radius:CGFloat, color:UIColor = UIColor.clearColor()) -> UIView{
        var roundView:UIView = self
        roundView.layer.cornerRadius = CGFloat(radius)
        roundView.layer.borderWidth = 1
        roundView.layer.borderColor = color.CGColor
        roundView.clipsToBounds = true
        return roundView
    }
}

Usage:

btnLogin.setBorder(7, color: UIColor.lightGrayColor())
imgViewUserPick.setBorder(10)

1
@luda je ne pense pas qu'il / elle ait beaucoup de choix sur la langue de l'API!
worthwords

8

rapide 3

func borderColor(){

    self.viewMenuItems.layer.cornerRadius = 13
    self.viewMenuItems.layer.borderWidth = 1
    self.viewMenuItems.layer.borderColor = UIColor.white.cgColor
}

8

Swift 5.2 , UIView + Extension

extension UIView {
    public func addViewBorder(borderColor:CGColor,borderWith:CGFloat,borderCornerRadius:CGFloat){
        self.layer.borderWidth = borderWith
        self.layer.borderColor = borderColor
        self.layer.cornerRadius = borderCornerRadius

    }
}

Vous avez utilisé cette extension;

yourView.addViewBorder(borderColor: #colorLiteral(red: 0.6, green: 0.6, blue: 0.6, alpha: 1), borderWith: 1.0, borderCornerRadius: 20)

vous avez manqué d'ajouter clipsToBounds = true
Bent El-Eslam

3

Écrivez le code dans votre viewDidLoad()

self.view.layer.borderColor = anyColor().CGColor

Et vous pouvez définir ColoravecRGB

func anyColor() -> UIColor {
    return UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
}

En savoir quelque chose CALayerenUIKit


D'une manière ou d'une autre, cela ne fait rien sauf si vous définissez explicitement la largeur de la bordure.
Nicolas Miari

@NicolasMiari qui serait attendu ... vous ne pouvez pas voir une couleur de bordure pour laquelle vous n'avez pas défini de taille.
Jono Guthrie

Désolé, j'ai oublié de mentionner que je faisais référence aux champs de texte ... qui semblent avoir une largeur de bordure par défaut non nulle depuis le début. Cependant, j'ai eu du mal à faire refléter la couleur que j'ai définie, jusqu'à ce que je définisse explicitement la largeur de la bordure.
Nicolas Miari

3

Swift 3.0

self.uiTextView.layer.borderWidth = 0.5
    self.txtItemShortDes.layer.borderColor = UIColor(red:205.0/255.0, green:205.0/255.0, blue:205.0/255.0, alpha: 1.0).cgColor

3

Nous pouvons créer une méthode pour cela. Utilisez-le simplement.

public func createBorderForView(color: UIColor, radius: CGFloat, width: CGFloat = 0.7) {
    self.layer.borderWidth = width
    self.layer.cornerRadius = radius
    self.layer.shouldRasterize = false
    self.layer.rasterizationScale = 2
    self.clipsToBounds = true
    self.layer.masksToBounds = true
    let cgColor: CGColor = color.cgColor
    self.layer.borderColor = cgColor
}

2

Swift 3.0

       groundTrump.layer.borderColor = UIColor.red.cgColor

Au lieu d'ajouter une nouvelle réponse, vous devez avoir envoyé une demande de modification
Rajan Maheshwari

@RajanMaheshwari S'il vous plaît non. N'ajoutez pas de code aux réponses des autres. Les mises à jour doivent être publiées comme les leurs, pas dans d'autres réponses. De cette façon, chaque affiche est responsable de ce qu'elle publie ...
Eric Aya

@EricAya il ne s'agit pas de mettre à jour la réponse. Il s'agit d'une demande de modification, peut-être dans les commentaires du répondant. Avez-vous ce que j'essayais de transmettre.
Rajan Maheshwari
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.