Question 245206 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – UIView borderColor alpha value wrong

If I set the same UIColor with alpha to a UIView and its border, the colors do not match. The strange thing is, that the border gets an alpha value (it’s not completely black), but it’s not matching the view’s background.

Example

Code:

let color = UIColor(white: 0, alpha: 0.3)
let view = UIView(frame: .zero)
view.backgroundColor = color
view.layer.borderWidth = 5
view.layer.borderColor = color.cgColor

Result:
enter image description here

Tags:

2

Answers


  1. 0

    Your issue is that when you set the same semi-transparent UIColor to both the background and border of a UIView, the resulting colors don’t visually match. The border appears differently than the background, even though you’re using the same color value for both. Although adding a border with same color of the background is useless.

    Login or Signup to reply.
  2. 0

    If you want independent "inner" and "outer" colors, there are various ways to go about it.

    Probably the most straight-forward approach is to create a custom UIView subclass and add an "inner" UIView as a subview.

    The base view will have backgroundColor = .clear and the layer.borderWidth and layer.borderColor.

    The "inner" view will be inset by borderWidth.

    class BorderedView: UIView {

    // colors default to black with 0.3 Alpha       
    public var innerColor: UIColor = UIColor(white: 0, alpha: 0.3) { didSet { innerView.backgroundColor = innerColor } }
    public var outerColor: UIColor = UIColor(white: 0, alpha: 0.3) { didSet { self.layer.borderColor = outerColor.cgColor } }

    public var borderWidth: CGFloat = 5.0 { didSet { updateLayout() } }

    private let innerView: UIView = UIView()
    
    init() {
        super.init(frame: .zero)
        commonInit()
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() {
        backgroundColor = .clear
        innerView.translatesAutoresizingMaskIntoConstraints = false
        updateLayout()
    }
    
    // we need to change the "inner" views constraints when the border width changes
    private func updateLayout() {
        
        self.layer.borderWidth = self.borderWidth
        
        innerView.removeFromSuperview()
        
        addSubview(innerView)
        
        NSLayoutConstraint.activate([
            innerView.topAnchor.constraint(equalTo: topAnchor, constant: borderWidth),
            innerView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: borderWidth),
            innerView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -borderWidth),
            innerView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -borderWidth),
        ])
        
    }
    
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search