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:
Related
I am working on OS-X app, and I need advice on the window size.
Before someone to jump and declare this question as duplicate, I have read this post:Window Size for Mac application but it didn't help me to solve my issue.
My issue is the following. I use NSTableViews to display some of the data. However in some windows, I am getting horizontal scroll bar in the NSTableView due the numbers of the columns.
Things to be worse, the data in some of the columns are not completly visible, you have to resize the column to reveal the complete text in that cell / column.
I am thinking of increasing the initial window size, but I can't decide how much.
My current window size is 1024 x 768. User can make the app full screen, and window can be resized to be larger than this size, but not smaller.
Any help will be deeply appreciated.
Regards, John
For the table, you should set minimum widths for each column. Select each column in the document outline and view the Size inspector. You should also review the Resizing pop-up on the Attributes inspector.
Similarly, you should review the Column Sizing pop-up on the Attributes inspector for the table view itself.
With respect to the window size, I recommend that you use auto layout if you're not already. Apply appropriate constraints to all of the view, ultimately relating them (directly or indirectly) to the window's content view. Then, don't set a minimum size for the window itself. Let the constraints impose an effective minimum (and potentially even maximum) size.
The trick though, is that not all views will have an intrinsic minimum size. For example, the table view itself may not get any narrower than the sum of the minimum widths of its columns, but it's in a scroll view. The scroll view is allowed to get narrower than the table view, resulting in horizontal scrolling. So, you may need to add an explicit minimum width constraint to the scroll view.
If you set constraits for text inside the rows, you may get some horizontal scrolls. But if you set the constraits for the app elements like UITableView to the borders of the app window, you may resolve this issue.
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.
I'm using Sketch to create images that will be used in my Xcode 6 auto-layout storyboards. However I can not get the image sizes correct. They always appear too large and overflow the storyboard view controller. Is there a way in Xcode to see the dimensions the storyboard expects? Is there a systematic way to do this...rather than trial and error?
Storyboard, especially in auto layout mode, doesn't expect any dimensions – dimensions will depend on device screen (in reality) or on simulated metrics (in Interface Builder in Xcode).
What matters is aspect ratio and presence of three resource files (three sizes – regular, 2x and 3x).
You can see the list of dimensions here:
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
So, let's say you want to insert an image that occupies the whole width of the screen, and the height is chosen automatically so that to keep the aspect ratio. What you could do:
Create images in Sketch with widths of 320, 750 and 1242 pixels. Save them as image.png, image#2x.png, image#3x.png.
Insert image in Interface Builder (Storyboard), add width constraint – equal as superview, instead of height constraint – keep aspect ratio.
If the image looked too big, Interface Builder will complain that preview image doesn't match constraints, you will see a little yellow arrow. Click on it, choose the warning and click again – Xcode will offer you to "Update frame". That will resize the image correctly if necessary. Don't forget to choose correct scaling mode (Aspect fit?) for your image.
Moreover, you can see current width and height of the simulated screen in Metrics tab. But those will change every time you change your preview (simulated) device type.
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 having trouble with autolayout and labels that get their text set in the source code based on some external conditions. These layouts (portrait and landscape) look like this on the simulator:
http://imgur.com/l6Iirun
http://imgur.com/n7RwwSD
The second one is obviously not what I want it to be, the label with the URN should fill the whole screen.
I have a width constraint for the dynamic label added by Xcode which I can't get rid of even though the "Name"-label has a fixed width and all horizontal spaces are fixed as well which should logically rid me of the need to have a width constraint for the label containing the dynamic text.
Any help on how to achieve what I want? Thanks in advance!
It looks to me like your labels are not binding their trailing edge to the superview. In the lower right there is the little 'I beam' icon, click on your label and then that icon, the top of the menu should be 'Pin' and pick trailing edge to superview. The label should expand to fit the width of the screen, minus some padding. Once that is in place you should be able to remove the width constraint - although you may need to find it in the size inspector and select promote to user constraint before you can remove it.
If you don't see the pin menu, try going up to the top and picking Editor -> Pin and you should see it there.
If it is already pinned, try increasing the content compression resistance priority and decreasing the priority of the width - although if pinning it does not fix it then there is another constraint at play.