8

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.

6
  • 4
    you want to align them vertically and horizontally both, or just vertically and place them side wise?
    – Usama
    Oct 8, 2015 at 13:05
  • I would subclass the cell and set the frames of the buttons in layoutSubviews:
    – Alex
    Oct 8, 2015 at 13:08
  • 1
    iOS 9 introduced the UIStackView that is designed for this kind of situation.
    – Dean
    Oct 8, 2015 at 14:24
  • @deanware: that's exactly what this is made for, +1
    – rdurand
    Oct 8, 2015 at 14:32
  • Also, this tutorial can help
    – rdurand
    Oct 8, 2015 at 14:35

2 Answers 2

21

Tested for xcode 7:

i suppose your are looking for something like that

enter image description here

Solution:

enter image description here

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.enter image description here

constraints for that holder view are

enter image description here

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

enter image description here

3) constraints for buttons on either side will be

enter image description here

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

4
  • can you post the objective-c version of the same ?
    – Rahul Vyas
    Mar 29, 2016 at 9:17
  • Implementation for objective-c would be exactly same (you just need to change the syntax)
    – Usama
    Mar 29, 2016 at 9:22
  • I am having trouble implementing constraints. I'm new to auto-layout. Also I need some padding between each button. Can you guide in right approach ?
    – Rahul Vyas
    Mar 29, 2016 at 9:55
  • @Usama Is this possible without tableview? I would like 7 buttons center aligned. Could you help?
    – JamesG
    May 26, 2017 at 23:28
0

You should look into UIStackView (however, it's for iOS 9 an up).

I believe there is a method for UIStackViews in which embedded UIViews "disappear", and it'll re-align the other UIViews that are embedded in the same UIStackView.

2
  • Thanks but i am using ios less than ios9 so i can't use UIStackView is there any other option to do that? Oct 9, 2015 at 6:12
  • I can't think of any ways to do it via storyboards. I suggest learning how to edit layouts via code.
    – Fine Man
    Oct 9, 2015 at 6:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.