CODEWITHSUNDEEP
iosxcode
Cameron Jewell
Cameron Jewell

Reputation: 105

Buttons width issue Xcode

I am a total noob when it comes to Xcode (I started experimenting with it a few days ago). The autoLayout functionality is killing me.

I have two buttons on a series of viewControllers, linking between pages in my app. I want the buttons to be either centered at the bottom of the iOS device (using constraints) or one in each bottom corner. However, the button width is being cut leaving no space between the text and the edge of the button.

Hole 1 (centered buttons)

Hole 1 (simulator view)

As you can see, the desired dimension of the buttons does not coincide with the actual dimensions.

Hole 2 (bottom corner buttons)

Hole 2 (simulator view)

Here as well the buttons do not behave as I want them to. Ideally, the buttons are in the bottom corners of the display no matter which iOS device (iPhone, iPad, etc.).

A solution to either would suffice as the final layout will be uniform. These are just my two attempts at a solution with no luck.

Edit: This is the viewController for the rest of my pages. I want the display of any iOS device to resemble this. There are no constraints in place for this page. Essentially I just snapped the buttons to the bottom corner margins.

Desired look

simulator view

Second Edit:

What I ended up doing to fix the issue was setting a height and width constraint along with constraining to bottom and side margins. I don't know why this was any different than what I had been trying before (other than the constraints on height and width). Thanks to those who made suggestions.

Upvotes: 0

Views: 63

Answers (2)

Teja Nandamuri
Teja Nandamuri

Reputation: 11201

Create a uiview and name it as button holder. Constraint this view with the following constraints;

 - Bottom constraint
 - If you want to give this a fixed width, give a width constraint.
 - Else give leading and trailing
 - Give height constraint

now add two buttons to this view, and add select the two buttons at a time, and add the following constraints:

- Leading
-trailing
- top
-bottom

you can also achieve this by using UIStackViews which handles the spacing proeprly in these kind of layouts!

Upvotes: 1

Thomas Krajacic
Thomas Krajacic

Reputation: 2747

I am not sure I completely understood what you are trying to achieve but it seems that the following would be easiest:

Select both buttons and embed them in a UIStackView (Editor > Embed In > StackView)

Then select the stackview and center it in the superview und add a constraint for the space to the bottom.

Configure the stackview's Fill and Distribution settings and use the spacing to separate the buttons.

Upvotes: 1

Related Questions