I am trying to emulate the attribute in Android android:layout_weight="1" in iOS.
I have a View with 7 Buttons and I want that they all have the same width and the same margin between them. In Android you will put weight 1 for all of them and marginLeft = 5 (except the last one having margin right).
How I can do this on iOS with the interface builder?
You would use auto layout for this. For the leftmost object, set the leading edge to superview. For the rest of the objects, connect the trailing edge of one to the leading edge of the next. On the rightmost object, set the trailing edge to superview.
Check out this tutorial for the many many details.
http://www.raywenderlich.com/83129/beginning-auto-layout-tutorial-swift-part-1
This answer worked for me: https://stackoverflow.com/a/26323745/1463931
The key is to nest your views in a StackView,
now while holding down the Shift key, select the views you want to assign weights to,
then under the Constraints settings, select Equal Heights, or Equal Width depending our your desired outcome, save it.
Now open up the this Equal Heights constraints from the list on the top left corner of your StoryBoard (Where all your views and constraints are listed).
from the right section, edit the Multiplier value. This is where you enter the ratio of how you want your views to be distributed. Good luck.
Related
I Have a view like so:
And I am trying to add constraints so the text fields are side by side so the auto looks the same no matter the device width, how would I do that?
I have tried the following for all 6 of them:
But it ends up looking like this:
What am I doing wrong?
Ctrl drag from the description TextField to vendor TextField and select Equal Widths from popup
You can also use a vertical stackView where each row is a horizontal 1 with distribution set to Equal spacing and drag the text fields to it that will be more easier
Well, let's look at what we know about the horizontal axis (I assume you've got the vertical axis taken care of). There are two text fields; call them Left and Right. We know these things:
Where Left's leading edge must be
Where Right's trailing edge must be
The distance between Left's trailing and edge and Right's leading edge
The relationship between Left's width and Right's width, i.e. they are equal
Ta-daa:
(A UIStackView would construct these same constraints for you, but in a simple situation like this it's probably more trouble than it's worth.)
There are many ways to do it
I give you two but recommend the first one in your case.
First :
Define a constraint by draging one of your UITextFiled to the other one and set it to “Equal Widths”
You may also be able to define a percentage for each (60-40%) if you like.
Second :
Define a constraint like above (draging) And define a relative ratio (0.5) for UITextField width against its superview. Do it for the other one. You need to go to Object Inspector Tab and change the values if needed (so this requires two constraints, one for each UITextField as each of them are relative to the their superview) this is also a little bit slower than the first approach since margins should be defined with priority.
I am developing an iPhone app in which, i have made this page using autolayout
but it shows unwanted spaces above Register Me(yellow button) in bigger iPhones
Constraints given are:
top,bottom, leading and trailing with respect to its subviews to all the controls. (there is no warning or misplaced constraints i see in xcode)
Here is the screenshot of iPhone 4s
Here is the screenshot of iPhone 6+
I want to minimize the empty spacing in bigger iPhones...
How do i solve this problem?
Please help and thanks in advance
Heres a suggestion for you. You have roughly seven regions of interest there. First one is the title 'Register Kano .. ' etc. Then there are 5 text entry areas - name, email, password, etc. Finally you have 3 small lines of info text - I would count this as one final area, so 7 in all.
What I would do is create 7 parent UIViews to put that stuff in. I would give them 'equal height' constraints, and make them sit above and below each other with no gap. Then as the iphone screen changes height, those areas stretch out height-wise to fill the area. Heres a rough mockup :
Select all those UIViews and select the 'equal heights' constraint :
Then every view except the bottom one needs these constraints (top, leading trailing to superview 0px)
Then your bottom view needs those plus 'bottom' too :
So all that remains to do is to put your content in each of those boxes, but centre them in terms of vertical position relative to their superview.
If your intent to target iOS 9 users, you should use UIStackView, the provide a lot of flexibility in terms of alignment and distribution.
If not, then you or your design team has to find a solution.
You can update the margin contraints of your controls on big devices.
This would add space between each rows on big screens, will looks better as you ask.
Something like :
myControl.heightConstraint.constant += 20.0f
This is how I would do, but you have to decide how you update your layout for big devices
#Krunal you can use the size class and set the constraints accordingly so it will give a brief idea how to fit the UI design for every device!!
you can set constraints relative to height of your base view. This will make your interface objects evenly distributed over layout. Lets assume you have 8 regions. for registerLabel
registerLabel.leading = baseView.leading
registerLabel.trailing = baseView.trailing
registerLabel.top = baseView.top
registerLabel.bottom = baseView.bottom * (1/8)// it will be always proportional to height of view
then for icons at the beginning firstIcon
firstIcon.leading = baseView.leading + 10
firstIcon.height = firstIcon.width
firstIcon.height = baseView.height*(1/9)// to give a gap between icons
firstIcon.bottom = baseView.bottom * (2/8)
and then you can set textfield's constraints according to firstIcon
for other icons you can go on with 3/8, 4/8, 5/8, 6/8 and set the relative textfields constraints according to that icon.
and lastly for registerMe button
registerButton.leading = baseView.leading
registerButton.trailing = baseView.trailing
registerButton.bottom = baseView.bottom
registerLabel.height = baseView.height * (1/8)
With this approach your icons size also decrease and increase relatively with height of view and all the page will be filled.
baseView is view of controller.
What is happening here, you kept the width according to superview ie phone width, but your height is fixed.
Do one thing instead of giving Height constraint, use aspect ration in combination with leading , trailing and top constraint. When view will stretch widthwise , your component's height will also Increase and fill the extra space for iphone 6.
This is the best thing you can do keeping the same layout and design pattern.
Seems you have given some fixed height in views.
As every element is depends on it above and below elements constraints, this might be possible of empty space.
So try to divide the View part then the dependency of constraints will reduce.
If you don't want to show empty space, then use center horizontally to one of the element which will look good, here it may be the third field.
Then start giving same constraints to Register button. Sure it will help you in resolving this issue.
Hey its the best solution for you is stackView
Combine your objects in single stackView.
You can combine your object vertically and also horizontally.
It will decrease your space and view will arranged in awesome manner.
You can select your objects like this.
Click here to make it stack.
Now you can reduce your space like this.
I understand the old Struts and Springs method of aligning, sizing and distributing views in Interface Builder. However, I cannot seem to figure out how to evenly distribute views using auto layout with Xcode 5. There was a way to do it using Xcode 4, but that option is gone.
I have 7 buttons arranged in a vertical stack. On a 3.5" layout, it looks great. When I preview the screen in the 4" layout, all of the buttons remain tightly packed and there is a large amount of space below the last button.
I want them to stay the same height, but I want the space between them to be able flex so they can spread out across the screen.
I've been able to get the height of the buttons to flex and fill the space, but that is not my desired behavior. I would like to learn how to use Auto Layout to replace my old Springs behavior, but I can't seem to find any way to do it through Interface Builder.
I'm ok with the top button either being a fixed space from the top edge or a proportional space from the top edge, likewise for the bottom button and the bottom edge. Those are less important to me, I'm good with either.
But I really need to figure out how to evenly distribute the extra space between each of the items in the view.
EDIT Note that in iOS 9 this technique will become unnecessary, because a UIStackView will perform distribution automatically. I'll add another answer explaining how that works.
How to Perform Even Distribution Using Autolayout
The simplest way to do this in Interface Builder alone (rather than constructing constraints in code) is to use "spacer" views:
Position the top and bottom buttons absolutely.
Place spacer views between all the buttons. Use constraints to position them horizontally (centering them horizontally is simplest) and to set their widths.
Make constraints between each button and the spacer view above and below it, with a Constant of 0.
Now select all the spacer views and set their heights to be equal.
The first screen shot shows me setting this up in IB:
I have deliberately not corrected for the "misplaced views" because I want you to see what it looks like while I'm designing the constraints. Here's the result on both a 4 inch and a 3.5 inch screen:
I have left the spacer views black, just to show you how this technique works, but of course in real life you would make them transparent and hence invisible! So the user sees just your buttons, evenly distributed on either height of screen.
The reason for the use of this technique is that although the notion of equality performs the distribution of values you are asking for, constraints can apply equality only between aspects of views; thus we need the extra views (the spacer views) so that we have things we can make equal to other things (here, the heights of the spacer views).
Other Approaches
Obviously, a more flexible approach is to assign the constraints in code. This may sound daunting, but there's a lot of third-party code out there to help you, such as this sort of thing.
For example, if we have a (possibly invisible) superview whose height acts as a boundary to dictate maximum vertical distribution of our four buttons, we can pin their tops to the vertical center of that superview with a constant of 0 but a multiplier of 0.000001, 0.666667, 1.33333, and 2.0 respectively (if we have four buttons); now the buttons will stay vertically distributed even as the superview changes size in response to screen height or whatever. [In Xcode 5.1, it will be possible to set that up in Interface Builder, but in earlier versions of Xcode it is not possible.]
In iOS 9 / Xcode 7 this problem will be trivially solved in IB. Simply select the buttons (or whatever it is you want to distribute vertically) and choose Editor > Embed In > Stack View. Then you simply configure the stack view:
Provide constraints that position and size the stack view itself. For example, pin the four edges of the stack view to the four edges of its superview.
Set the stack view's attributes. In this case we want Vertical axis, Fill alignment, Equal Spacing distribution.
That's all! However, you may be curious about how this works, because it is still possible to do the same thing manually in code. A stack view performs distribution, not by inserting spacer views, but by inserting spacer guides. A guide (a UILayoutGuide) is a lightweight object that behaves like a view for purposes of layout constraints, but is not a view and therefore doesn't have to be made invisible and doesn't carry any of the overhead of a view.
To illustrate, I'll do in code what the stack view is doing. Presume we have four views to distribute vertically. We assign them constraints for everything but their distribution:
They all have absolute height constraints
Their left is pinned to the superview's left, and their right is pinned to the superview's right
The top view's top is pinned to the superview's top, and the bottom view's bottom is pinned to the superview's bottom
Now, presume we have references to the four views as views, an array. Then:
let guides = [UILayoutGuide(), UILayoutGuide(), UILayoutGuide()]
for guide in guides {
self.view.addLayoutGuide(guide)
}
NSLayoutConstraint.activateConstraints([
// guide heights are equal
guides[1].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
guides[2].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
// guide widths are arbitrary, let's say 10
guides[0].widthAnchor.constraintEqualToConstant(10),
guides[1].widthAnchor.constraintEqualToConstant(10),
guides[2].widthAnchor.constraintEqualToConstant(10),
// guide left is arbitrary, let's say superview margin
guides[0].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
guides[1].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
guides[2].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
// bottom of each view is top of following guide
views[0].bottomAnchor.constraintEqualToAnchor(guides[0].topAnchor),
views[1].bottomAnchor.constraintEqualToAnchor(guides[1].topAnchor),
views[2].bottomAnchor.constraintEqualToAnchor(guides[2].topAnchor),
// top of each view is bottom of preceding guide
views[1].topAnchor.constraintEqualToAnchor(guides[0].bottomAnchor),
views[2].topAnchor.constraintEqualToAnchor(guides[1].bottomAnchor),
views[3].topAnchor.constraintEqualToAnchor(guides[2].bottomAnchor)
])
(Obviously I could make that code cuter and shorter using loops, but I have deliberately unrolled the loops for clarity, so that you can see the pattern and the technique.)
I need to create a simple layout with a few labels and buttons. Here's how I have positioned the UI elements in the IB.
This is how I want them to look like in the app as well. The label set on the left side with the same width so the elements on the right side will adjust their widths accordingly.
I have set the leading space to superview constraints on the labels on the left side and set vertical spacing between each of them. Similarly I've added trailing space to superview constraint to the labels and buttons on the right side with vertical spacing between each other. I've also added horizontal spacing between each couple of elements (ex: Name <-> John Doe, Telephone <-> button).
When I run it, it looks like this.
The elements only take up widths as their content needs. I assume this problem occurs because there is no way to auto layout to decide on a width. If I set the labels on the left to same width constraint, it doesn't work at runtime because the constants for them are fixed so they looks like this.
How can I make them appear properly like I have them in the interface builder?
Thank you.
I uploaded a test Xcode project with this issue here.
In your final example, it looks like you almost achieved what you wanted. You made all the labels on the left have the same width. You can now set a width constraint on the first label to a width that works for you, and the other labels should automatically match. The only issue you might still have is getting it to look good on wider screens.
here's what I've been struggling with for the past hours.
I have a view controller that contains a few labels, a picture, and a tableview. I'm using autolayout/size classes in order to use only one storyboard for the various devices supported (meaning: all size of iphones and iPad).
Noew everything is working, except one thing : the settings in "width compact x height compact" are used for 3"5 and 4" iPhones in landscape. So either I say that the table view takes 480px and there's a whole lot of space on iPhones 5/5S, either I set it at 480px but then I cannot reliably align items vertically in my cells.
How come there is no way to say "this view should always takes the full width" ?
Any solution, even workaround, would do. Thanks a lot for your time !
There is no distinction in size classes between 3.5", 4" and 4.7" devices. They all have the same size classes deviced for horizontal and vertical, and behave the same way on rotation.
You can define a view to take all the available space. Explicitly set the bottom and top views to be attached to bottom and top edges (respectively) with constraints, and set the middle view (in your case, the table view) to take all the space in the middle by setting constraints on top with the top views, and constraints on bottom with the bottom views. Now, because top view is attached to top and bottom is attached to bottom, you will have the middle view grow and shrink as needed.
There are a couple of ways to get percentage based sizing.
Link the width of your target element to the width of another element.
Pin your element to its Superview and use the Multiplier setting instead of Constant.
Say you want to set a TitleLabel to have a relative width compared to another element.
Example for method 1:
Ctrl + drag from TitleLabel to another Target element (such as its Parent View), then choose Equal Widths, you can then change the Multiplier field in your Constraints settings to 0.5 if you want 50% width.
Example for method 2:
Pin the appropriate edges of TitleLabel to either the Center, Bottom or Trailing edges* of its Superview (Editor -> Pin -> X Space to Superview).
In the Constraints Settings, make sure you have TitleLabel in the First Item field, and the Superview as the Second Item.
*because the Top/Leading edge of the Superview will have a 0 value, a multiplier against these won't work, as 0 x 0 = 0.
I found method #1 doesn't work well in Table Views, so you may have more luck with #2.