How can I align 3 UIButtons to the center of an UITableCellView?

Question

How can I align 3 UIButtons to the center of an UITableCellView?

For example say I have 3 UIButtons with titles:

1. Email
2. Phone
3. Skype

It is possible for one or more of the UIButtons to be hidden. For example, if the Phone UIButton is hidden then only Email and Skype should be aligned in the center. If Phone and Skype is hidden then only Email should be aligned in the center.

When any of the UIButtons are hidden, the visible ones should be aligned in the center.

I want to center them both horizontally and vertically.

Answer 1

Tested for xcode 7:

i suppose your are looking for something like that

Solution:

Steps: 1) what is needed is an encapsulating view which holds all three buttons (skype, phone, email) into center irrespective of whether there is one button, two or three inside it. For that a holder view is created which is shown with green background in below snapshot.

constraints for that holder view are

it is just to hold all the subviews, it will get its size from its content so no need to give it height/width constraints.

2) now constraints for the button in the center will be

3) constraints for buttons on either side will be

If you need to hide any button just make its width constraint constant to 0 and all the other buttons will be rearranged accordingly

For TableView Cell:

    @IBOutlet weak var emailButtonWidthConstraint : NSLayoutConstraint?
    @IBOutlet weak var phoneButtonWidthConstraint : NSLayoutConstraint?
    @IBOutlet weak var skypeButtonWidthConstraint : NSLayoutConstraint?

    func showButtons(showSkype showSkype : Bool, showEmail : Bool, showPhone : Bool ){
        emailButtonWidthConstraint?.constant = showEmail ? 54.0 : 0.0
        phoneButtonWidthConstraint?.constant = showPhone ? 54.0 : 0.0
        skypeButtonWidthConstraint?.constant = showSkype ? 54.0 : 0.0

        self.layoutIfNeeded()
    }

Use:

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("customCell", forIndexPath: indexPath) as? CustomCell

        if indexPath.row == 0 {
            cell?.showButtons(showSkype: true, showEmail: true, showPhone: true)
        } else if indexPath.row == 1 {
            cell?.showButtons(showSkype: false, showEmail: true, showPhone: true)
        } else if indexPath.row == 2 {
            cell?.showButtons(showSkype: true, showEmail: false, showPhone: true)
        } else if indexPath.row == 3 {
            cell?.showButtons(showSkype: true, showEmail: true, showPhone: false)
        } else if indexPath.row == 4 {
            cell?.showButtons(showSkype: false, showEmail: false, showPhone: true)
        } else if indexPath.row == 5 {
            cell?.showButtons(showSkype: false, showEmail: true, showPhone: false)
        } else if indexPath.row == 6 {
            cell?.showButtons(showSkype: true, showEmail: false, showPhone: false)
        } else {
            cell?.showButtons(showSkype: true, showEmail: true, showPhone: true)
        }

        return cell!
    }

Same can be achieved with UIStackView (without all this headache obviously) but that won't run on iOS prior to 9.0

Updated (26th Oct 2015) :

GitHub Repo for test project