So I am using interface builder (which I don't often use), and I have two storyboards, one for iPhone 5+ and one for iPhone 4. The iPhone 5 one works perfectly.
However, when I run the app in an iPhone 4 or 4s, one of the UITextViews shrinks in size like it has deflated. When I use constraints, I usually put the views where I want them then do Editor -> Resolve AutoLayout Views or something, and normally the views snap into place.
Here is what it looks like in IB:
IB constraints
And this is what I get when I run the app:
The UITextView when I run the app
This is probably a really simple mistake, but I do feel like a bit of a doompf with my pancake like UITextView. Does anyone know what constraints I could add/actions I could take in order to make the UITextView the size it is in the storyboard?
I am in Xcode 6 and I am using auto layout.
Thanks in advance,
Edit Solved:
Firstly, I deleted the 3.5 inch storyboard so I only have one storyboard.
Then I selected the view in question, and fiddled around with the different iPhone sizes. Once I had put constraints that look good on all the devices, I ran it on every phone, and it worked :).
I agree with #Minestroni-Soup that you don't necessarily need to use two distinct storyboards. In any case, here's how I'd approach the problem. First, I'll ignore the horizontal direction because your problem happens in the vertical direction. If you have problems with the horizontal direction, post a new question.
Place constraints of fixed heights between vertically adjacent views in your layout, and also between the top view and the top border, and also between the bottom view and the bottom border. Then create a constraint that sets the height of one UITextView to be the same as the height of the other UITextView. That should solve your problem.
top border
constraint to set a vertical space of some amount
label 1
constraint to set a vertical space of some amount
textview 1
constraint to set a vertical space of some amount
label 2
constraint to set a vertical space of some amount
textview 1
constraint to set a vertical space of some amount
bottom border
Note that the above, alone, doesn't uniquely define the heights of the two text views but if you add a constraint that sets their heights to be the same, then all the constraints together will have a unique solution (because the labels have well-defined default heights).
I hope my explanation is clear enough.
Related
I am working on a project with multiple buttons on a viewcontroller and I used autolayout. I want all the buttons to have equal widths and heights and I have horizontal/vertical spacing like this:
The result on multiple devices is like this:
For the example I gave the buttons a background color, but in fact they will be filled with images of all kinds of sizes. I have image assets (#1x/#2x/#3x) for the buttons. For example, the #2x image assets will never be bigger then 100width and 75height (points).
Some of the button images can be changed by the user. So I want the button size to be ‘independent’ of the images inside. The buttons should NOT resize based on the image ‘inside’.
So I want to first(auto)layout the buttons, without the images ‘filling’ the buttons, so that the buttons will have the optimum size for the biggest sized images in my project (for the #2x image assets as mentioned:100width&75height points).
When I autolayout the buttons, and afterwards fill them with the images, xcode ‘wants’ to let me update the frames because of misplaced views. I do NOT want the images affecting the autolayout.
If I just run the app on the simulator or on a real iphone, it runs fine. But I have all these misplaced views warnings. What should I do? How will I 'tell' Xcode(7.1) that the images should NOT affect the width and heights of the buttons?
I have the feeling I have a slightly wrong approach to this (auto)layout problem, but I can not yet put my finger on it. I think I make some kind of logical error.
Is it good practice to first (auto)layout the buttons and then ‘fill’ with the images? Or should I fill the buttons with the images and then (auto)layout?
Here an example with images which are of equal widths and heights:
Regarding the earlier question about conflicting constraint:
So I want these buttons to have equal width and heights: ideally 100width and 75height in points. The width will be alright, but the heights is somewhat difficult when I am using autolayout for different sized viewcontrollers (with a scrollview on it). I want to use additional constraints that 'says'; the buttons should NOT have a height value lower then 75 points. If I use a fixed height constraint, with 'equal or higher then' 75 points I get a conflict with the equal heights constraints (off course). I guess I should work with priorities, but I tried, and I did NOT succeed yet with it.
How should I proceed?
Help is much appreciated!
Question 1:
Of course you're getting a conflict when setting two height constraints of which one computes to 1/3 of the screen width (≈ 107px excluding padding on the iPhone 4) and the other enforces a minimum height that is bigger than this value (e.g. 120px).
Fortunately there's a way out of this using priorities:
Set the fixed height constraint's priority to a value below the priority of your 'greater or equal' constraint. This way autolayout will choose the fixed height constraint only if its constant is greater or equal to the constant of your 'greater or equal' constraint. Otherwise the constant of your 'greater or equal' constraint will be used as the view's height. Makes sense, right? :)
Question 2:
You can achieve the desired behavior as described in your second question by enforcing a fixed height and width for your image view and setting its content mode to "Aspect Fit". In Interface Builder there's a drop down menu for that:
In your case the best way to give the image view fixed dimensions is to pin all four sides to its superview (because the superview has a well-defined size):
So when you apply these leading, trailing, top and bottom constraints to all your image views the images will automatically resized according to the constraints and the result will look like this:
I have developed an app using iPhone 5 storyboard. The storyboard contains many views and I haven't used any constraints on any of the views.
What I am trying to achieve is to make the iPhone 5 storyboard expand to fit on iPhone 6 and 6+ without the need for any constraints, is this possible?
I have read many answer on SO already which lead me to believe that it is possible to get it to work but have not yet succeeded.
I don't have any launch images set, and I ticked the 'Use Size Classes' box for the storyboard.
Why is the storyboard not auto sizing for the iPhone 6. It's driving me crazy.
I hope you can help me,
thanks.
Have you tried using the Autoresizing feature? Uncheck the size classes box and you will see the option to use autoresizing under the measurements section to resize your storyboard for the 6 and 6plus.
http://i.stack.imgur.com/qM4Vu.png
You wont have to use size constraints since you're only making it for the iPhones
Click the "Use Auto Layout" checkbox shown below
Also here is a link to the size of the Launch images you should be using for the 6 and 6 plus.
One way but not recommended. Don't add splash screen for 6 and 6+
If you don't add the splash screen for 6 and 6+ OS will automatically scale all your UI.
The default auto resizing masks, which you probably have, have a fixed top and left margin and a fixed height and width. This would give you all the views packed into the top left corner as you are seeing - the flexibility is all in the right and bottom margins.
You're seriously better off using constraints (even adding the default constraints will probably get you most of the way there) but if you insist on sticking with auto resizing, you need to set fixed left and right margins and flexible width. Height is a bit more difficult, you have to decide which elements will fill the extra space and have flexible height on those.
To ensure that your app supports multiple screen sizes (instead of just scaling up the smaller interface) you should add a launch image .xib file which is much easier than using lots of images.
I have a UIView and a UITableView. I'm trying to align them in a way so they are sticked to each other. The UIView has a fixed height and I want the UITableView to consume the rest of the horizontal space.
I applied a set of constraints which got me pretty close to what I want to achieve but there's a problem that I don't know how to solve. The layout is OK in the portrait orientation but there's a gap between the two elements in the landscape mode. Please see the screenshots below.
Here are the constraint setups for the elements.
UITableView: (all constants are set to 0)
UIView: (all constants are set to 0 except for Height)
Thanks in advance.
I had the same issue of that space appearing above the top cell of a UITableView.
Like yourself, I looked into the constraints and the properties of the table, though the only way I could fix the issue was to delete the UITableView altogether and re-insert it.
Once re-inserted the gap was gone.
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'm trying to add 3 UItableviews to a viewcontroller view using IB and adding auto layout constraints to achieve the following conditions:
space between tableviews and borders = 20
space between tableviews = 20
Equal tableviews widths
when I run the app on the simulator, I get a strange behavior. The tableviews seem to be positioned correctly, behave as expected during rotations, but the content of one of them is always shifted down...
it looks like a space above the header that I can't explain and remove...
Any ideas ?
Thx.
H.
Add the top constraint to the first table view and bottom constraint to last tableview in the view controller and in the middle tableview assign top and bottom constraint as vertical spacing between the table views and height as less priority. It may work.