I have a UIView where in portrait mode the UIView contains 2 columns of UIButtons evenly spaced in a list format. I would like to setup my code so that when in landscape mode the columns go from 2 to 3 to accommodate for the wider space. No I guess I could do this using a UICollection view but I was wondering if it was possible to simplify the build buy using Auto Layout.
Sorry don't have any code yet, wanted to get some advice before I begin coding.
Yes, it's possible. But I would suggest you to use UICollectionView because it makes the Developer's life a lot easier.
You can readily devise one set of constraints that configures the buttons in two columns, and another set of constraints that configures the buttons in three columns, and swap those sets of constraints to change the layout; indeed, if you do it correctly, the change will be animated. In fact, if this is on iPhone so that there's a change in size classes, you can configure the nib so that the constraints get swapped automatically on rotation. But you will still have to have a complete set of constraints, one way or another, for both situations.
Related
I have a somewhat complex layout that I want to make constraints for.
Top three all need to be equidistant from each other and equal widths and heights. Bottom three need to be equal width and heights, and also equidistant from each other.
How come Xcode doesn't have an equidistant margin option? I can't create a specific margin constraint because it wont look correct on smaller devices. Nothing I do seems to create acceptable constraints.
Thanks!
For top three you need to create 5 additional views, place them between this three views and set that they should have the same width. One of them should have some constant width(than all other will get this width as well). Than bind them all by connecting leading and trealing constraints between them. Next thing to do, is to set your views width and height. Margin that you need will be that five views that you placed before between them.
The same thing you can do with your other views, just adding some views to make them as a margins.
Is it what you was searching for? If not Pls describe your problem and I will try to solve it.
As #Dan said, UIStackView is your friend. Put the top three in a horizontal stack view and the bottom three in a vertical one. Your other alternatives are to fiddle with the Multiplier on individual constraints, i.e. 0.0 0.333, 0.667. That would require a lot of work. One other choice, if you're willing to wait to use this in Xcode 8, is that Apple has reinstated the old springs and struts style of pre-Autolayout in Xcode 8, and allows you to use that as an alternative, and/or mixed in with auto layout in Xcode 8. Try the UIStackview first, though, it's the path of least resistance.
I've been trying for days to make one layout of my app to work well, and after days of learning and mistakes I still can't get the table cell layout to look how I want it to be.
This is how my cell .xib looks like in the editor:
http://i.stack.imgur.com/VEr3r.png
And this is how my app looks like when running with suggested constraints:
http://i.stack.imgur.com/wiK1f.png
Why is that? How I can find my mistake and make the layout like it supposed to be, in the view?
Suggested constraints are rarely what I actually wanted to see.
For each label with fixed text, lock the horizontal and vertical positions either to the view or to the next adjacent item.
For imageViews, choose the size you want and lock the height and width.
For labels that you will be dynamically changing the text on, pick a size that will hold the longest string and lock the width. You'll need a vertical position constraint.
You have many options to simplify your layout.
you can use the stakview or create a static UITableView and insert your component inside the cells and enter the Constraint. excellent tutorial http://www.runtimecrash.com/2015/09/17/exploring-uistackview/
I've had several attempts to try and convert my iPad app to make it universal.
I'm only supporting landscape on iPhone / iPad.
My existing iPad setup uses a storyboard without autolayout, which works fine.
My app had lots of images and about 10 screen each with a minimum of 6 views on each, however some have 20 or 30.
I decided a couple of weeks ago that it would a far greater nightmare with all the images, so I've created paint code classes for all my images.
When I first turned on sizing classes / autolayout, Xcode asked if it should enable suggested layouts, this seemed to make sense. However it's made a real mess of the any / any layout.
Without adjusting the sizing classes setting any / any, I tried to install constraints for differing sizing classes. I want to make views bigger to fill the space, so I installed constraints with equal width (with aspect ratio) to subview with a multiplier so I would get proportional sized views. However this means I have about three sets of constraints per view. Which is a nightmare on my simple screen.
I then thought it might be better in my case to leave my iPad storyboard and have an iPhone storyboard. But my iPhone 6+ layout won't look very good. Turning on sizing classes made little sense with multiple storyboards.
I'm now thinking I could click the sizing class to regular / regular and compact / compact and have different views for each?
However any / any, which I can't get any sort of layout to look good, will still need views?
I'm also wondering if should let Xcode setup autolayout when I first enable it? As I say any / any looks bad.
I was thinking I could just plop my views in a vague position with any / any, apply suggested constraints, then click / flip to compact / compact and regular / regular and move things around.
I guess I'd also need to do that for compact / regular for 6+ too.
I'm just not sure what steps to take, I can't even think of workable plan b.
I've watched a million videos and feel I understand but I can't put it into practice.
HELP
My Suggest steps would be:
When we use autolayout and size classes, We always take start from wAny hAny
Take your simple Screen First Let say your login screen on ipad LandScape without autolayout will look like this:
Now you enable autolayout and size classes. Change Scene size to inferred (600, 600).
Now your view look terrible:
First Adjust it by just moving the views to center and correct places like this.
Now we are all set for applying autolayout constraints.
First give constraints to parentview(grey view). Unless parent view has correct constraints, childs view cannot be given correct constraints. So always make sure parent view have correct constraints.
Now we select the grey view and apply constriants like this:
Center vertically and horizontally in container.
Add width and Height Constraints. You got options. Give fixed width and height and modify it for different classes. like this:
Or you can add proportional constraints for width or height.(Better)
Now start with childs. Give them leading, trailing, top and height.
Height of label is 50 for wR hAny and 40 for wR hCompact
Final Results:
IPAD LANDSCAPE:
IPHONE LANDSCAPE:
Autolayout and size class are great and easy when someone get used to it.
HOPE IT HELP.
You have 2 options
1) Create separate layout for iPhone and iPad. In this options you might have to compromise targeted customization for iPhone6+. This option will consume less time, and if you have a time constraint or you think that you are not convenient working with autolayouts then go with this option.
2) Using any/any size class and add constraints to make you interface alright for iPad. After that only modify/add those constraints for iPhone specific size classes which needs to be adjusted. Once you have layout set with any/any for one of the device either iPhone or iPad, you will be surprised to know how much less constraints you will have to modify for specific size classes. This option requires good understanding of autolayouts or even if you are not convenient working with autolayout but willing to try and have no problem with time constraint then you should definitely go with this option.
I've got a UITableViewCell that has a child view, and within it an image view and a label. I am wanting to use the child view as a means of giving some margin around the contents of the cell, thus giving me margins inbetween cells. This seemed to be the way a lot of people online recommended doing it.
I've set up my constraints as shown below:
I have performed a Update Frames on all views in the view controller. The story board shows it exactly as I'm expecting it to be on the phone. When I run it on the phone though, I get this...
I'm completely baffled at this point. I've spent two days of reading and trying to layout a simple UITableViewCell and clearly don't have a good understanding of how auto-layout works still.
I've even just laid everything out along the suggested boundaries (the blue lines) and then told the storyboard to generate suggested constraints. At which point the content of the cell just sent with 50% of it off the right side of the screen and un-viewable.
So two questions:
The storyboard more often than not shows me something that is not accurately represented on my actual device. Is this fairly common in iOS development? Should I not be relying at all on the storyboard auto-layout representation?
What do I have to do to these constraints in order to get the cells to layout on my device, like it is shown in my storyboard at this time? What constraints am I setting wrong?
Storyboard doesn't display the content according to any device by default. You can set it to your current device in its size properties(by default it is "Inferred"). Constraints are used to display the views equal on all devices. They automatically adjust UIelements according to display size. So if you want your app to run on devices of different sizes you have to rely on constraints.
I think you are setting too many constraints. Happens if you are new to auto layout. Try reading this guide. Its very helpful.
I´m pretty new to Xcode and playing around with some techniques.
For testing, i am writing an app where i have a detailViewController with three views within.
As soon as i assign constraints to one of the views the layout gets really strange. No matter if i center horizontally or set border distance, the view seems somehow to vanish and the components within the view are placed somehow.
Any idea what i´m doing wrong?
Sure, you need to follow these basic rules. Checkout the auto layout guide. Each view from the top of the scene to the bottom should have constraints (also constraints should exist from side-to-side if you want expansion and contraction, or have height/width if those are important to maintain). Most times you will need to have at least four constraints per view. The auto layout errors will not go away until all the views have constraints applied and adhere to the simple rules I mentioned above.