Hide button in stackview break the layout in tableview

Question

I have a tableviewcell which has two button inside stackview. One of the button name is topupButton and the other one is details button. Topupbutton hidden if one flag is true. You can find below the code.

  self.topupButton.isHidden = self.selectedSim.operator_?.is_prepaid ?? false

When I hide the topup button details button should stretch in stackview. But in one of my cell, it's not in correct size. When I do visual debug I saw that the frame of button is correct but background is not stretch through the button. You can see the image's below.

I've tried layoutsubviews, setneedsdisplay, layoutifneeded for cell, stackview and buttons. Nothing changed. You can also find my stackview config below.

I've added the constraint between the stackview and the contentview @nayem — Alihan, Dec 23 '19 at 08:16
It seems the constraints are correct. Did you use any kind of `CALayer` on the buttons? — nayem, Dec 23 '19 at 08:19
I've used UIBezierPath for round the button corner. I did layer.layoutIfNeeded, layer.layoutSublayers, layer.setNeedsLayout but it's not solved @nayem — Alihan, Dec 23 '19 at 08:22
Can you try if the other button fills the stack view or not by commenting out the `UIBeizerPath` related code? — nayem, Dec 23 '19 at 08:24
Yeap if I remove the code it's working perfectly. But I need rounded corner button :) @nayem — Alihan, Dec 23 '19 at 08:28
I've solved with give corner radius with self.layer.cornerRadius. Thank you @nayem ! — Alihan, Dec 23 '19 at 08:40
Well, that's good that you have a solution already. But you can keep your `UIBeizerPath` related implementation. Look at the answer I made below. — nayem, Dec 23 '19 at 09:33

score 1 · Accepted Answer · answered Dec 23 '19 at 09:31

As per your comments, it's evident that the usage of UIBeizerPath created the issue in the first place. It's because:

Auto-Layout works best with UIView. But layers don't auto-resize.

Look at this question & answer for more on the above lines.

As you are likely adding mask layer to the buttons, you need to find the ideal method for that addition of mask layer. And according to this answer, the correct place would be draw(_:). So basically you will do something like below:

class TableViewCell: UITableViewCell {

    . . .

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        topupButton.roundButton()
        detailsButton.roundButton()
    }

    . . .

}

// extension for rounding button with UIBezierPath
extension UIButton {
    func roundButton(){
        let size = CGSize(width: bounds.width / 2, height: bounds.width / 2)
        let maskPath = UIBezierPath(roundedRect: bounds,
                                    byRoundingCorners: .allCorners,
                                    cornerRadii: size)
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = maskPath.cgPath
        layer.mask = maskLayer
    }
}

Hide button in stackview break the layout in tableview

1 Answers1