vishnu
vishnu

Reputation: 233

how to get a round UIbutton in tableviewcell in swift?

class CustomTableViewCell: UITableViewCell {
let nameLbl: UILabel = UILabel()
let profileBtn: UIButton = UIButton()
let aboutLbl: UILabel = UILabel()


override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    contentView.addSubview(profileBtn)
    contentView.addSubview(nameLbl)
    contentView.addSubview(aboutLbl)

    nameLbl.translatesAutoresizingMaskIntoConstraints = false
    profileBtn.translatesAutoresizingMaskIntoConstraints = false
    aboutLbl.translatesAutoresizingMaskIntoConstraints = false


    profileBtn.backgroundColor = UIColor.red

    nameLbl.font = UIFont(name: "Arial", size: 16)
    aboutLbl.font = UIFont(name: "Arial", size: 16)
    profileBtn.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    profileBtn.leftAnchor.constraint(equalTo: leftAnchor, constant: 20).isActive = true
    profileBtn.widthAnchor.constraint(equalToConstant: 40).isActive = true
    profileBtn.heightAnchor.constraint(equalToConstant: 40).isActive = true
    self.profileBtn.layer.masksToBounds = true
    self.profileBtn.layer.cornerRadius  = CGFloat(roundf(Float(self.profileBtn.frame.size.width/2.0)))

    nameLbl.topAnchor.constraint(equalTo: topAnchor, constant: 30).isActive = true
    nameLbl.leftAnchor.constraint(equalTo: leftAnchor, constant: 70).isActive = true
    nameLbl.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true

    aboutLbl.topAnchor.constraint(equalTo: nameLbl.bottomAnchor, constant: 10).isActive = true
    aboutLbl.leftAnchor.constraint(equalTo: leftAnchor, constant: 70).isActive = true
    aboutLbl.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true


}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

i want the profile button inside the cell to have a round design.but ebven setting the corener radius and marskstobounds to true i am getting a square button. what am i doing wrong any help is apreciated. thanks in advance.

Upvotes: 3

Views: 65

Answers (3)

user math
user math

Reputation: 49

Here is my solution:

override func layoutSubviews() {
    super.layoutSubviews()

    self.makeItCircle()
}

func makeItCircle() {
    self.yourbutton.layer.masksToBounds = true 
    self.yourbutton.layer.cornerRadius  = CGFloat(roundf(Float(self.yourbutton.frame.size.width/2.0)))
}

self.imageView.layer.masksToBounds = true  //- in main 

Upvotes: 2

hardik parmar
hardik parmar

Reputation: 853

When you initialise the cell, the button does not have any frame. So self.profileBtn.layer.cornerRadius = CGFloat(roundf(Float(self.profileBtn.frame.size.width/2.0))) results in cornerRadius to be 0.

Since you are giving 40 constant width and height to the button, you can simply do this:

self.profileBtn.layer.cornerRadius  = 20.0

Also make sure to set the button to clip the bounds:

self.profileBtn.clipsToBounds = true

Upvotes: 1

Callam
Callam

Reputation: 11539

You are calculating the corner radius when the profile button hasn't been laid out yet. This means the width of the profile button will be zero rendering the corner radius the same. Move the line that you set the corner radius to an overriding method of layoutSubviews – this will ensure the views and subsequent sizes have been laid out in order for you to set the appropriate corner radius.

override func layoutSubviews() {

    super.layoutSubviews()

    profileBtn.layer.cornerRadius = profileBtn.frame.width / 2
}

Upvotes: 2

Related Questions