CODEWITHSUNDEEP
swiftxcodeuiviewborder
Mitch Kelly
Mitch Kelly

Reputation: 491

How do add a bottom boarder to UIView Class?

I have a view class that I apply to various UIViews in UITableViews throughout my Storyboard.

class ListContainerView: UIView {

override func awakeFromNib() {
    super.awakeFromNib()
    
    // Set the thickness of the border
    let thickness: CGFloat = 0.5
    
    // Set the color of the border
    let color: CGColor = UIColor.lightGray.cgColor
    
    // Add top border to the ListContainerView
    let topBorder = CALayer()
    topBorder.frame = CGRect(x: 0.0, y: 0.0, width: self.frame.size.width, height: thickness)
    topBorder.backgroundColor = color
    self.layer.addSublayer(topBorder)
    
    // Add bottom border to ListContainerView
    let bottomBorder = CALayer()
    bottomBorder.frame = CGRect(x: 0.0, y: self.frame.size.height - thickness, width: self.frame.size.width, height: thickness)
    bottomBorder.backgroundColor = color
    self.layer.addSublayer(bottomBorder)
    
}

}

As of now, the code properly adds a top border to the UIView. However, it is not adding the bottom border. I have tried numerous tactics from various StackOverflow answers but none have been successful. What am I doing incorrectly? How can I go about resolving this issue?

UPDATE: I have corrected the initial typo in my code. Additionally, here is a screenshot of an example of where this view is being accessed. In the screenshot, both of the Post View(s) are assigned the class ListContainerView.

Screenshot of Main.storyboard

Thank you in advance for any help you are able to provide!

Upvotes: 1

Views: 501

Answers (2)

El Tomato
El Tomato

Reputation: 6707

Actually, I have the following UIView subclass similar to yours. Try it. It always works.

import UIKit

class TopBotView: UIView {
    override func draw(_ rect: CGRect) {
        let tHeight = self.frame.size.height
        let topLayer = CALayer()
        topLayer.frame = CGRect(x: 0.0, y: tHeight - 0.5, width: self.frame.size.width, height: 0.5)
        topLayer.backgroundColor = UIColor.white.withAlphaComponent(0.3).cgColor
        topLayer.masksToBounds = true
        self.layer.addSublayer(topLayer)
        
        let bottomLayer = CALayer()
        bottomLayer.frame = CGRect(x: 0.0, y: 0.0, width: self.frame.size.width, height: 0.5)
        bottomLayer.backgroundColor = UIColor.white.withAlphaComponent(0.3).cgColor
        bottomLayer.masksToBounds = true
        self.layer.addSublayer(bottomLayer)
    }
}

UPDATE

If you want to surround all sides with a thin line, I have the following subclass.

import UIKit

class AllAroundView: UIView {
    override func draw(_ rect: CGRect) {
        let tHeight = self.frame.size.height
        let topLayer = CALayer()
        topLayer.frame = CGRect(x: 0.0, y: tHeight - 0.5, width: self.frame.size.width, height: 0.5)
        topLayer.backgroundColor = UIColor.black.cgColor
        topLayer.masksToBounds = true
        self.layer.addSublayer(topLayer)
        
        let bottomLayer = CALayer()
        bottomLayer.frame = CGRect(x: 0.0, y: 0.0, width: self.frame.size.width, height: 0.5)
        bottomLayer.backgroundColor = UIColor.black.cgColor
        bottomLayer.masksToBounds = true
        self.layer.addSublayer(bottomLayer)
        
        let leftLayer = CALayer()
        leftLayer.frame = CGRect(x: 0.0, y: 0.0, width: 0.5, height: self.frame.size.height)
        leftLayer.backgroundColor = UIColor.black.cgColor
        leftLayer.masksToBounds = true
        self.layer.addSublayer(leftLayer)
        
        let rightLayer = CALayer()
        rightLayer.frame = CGRect(x: self.frame.size.width - 0.5, y: 0.0, width: 0.5, height: self.frame.size.height)
        rightLayer.backgroundColor = UIColor.black.cgColor
        rightLayer.masksToBounds = true
        self.layer.addSublayer(rightLayer)
    }
}

Upvotes: 1

Daniel Marx
Daniel Marx

Reputation: 764

bottomBorder.frame = CGRect(x: 0.0, y: self.frame.size.width - thickness, width: self.frame.size.width, height: thickness)

shouldn't it be

bottomBorder.frame = CGRect(x: 0.0, y: self.frame.size.height - thickness, width: self.frame.size.width, height: thickness)

unless your UIView is a square

Upvotes: 1

Related Questions