How to add a bottom border in swift ios? - ios

Question

I am trying to add a bottom border to my tabs. Here is the code:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .systemBackground
self.navigationItem.titleView = UIImageView(
image: UIImage(named: "Twitter")!.resize(25, 25)
)
let leftBarImage = UIImageView(
image: UIImage(named: "Profile")!.resize(35, 35)
)
leftBarImage.layer.borderWidth = 1
leftBarImage.layer.borderColor = UIColor.systemGray4.cgColor
leftBarImage.layer.cornerRadius = leftBarImage.frame.width / 2
leftBarImage.clipsToBounds = true
self.navigationItem.leftBarButtonItem = UIBarButtonItem(
customView: leftBarImage
)
let segmentedControl = UIStackView()
segmentedControl.translatesAutoresizingMaskIntoConstraints = false
segmentedControl.axis = .horizontal
segmentedControl.alignment = .center
segmentedControl.distribution = .fillEqually
segmentedControl.backgroundColor = .green
segmentedControl.addBorder(
for: .Bottom,
color: UIColor.red.cgColor,
thickness: 20
)
for menuLabelText in ["For you", "Following"] {
let menuLabel = UILabel()
menuLabel.text = menuLabelText
menuLabel.textAlignment = .center
menuLabel.font = UIFont.boldSystemFont(ofSize: 16)
segmentedControl.addArrangedSubview(menuLabel)
}
self.view.addSubview(segmentedControl)
NSLayoutConstraint.activate([
segmentedControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
segmentedControl.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor)
])
}
}
And the border logic,
import UIKit
extension UIView {
enum BorderSide {
case Left, Right, Top, Bottom
}
func addBorder(for side: BorderSide, color: CGColor, thickness: CGFloat) {
let border = CALayer()
border.backgroundColor = color
switch side {
case .Left:
border.frame = CGRect(
x: frame.minX,
y: frame.minY,
width: thickness,
height: frame.height
)
break
case .Right:
border.frame = CGRect(
x: frame.maxX,
y: frame.minY,
width: thickness,
height: frame.height
)
break
case .Top:
border.frame = CGRect(
x: frame.minX,
y: frame.minY,
width: frame.width,
height: thickness
)
break
case .Bottom:
border.frame = CGRect(
x: frame.minX,
y: frame.maxY,
width: frame.width,
height: thickness
)
break
}
layer.addSublayer(border)
}
}
The border is not showing at all. Here is a screenshot:
You can see the green background but not the red border beneath. Any help would be appreciated. Thanks!

Answer 1

First, let's look at what's wrong with the code...
The addBorder(...) func in your UIView extension uses the view's frame -- so, let's put a print() statement right before we try to add the border, to see the the view's frame:
segmentedControl.backgroundColor = .green
// print the frame of segmentedControl to debug console
print("segmentedControl Frame in viewDidLoad():", segmentedControl.frame)
segmentedControl.addBorder(
for: .Bottom,
color: UIColor.red.cgColor,
thickness: 20
)
You will see this in the debug console:
segmentedControl Frame in viewDidLoad(): (0.0, 0.0, 0.0, 0.0)
So your extension tries to set the frame of the layer:
border.frame = CGRect(
x: frame.minX, // minX == 0
y: frame.maxY, // maxY == 0
width: frame.width, // width == 0
height: thickness. // thickness == 20 (passed in call)
)
As we see, we end up with a layer frame of (x: 0.0, y: 0.0, width: 0.0, height: 20.0) ... we won't see anything, because it has no width.
So, let's try adding the border in viewDidLayoutSubviews().
Note that we'll move the segmentedControl creation outside of viewDidLoad() so we can reference it elsewhere. And, we'll leave the addBorder() with red where it was, then call it again with blue in viewDidLayoutSubviews():
class ViewController: UIViewController {
// create it here, so we can reference it outside of viewDidLoad()
let segmentedControl = UIStackView()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .systemBackground
self.title = "Bad Layout"
segmentedControl.translatesAutoresizingMaskIntoConstraints = false
segmentedControl.axis = .horizontal
segmentedControl.alignment = .center
segmentedControl.distribution = .fillEqually
segmentedControl.backgroundColor = .green
// print the frame of segmentedControl to debug console
print("segmentedControl Frame in viewDidLoad():", segmentedControl.frame)
segmentedControl.addBorder(
for: .Bottom,
color: UIColor.red.cgColor,
thickness: 20
)
for menuLabelText in ["For you", "Following"] {
let menuLabel = UILabel()
menuLabel.text = menuLabelText
menuLabel.textAlignment = .center
menuLabel.font = UIFont.boldSystemFont(ofSize: 16)
segmentedControl.addArrangedSubview(menuLabel)
}
self.view.addSubview(segmentedControl)
NSLayoutConstraint.activate([
segmentedControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
segmentedControl.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor)
])
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// print the frame of segmentedControl to debug console
print("segmentedControl Frame in viewDidLayoutSubviews():", segmentedControl.frame)
segmentedControl.addBorder(
for: .Bottom,
color: UIColor.blue.cgColor,
thickness: 20
)
}
}
extension UIView {
enum BorderSide {
case Left, Right, Top, Bottom
}
func addBorder(for side: BorderSide, color: CGColor, thickness: CGFloat) {
let border = CALayer()
border.backgroundColor = color
switch side {
case .Left:
border.frame = CGRect(
x: frame.minX,
y: frame.minY,
width: thickness,
height: frame.height
)
break
case .Right:
border.frame = CGRect(
x: frame.maxX,
y: frame.minY,
width: thickness,
height: frame.height
)
break
case .Top:
border.frame = CGRect(
x: frame.minX,
y: frame.minY,
width: frame.width,
height: thickness
)
break
case .Bottom:
border.frame = CGRect(
x: frame.minX,
y: frame.maxY,
width: frame.width,
height: thickness
)
break
}
layer.addSublayer(border)
}
}
Now, we see two "print frame" outputs:
segmentedControl Frame in viewDidLoad(): (0.0, 0.0, 0.0, 0.0)
segmentedControl Frame in viewDidLayoutSubviews(): (0.0, 97.66666666666667, 393.0, 19.333333333333332)
Unfortunately, this is the result:
The blue layer is positioned way below the bottom of the stack view / labels.
That's happening because the extension is using frame.maxY -- which is frame.origin.y + frame.size.height -- and the frame's origin.y is 97.66666666666667 (it's top is below the navigation bar).
You could use the same addBorder() approach, by calling it after the views have been laid out (that is, after the frames have been set), and modifying the extension to use the view's bounds instead of frame:
case .Bottom:
border.frame = CGRect(
x: bounds.minX,
y: bounds.maxY,
width: bounds.width,
height: thickness
)
break
and we get this:
However... as should be obvious, this is really not a good approach. Worth noting also is that the layer appears outside the bounds of the view. So, if you were to add a subview constrained to the bottom of segmentedControl, the top of that view would be covered by the 20-point tall "border" layer.
My guess is that you are also going to want to be able to tap the labels... possible you also want to move that "border" to show only under the selected label... etc.
Do some searching / exploring how to subclass UIView so it handles all of that by itself.