CODEWITHSUNDEEP
iosswiftxcodeautolayoutconstraints
johnniexo88
johnniexo88

Reputation: 313

How to center two labels

I have two buttons. I want both buttons on the same line horizontally and i want equal space on the left of the left button, between the two buttons, and on the right of the right button.

I want to center two buttons like this:

enter image description here

Upvotes: 0

Views: 2045

Answers (4)

bearacuda13
bearacuda13

Reputation: 1854

If I were you, I would make them programmatically. This would work if they were contained in a view. The code below assumes you want to center the buttons in your viewController.

To Make UIButtons Programmatically

In ViewDidLoad:

        let myFirstXCoordinate = CGFloat((self.view.width / 4) - (myWidth / 2))
        let mySecondXCoordinate = CGFloat((3 * self.view.width) / 4) - (myWidth / 2))
        let myWidth:CGFloat = //your button's width
        let myHeight:CGFloat = //your button's height
        let myYCoordinate:CGFloat = //your Y Coordinate

        firstButton.setBackgroundImage(UIImage(named: "myRedOvalThingyImage"), forState: .Normal)
        firstButton.backgroundColor = UIColor.clearColor()
        firstButton.frame = CGRectMake(myFirstXCoordinate, myYCoordinate, myWidth, myHeight)
        firstButton.addTarget(self, action: #selector(ViewController.pressedFirst(_:)), forControlEvents: .TouchUpInside)
        buttonView.addSubview(firstButton)

        secondButton.setBackgroundImage(UIImage(named: "myRedOvalThingyImage"), forState: .Normal)
        secondButton.backgroundColor = UIColor.clearColor()
        secondButton.frame = CGRectMake(mySecondXCoordinate, myYCoordinate, myWidth, myHeight)
        secondButton.addTarget(self, action: #selector(ViewController.pressedSecond(_:)), forControlEvents: .TouchUpInside)
        buttonView.addSubview(secondButton)

Outside ViewDidLoad:

func pressedFirst(sender: UIButton!) {
print("First Oval Thingy Was Pressed")
}

func pressedSecond(sender: UIButton!) {
print("Second Oval Thingy Was Pressed")
}

Upvotes: 1

Jigar Oza
Jigar Oza

Reputation: 665

One of the easiest ways of this problem is to use spacer views.

enter image description here

Two red buttons will have fixed widths and three light gray spacer views will also have equal widths. Now pin all of the 5 components with neighbour component.

Here I have taken a container view. You can ignore it if you do not need it.

Here is the output in different screens:

enter image description here

Note: 5.5 screen is not included here because of the space limitation, but you can check in 5.5 screen too, it will work.

Upvotes: 0

larva
larva

Reputation: 5148

You can do it with autolayout by add three space view (UIvews) to left, center, right.

  • Add constraints to set all space views equal width, and fix height (ex: 30).
  • Add constraints fit space betwen spaceview and button to 0, and spaceview with supper view to 0.
  • Add constraints to centerY for all space views and button.
  • Add Constraints to top superview.

when completed the view look like

enter image description here

Upvotes: 0

jose920405
jose920405

Reputation: 8057

When you work with constraints, you must work block.

In this case you should have 2 blocks, both the same size as going from 0 to center and center the width of the parent.

Example:

Parent Width: 320

let widthBlock = 320/2

block 1: x = 0, width = widthBlock
block 2: x = widthBlock, width = widthBlock

Then within each block you create your buttons and You center both vertically and horizontally using constraints.

As you're doing with the interface it is far simpler, just drag from the button to block and give his father Center Horizontal in Container and Center vertically in container.

Upvotes: 0

Related Questions