How to Set the Cornerradius of a Uistackview

How can I set the cornerRadius of a UIStackView?

UIStackView just manages the position and size of its arranged views, the cornerRadius has no effect. Try to add a custom view below the stackView and set the cornerRadius of it.

How to add corner radius to UIStackView and mask subviews

Instead of adding background to stack view, you can add stack view as a child to the background and mask background with corners.

let wrapper = UIView()               // Creating background
wrapper.layer.cornerRadius = 10
wrapper.layer.masksToBounds = true
wrapper.backgroundColor = .yellow

let stack = UIStackView()            // Creating stack
stack.frame = wrapper.bounds
stack.autoresizingMask = [.flexibleWidth, .flexibleHeight]
wrapper.addSubview(stack)

UIStackView rounded corners for deployment target 12.3

You could place your stackView inside another view and set background color/corner radius for this container view:

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .black
           
    // The following is "supposed" to create rounded corners for the stackview
    let subView = UIView()
    subView.backgroundColor = .yellow // this ends up showing through instead of the systemPink
    subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    subView.layer.cornerRadius = 10
    subView.layer.masksToBounds = true
    subView.clipsToBounds = true
    view.addSubview(subView)
    subView.translatesAutoresizingMaskIntoConstraints = false
                            
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.distribution = .fillEqually
    stackView.alignment = .fill
    stackView.spacing = 6
    stackView.backgroundColor = .systemPink // this actually works
    
    subView.addSubview(stackView)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    
    // Fill the stackview with buttons
    for index in 0..<buttonList.count {
        let button = UIButton()
        button.setTitle(buttonList[index], for: .normal)
        button.backgroundColor = .cyan
        button.setTitleColor(.black, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 14)
        stackView.addArrangedSubview(button)
    }
    
    NSLayoutConstraint.activate([
        stackView.trailingAnchor.constraint(equalTo: subView.trailingAnchor),
        stackView.leadingAnchor.constraint(equalTo: subView.leadingAnchor),
        stackView.topAnchor.constraint(equalTo: subView.topAnchor),
        stackView.bottomAnchor.constraint(equalTo: subView.bottomAnchor),
        
        subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        subView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        subView.widthAnchor.constraint(equalToConstant: 140)
    ])
}

As far as I know, it is also better to activate NSLayoutConstraint in a group, not one by one

Top only corner radius for UIImage in UIStackView

I was able to solve it. I detected that the frame of the image was always having the wrong size.

However, I changed the code to the following:

RoundedImageView:

import UIKit

@IBDesignable
class RoundedImageView: UIImageView {

    @IBInspectable var cornerRadius: CGFloat = 0.0 { didSet { setUpView() } }

    func setUpView() {
        self.clipsToBounds = true

        setTopCornerRadius(rect: self.bounds)
    }

    func setTopCornerRadius(rect: CGRect) {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners:[.topLeft, .topRight], cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = rect
        maskLayer.path = path.cgPath
        self.layer.mask = maskLayer
        self.layer.masksToBounds = true
    }
}

And in the PostViewController I make use of 'willDisplay cell':

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        if let postCell = cell as? PostCell, let postImage = postCell.postImage {
           postCell.postImage.setTopCornerRadius(rect: CGRect(x: postImage.frame.origin.x, y: postImage.frame.origin.y, width: (cell.frame.width - 16.0), height: postImage.frame.size.height))
        }
}

The latter method gets called when the cell already has the correct size. Notice I used -16.0 in respect to the margin of the cell. However, I still understand why it's a difference between an UIView and an UIImageView.

Round corners inside StackView not displaying correctly

You should not be using button.bounds in the viewDidLoad() as the geometry of your view isn't set at this point. Try moving your code to viewWillAppear() or viewDidLayoutSubviews() where the bounds will be correct.

How to apply rounded corners for button programmatically added to a StackView

The problem is that your buttons have no size. Change this:

// ...
newButton.setTitleColor(UIColor.white, for: .normal)
newButton.roundedButton()
// ...

to this:

// ...
newButton.setTitleColor(UIColor.white, for: .normal)
newButton.sizeToFit()
newButton.roundedButton()
// ...

How can i achieve this kind of corner redius with shadow view iOS swift?

1) Why write a separate function to draw rect and then apply cornerRadius mask to your view? Replace the function's contents with:

yourView.layer.masksToBounds = true
yourView.layer.cornerRadius = 20
yourView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

2) Once you mask your view's corners and set its masksToBounds property to true, you can set shadow to the view's layer and it will automatically wrap around the rounded corners as you desire:-

yourView.layer.shadowOffset = CGSize(width: 0, height: -0.5)
yourView.layer.shadowRadius = 1
yourView.layer.shadowColor = UIColor(red:0.01, green:0.05, blue:0.09, alpha:0.18).cgColor
yourView.layer.shadowOpacity = 0.8

3) It's advised to play with your cell's UI attributes(a subview's cornerRadius and shadow in your case) in the cell class's awakeFromNib() or an init() method rather than in your delegate methods as they get called a lot of times and hence break the whole point of reusability

Have tested the code to apply shadow and it works fine for me. Hope this helps!

---

Related Topics