I wonder how we can fit different screen sizes with lots of textfields e.g. resize the fields/textsizes etc for Swift.
Here is my design at the moment:
https://ibb.co/wQF3rrQ
*Grey = textfields
I've tried with setting constraints and all of that, but it won't work. I can't find myself what's the problem.
Should I set the constraints programmatically rather than in StoryBoard?
There are multiple ways to do what you want.
Do you see the Vary For Traits button in your storyboard, located below your Xcode? There's a use for that. Take a look at Adaptive Constraints on Google, and you'll get tons of tutorials. Like this: https://medium.com/zendesk-engineering/ios-how-to-add-adaptive-constraints-to-support-a-universal-app-273663475b12
Second way is to make use of multiplier of your constraint.
Third way is the, uhmmm, a usual (or unusual) way of some developers I know. Make reference of each constraints, and toggle their values based on the screensize (or device) of the user.
Related
In Xcode, when using the autoresizing option for any type of object, things seem to stay where they're supposed to be while maintaining a proportional size to the scene. I generally just select the inside arrows in the autoresizing box and everything maintains adequate sizes and proportions. However, I've seen multiple times on tutorials, blogs and videos that using constraints is "the right way". Why would the use of constraints be better than autoresizing when autoresizing seems to work perfectly? Would any problem surge when using autoresizing if I work only on iPhone in portrait mode?
Well there are a two reasons I think. The first is probably the most accurate, but might leave you feeling weird after. Because Apple is pushing it. Usually when apple is backing a new tool in their api, its wise to follow because they will drop support for old things you get used to like Autoresizing. Kinda sucks I know.
The second (better) reason that Autolayout will let you write view components that you can reuse between many different screen sizes. Yea Autoresizing helps, but Autolayout gives you more control when the screen size makes a large change like from iPhone to iPad. I've written views that live in all my iphone/ipad/apple tv apps.
An important reason is to allow views showing text, such as labels or buttons with titles, to adapt to the text content and font.
The text content should change due to internationalization/localization.
The font can change if Apple changes the system font or if the user asks for larger text to make reading easier.
With proper application of auto layout, your layout can adapt to such changes and still look good. Without auto layout, you would need to manually alter the layout to accommodate such changes.
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.
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.
If the text of a label in a universal storyboard is too long to fit some resolutions, how do I accommodate it?
Storyboard View
iPhone 6 Emulator
I'm not sure if there is a proper way to go about this according to the guidelines, but I would assume I would either text wrap onto multiple lines or adjust the font size automatically.
Here is a simple gif, which can help you to understand it better.
You can do either. First set the constraints so that the UILabel does not go past the edge of the screen. Then you have two options. Either set the minimum font size of set the number of lines to 0 (or both).
All of these settings can be set in storyboard.
Edit to following your comment
Constraints are usually set in the storyboard and dictate how a view is drawn based on the device you are using. It's a large and critical subject and Ray Wenderlich has a very good two part tutorial on it.
I have three different alternatives to design a view, at least three that I could think of / understand from different blog posts and SO questions. The layout is pretty simple, some labels and textfields to provide a login. The thing is that it should adapt to any device screen (iPhones portrait for now to limit scope).
Each one of the three alternatives seem to have pros and cons, but I want to understand which one (if any) is the proper way in which we are supposed to design with adaptative layout, size classes and universal storyboards in mind.
Please, don't hesitate to point me wrong!
1.- Design on Any W | Any H size class, and once I'm happy with the default design move on to specific situations:
The issue here is that there isn't a size class that allows me to specify a constraint only for 3.5inch devices (all cases I tried affect none or several). Therefore, I don't know how to properly define a specific constraint that overrides the default one in this unique case.
2.- Same as before, design on Any W | Any H but using smaller gaps between elements.
It looks as good as it gets in smaller devices, but a whole lot of space is lost in bigger ones as the constraints don't adapt. Maybe constraints should be overridden in this case, which would be the inverse case as the previous point.
3.- Use a subview hierarchy to distribute the elements.
Embedding elements in subviews inside other subviews I managed to have a dynamic layout that adapts to the height of the screen, but it doesn't look right at all in bigger screens. The subviews are expected to take up the same height, but I'm not sure this is quite correct.
i think it really depends what you want, its hard for us to tell you what your app should be like, although i would think the last case is what you would most likely want (in general, for a login page like this i would choose number 2), i think it can be achieved without using subviews though, try setting each textfield to having a vertical center, and set the multiplier to a value that puts it in the right place, then it should stick proportionally where its supposed to be