I have built a UI for iPhone 6 using the storyboard.
NOTE: Autolayouts are enabled
The UI elements are positioned with constant constraints relative to other elements.
When i run the app on the simulator for iPhone 6 it works completely fine, the elements are positioned correctly.
The issue happens when i run the app on iPhone 6 plus and iPhone 5
On iPhone 6 and iPhone 5 the constraints have constant values and the UI gets distorted due to the change in the screen size.
I have gone through the raywenderlich blog for autolayouts
How do i scale the current UI up/down based on the screen size?(if there is a way), since they share the same aspect ratio?
EDIT:
I have hosted a small demo here. I would like to build a single UI and scale it across the form factors.
Here I've attached a project with the constraints setup. There's probably plenty of ways to set them up to get what you want. This is just one way to do it.
Hopefully this link will work.
This link is broken as of today 7 April 2016 http://speedy.sh/zPEcq/ConstraintsPlayground.zip
There's actually some constraints that's not needed in there aswell. (Forgot to remove them) They are "greyed out", and are under the green and yellow views. You can just delete them.
Answer to comment:
To "scale" the distances you need to define what you should scale from. Is it the width of the screen? What scale should it be? Should there be a max distance? a min distance? You can do almost anything with constraints, but it's sometimes a real mess due to xcode being a b*tch.
Here's an example of how you can scale the distance between two views according to the size of the screen. The gray views are just spacing views, because you need to make aspect ratio from width to width for the spacing view and the container view. The spacing views should have clear color in production:
This link is broken as of today 7 April 2016 http://speedy.sh/B7R95/ConstraintsPlayground-2.zip
The UI elements are positioned with constant constraints relative to other elements.
In that case it should be sufficient to not give the UI elements a constant width and height. In that case iOS will stretch the UI elements to fulfill the constant constraints between the different UI elements.
How do i scale the current UI up/down based on the screen size?(if there is a way), since they share the same aspect ratio?
You can set constraints to preserve the aspect ration of your elements but I don't think this is what you are looking for. Generally you don't need to think about aspect ratios. Just think about how your UI should behave if the screen is wider or taller.
As Spoek already pointed out it would be very useful to have access to your storyboard to figure out the problem. If you don't want to hand out your storyboard you may want to update your question with screenshots and a description of what constraints you put in place.
Related
This question already has answers here:
Springs in Auto Layout: Distribute views evenly, with constraints, in Xcode 5
(2 answers)
Closed 5 years ago.
I am trying to get this layout to work but have failed in these past two days trying.
All the labels have a constant height. All squares on the left are images of icons that are not important.
My problem is regarding the Y axis. This is a frame of an iPhone SE. I need it to expand accordingly to bigger screens like iPhone 8 Plus and iPhone X. Similarly, I could design it in Interface Builder for iPhone X and it should shrink reasonably until iPhone 4s. As far as my understanding goes, size classes don't work on iPhone - iPhone variation since they are all compact width and regular height.
These vertical lines highlighted in blue are not visible in the real app. They are an attempt to always center the black horizontal lines between two UILabel frames. So, what I really need is: if the screen gets smaller, the blue vertical lines should shrink. If the screen gets larger, the blue vertical lines should expand. The problem arises when I try to also make the UITableView have a variable height.
Anyone has any ideas to how I could solve this problem? It's very important to me.
There are many ways to achieve what you're asking for, but UIStackView is great for these kind of things. To answer your question in detail would take too long, but here's a screenshot of a quick mockup in interface builder, perhaps you can figure it out.
I didn't quite understand what you meant by those blue lines, in my example the tableview height is dynamic as its hugging priority is lower than other elements. But you could give desired height to each element and set stackview distribution property to "fill equally", then the stack view will fit your screen in y axis and will create equal spacing between elements.
and the simulator screenshot:
And here I gave each container view a static height and set the main stack view distribution to "equal spacing", as you can see it adjusts the spacing between the container views:
If you want them to be the same proportion depending on your screen, you can make them with multiplier:
Try make them the same height as your container view, but with multiplier 0.15, or something. If they equal, you need one constraint for 1:0.15 and all others to be equal to this one
In order to get an iPhone layout to display at 'correct' dimensions on iPad, I'm putting everything (rose) into a view (blue) within the ViewController (gold)
Click / tap to see Schematic View
The iPad is shown as the larger frame with the grey status bar.
So to cater for 7plus size iPhones downwards, I'd have to set up constraints for the 7+ within an iPad frame with different priorities
in different directions. Once the blue view is set, i should happily be able to add my Sub Views in I.B.
Since the whole lot has to appear in the very centre of Ipads, step (1) is to set alignment centre-line constraints of the blue View with priority of 1000.
Next would be to fix the size for iPad displays larger then 7+. Acheived with setting size constraints as a maximum to shrink from. I've only shown the ≤680, so that height or less as in step (2) but a lesser priority, say 750.
Then for it to reduce down in size toward SE size i want to hold that say 20 points away from the viewController (gold). So the constraint for that should be ≥20. as shown at (3), I've assigned 740
The principal works nicely in the horizontal direction, but not the vertical. I've tried endlessly to adjust different priority assignments, including the 'Content Hugging' and 'Content Compression Resistance'properties and I never seem to get the desired results once I put the actual entities I want to see (rose) within the Blue view.
I've read Apple's Autolayout Design Guides closely enough to almost say I've written them, and after 35+years of CAD and 3D animation modelling, I think I could describe objects in text parameters before the iPhone existed.
But I've been bested here. Am I taking the long way 'round to just get an ** iPhone only ** layout to display correctly? My little bald spot thanks you for your answer.
If it were me, I'd use trait variations instead of trying to handle layout for every size class in one set of constraints. I think if you take that approach, you can accomplish what you're after with a lot less work and in a way that's independent of devices that may appear in the future.
Also, keep in mind that if your app supports iPad multitasking, you may have sizes on an iPad that you're not expecting (like iPhone portrait width in device landscape orientation).
With autolayout, try not to think in terms of device type or orientation. Think in terms of the appearance you want for a particular size class, wherever it appears, in whatever device orientation. That gives you the opportunity to create a the best user experience for a given display area, and will make your life easier during initial development as well as when new features are added or new user devices are in the mix.
I'm new to iOS development and I'm having some issues with the auto layout feature in Xcode 7.
As the image attached, my circle progression view doesn't scales fine for the 3.5" iPhone and it certainly looks fine with the other size classes.
Is there a minimum size limit for UIView in Xcode?
Also there are two text label in the circle view and no matter how I constraint them, their size just won't change across iPhone size classes.
As you might notice I have a SOS button which is a button embedded with an image I designed. I have added some constraints similar to the circle progression view but it doesn't work at all.
Is there any good guides/tutorial where it specifically teaches how to manage iOS element sizes across all iPhone size classes?
You can set the controls heights and the spacing bitween them to be related to the main view height. That will make them shrink little bit in 3.5 inches screen. You can then play around the constraints values to find the most convenient to you. like this
I'm struggling a bit with constraints on iOS with the differents screens sizes nowadays.
I tried google and stackoverflow to find a solution but my english does not seem fluent enough to find an answer.
I got 4 buttons verticaly aligned, the first and the last one are constrained by the edges of screens (kinda easy). But I'm really struggling with the constrains of the 2 middle buttons. I can't find a way to make them equally spaced from the left and right buttons on every size screens.
Is there something easy and tricky to make these constraints right ? Or am I doing it wrong and should I try to do it programmaticaly ?
Thanks
Add three invisible views in middle of each button, make their width equal with each other with constraint then your four buttons will be equally spaced. For the Y then you just need to pin it at your desired place.
If you are going to support only iOS 9 and higher, then use a UIStackView.
The solutions to this problem is very simple. This can be solved using the concept of "spacer views". You have to place invisible views between each red coloured view. You would be requiring 3 in your case. Then make their background as clear colour. .
Next, make their width equal and constrain their edges to the views that are after and before that view. You then define the size for red coloured view.
REMEMBER dont give the "clear coloured views" any fixed width. It would be determined by the runtime.This would solve the problem. Tell me if any more information is required.
Here is a blog post for the solution for this
http://adamdelong.com/fluid-layouts-with-auto-layout-size-classes-spacer-views-and-constraint-priorities/
This is the youtube video for this
https://www.youtube.com/watch?v=eSG-3-QpmWk&feature=youtu.be
Besides Tj3n's answer with views between buttons, you could use
A UIStackView (iOS 9!) where you use for settings Axis: horizontal, Distribution: equal spacing
A Toolbar (depends on what you want to do with your buttons) with toolbar items and flexible Space between them
Why not size classes? Apple introduced the concept of adaptive user interfaces in iOS 8 relying on a combination of Auto Layout and size classes.
If you aren't aware of what is size classes, there are plenty of tutorials available, please find one.
Summary: Apple very cleverly removed two story borads for iphone and ipad and made a single story board for universal app. No you dont have to struggle trying to apply autolayout constraint that satisfies all the screen sizes :)
Below are few of the size classes and their meaning :)
Regular width x Regular Height ----> iPad Potrait mode/ipad landscape mode
Compact width x Regular Height ----> iPhone 6 plus,iPhone 6,iPhone 5s,iPhone 5,iPhone 4s potrait mode
Compact width X Compact Height ----> iPhone 6,iPhone 5s,iPhone 5,iPhone 4s landscape mode
Regular width x Compact Height ----> iphone 6 plus landscape mode.
You can select the size classes you want to support from story board :) and start applying constraints specific to each size classes (like buttons in middle) or if you have generic one (like your buttons fixed to screen) for all the size classes.
You can deploy, remove, reuse or delete the constraints form various size classes.
SUMMARY: Buddy, If you are not using size class yet, its a high time to start using it :) There is a wonderful video on it in apple WWDC sessions 2014 i believe. Download, watch, start playing with it.
Happy coding :)
you can use equations to get this appearance.
use views' trailing points to get this.
View1.trailing = superview.trailing*(2.0f/9.0f)
View2.trailing = superview.trailing*(4.0f/9.0f)
View3.trailing = superview.trailing*(6.0f/9.0f)
View4.trailing = superview.trailing*(8.0f/9.0f)
if you make View1.width = superview.width*(1/9.0f) you can achieve what you want.
there are a lot of similar solutions for this issue. but the base is using trailing points.
It may also be done with using centerX positions of Views.
View1.centerX = superview.trailing*(3.0f/15.0f)
View2.centerX = superview.trailing*(6.0f/15.0f)
View3.centerX = superview.trailing*(9.0f/15.0f)
View4.centerX = superview.trailing*(12.0f/15.0f)
Thanks to LearneriOS answer, I solved my problem.
In order to get my wished result, I created 3 views with 10 width.
My first and my last button were already constrained. I constrained my first extra view to my first button with Horizontal spacing then i constrained my first extra view with the Center vertically in container. I then constrained my extra view to his own width and heights.
There come the important part: I did go on the constraint menus and selected the width constraint. The value inside was still 10 but I did change the priority from 1000 to 750.
Then I did copy my first extra view and constrained all of them to the nearest buttons, the same way I did with my first entra view but I removed their width constraint (to all the extra views but the first one) and constrained the extra views with the first one by plugging the: Equals Width.
Then I got my result, I hope it was clear enough and thanks again.
I'm a bit stuck and any help would be greatly appreciated!
I'll give you a quick overview. I have designs for a screen that were built in sketch using an iphone 6 screen size, then redesigned to fit and look right for an iphone 5/5s/5c, and 6 plus as those are the only devices that I want to support.
But the design portion or implementing the designs for just one specific screen size is easy and I understand that part. Where am I'm lost completely, is how to implement a design in one view controller that looks the way that it should in all the screen sizes I designed for.
I've gone through more than a few auto layout and size class tutorials and not sure how I properly use them so that the app recognizes "this is an iphone 5, use these image sizing and placements instead, and this is an iphone 6 plus, use these" and so on.
Everything I've seen to this point regarding auto layout and constraints only use 1 set of numbers to judge distance from elements for example, but all screen sizes would have different distances.
What am I missing or not understanding? I know I'm looking at something improperly.
Thanks in advance for all help!
You're correct that just one set of numbers could be used to judge distances, but this can still describe how a view should appear on different screen sizes. Your problem may be that you're thinking of constraints as describing the frame of your view? (Which obviously has to be different on every device). I find it more helpful to think of constraints as describing how each edge of my view relates to another view.
For example here's a view controller I setup with all the same constraints and how it would look on different devices. The constraints describe how the large grey view is pinned it's left and right edges 20 points from the left and right edges of its container view. It's pinned to 8 points from the top and 8 points from the top of the label. The label is centred vertically and horizontally and it has intrinsic content size. Each button is pinned 20 points from the bottom edge with button 1 and 2 being pinned to the 20 point from the left and right edges respectively.
I don't know if that helped or if that wasn't the answer you were after and you need to arrange your views differently depending on the device: you can tell Xcode which device size and orientation the constraints you're creating are for, using this button in Interface Builder.
Use it to select a device size/orientation. After, any constraints you create will only be used on that device. By default any width and height are selected so normally your constraints are applied to all devices.
Also, you cannot choose which devices you want to support, only the iOS version.