¿Cómo establecer el color del borde personalizado de UIView mediante programación?


Respuestas:


202

Si usa 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

Nota: esto no pareció funcionar para mí (¿quizás porque estoy en Swift 3.1?). Sin embargo, la versión de Paras Joshi ( stackoverflow.com/a/29701061/225813 ) funcionó
Ashley Coolman

Edité mi respuesta. seguro que funcionará para usted .. Ashley Coolman
Shashi Verma

1
No es necesario llamar a init explícitamente en swift 3.
ibrahimab

¿Es posible utilizar más de un color?
Gökhan Çokkeçeci

3
¿Hay alguna diferencia entre sus dos versiones?
Fogmeister

88

En Swift 4 puede establecer el color y el ancho del borde en UIControls usando el siguiente código.

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 , puede establecer el ancho del borde de UIView y el color del borde usando el siguiente código.

yourView.layer.borderWidth = 1

yourView.layer.borderColor = UIColor.red.cgColor

1
@ShashiVerma de nada. Para obtener más detalles sobre las capas, lea los documentos de referencia de clases de los diferentes objetos de Apple, por lo que también es útil para usted :)
Paras Joshi

16

Utilice @IBDesignable y @IBInspectable para hacer lo mismo.

Son reutilizables, fácilmente modificables desde Interface Builder y los cambios se reflejan inmediatamente en el Storyboard.

Adapte los objetos del guión gráfico a la clase en particular.

Fragmento de código:

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

}

Permite una fácil modificación desde Interface Builder:

Constructor de interfaces


Me gusta más esta solución ya que es reutilizable en la que configuramos UIView en la vista personalizada pero aún deja espacio para más cambios.
n0rm

Esta era mi forma favorita de lograrlo, pero con el modo oscuro, realmente no funciona bien. Obtiene el estilo de color de MacOS actual y usa static. Pero incorporarlo @IBDesignabley @IBInspectabletodo funciona bien, por lo que debería haber una forma para que las aduanas usen Color Assets con el modo oscuro / claro también ~ ¿alguien sabe cómo se puede lograr?
Desarrollador Nomad

12

Puede escribir una extensión para usarla con todas las UIViews, por ejemplo. UIButton, UILabel, UIImageView, etc. Puede personalizar mi siguiente método según sus necesidades, pero creo que funcionará bien para usted.

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

Uso:

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

1
@luda, ¡no creo que tenga muchas opciones sobre el lenguaje api!
worthwords

8

rápido 3

func borderColor(){

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

8

Swift 5.2 , extensión UIView +

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

    }
}

Usaste esta extensión;

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

te perdiste agregar clipsToBounds = true
Bent El-Eslam

3

Escriba el código en su viewDidLoad()

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

Y puedes configurar ColorconRGB

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

Aprenda algo sobre CALayerenUIKit


De alguna manera, no hace nada a menos que también establezca explícitamente el ancho del borde.
Nicolas Miari

@NicolasMiari eso sería de esperar ... no puede ver un color de borde para el que no ha establecido un tamaño.
Jono Guthrie

Lo siento, olvidé mencionar que me refería a campos de texto ... que parecen tener un ancho de borde predeterminado distinto de cero desde el principio. Sin embargo, luché para que se reflejara el color que configuré, hasta que establecí explícitamente el ancho del borde.
Nicolas Miari

3

rápido 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

Podemos crear un método para ello. Simplemente utilícelo.

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

En lugar de agregar una nueva respuesta, debe haber enviado una solicitud de edición al respondedor original
Rajan Maheshwari

@RajanMaheshwari Por favor, no. No agregue código a las respuestas de otras personas. Las actualizaciones deben publicarse como propias, no en otras respuestas. De esa manera, cada cartel es responsable de lo que publica ...
Eric Aya

@EricAya no se trata de actualizar la respuesta. Es una solicitud de edición, puede estar en los comentarios del respondedor. ¿Entendiste lo que estaba tratando de transmitir?
Rajan Maheshwari
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.