tispr Engineering

Engineering Team blog

How to Create Rounded Corners on Top of the UITabBar

One day, our product owner requested the following: “I want to make our application more exciting and visually attractive, by slightly changing the design”.

Our task:“Create rounded corners over the UITabBar” goal in detail

Let’s code

The first approach: Set cornerRadius in all our the controllers of the UITabBarController:

1
view.layer.cornerRadius = 8.0

But the result was as expected: Rounded corners on top of my views as well: eror one

The second attempt: Use masks

1
2
3
4
5
    let roundedPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    let maskLayer = CAShapeLayer()
    maskLayer.frame = bounds
    maskLayer.path = roundedPath.CGPath
    layer.mask = maskLayer

After some research, we understood that each controller in our UITabBarController is a UINavigationController. As result, rounded corners disappear after pushing any next controller. The third try: We applied it for all main views. We created an extension of UIView and used it where it is required.

1
2
3
4
5
extension UIView {
    func makeCornerRadius(radius: CGFloat = 8, corners: UIRectCorner) {
      ...
    }
}

Cool, seems it worked! However, after testing we understood that it didn’t work with the UIScrollView, since you can see a black area while scrolling.

eror two

Finally, we decided to recalculate the mask path for UIScrollView:

1
2
3
4
5
6
public override func layoutSublayersOfLayer(layer: CALayer!) {
    super.layoutSublayersOfLayer(layer)
    if let maskLayer = layer.mask as? CAShapeLayer {
        maskLayer.path = UIBezierPath(roundedRect: layer.bounds, byRoundingCorners: UIRectCorner.BottomRight | .BottomLeft, cornerRadii: CGSize(width: 8.0, height: 8.0)).CGPath
    }
}

And yes, it worked! No bugs or issues.

Mission complete

This solution worked for us. If you have any alternatives, please leave in comments.

Comments