I have issues with auto layout, when was presenter new iPhone my layout which was created for 5, 5.5, and at the 6.4 inch was locks not so nice.
Example iPhone XS Max:
iPhone 8:
So, how i can fix this, and this will locks nice?
Check your view constraint(bottom) It should be connect with Safe Area not superview
Form your question what I understand is that you want to distribute space according to screens.
I think you should divide cell layouts on to 3 parts and add controls of that part in to a views
then give all views equal height.
By doing this you will have full screen decided in three parts.
And at the end you can add constraints to controls which we added in view according to you requirements.
Note: Cell main content view height should be equals to screen height.
Hope this helps.
Related
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 have a view:
Can someone help me to layout these views that they all look the same on every iPhone? I mean size is dynamic and views shrink according to screen size.
I have tried aspect ration and other layout options but none helped.
if you want to change the view sizes on different screens using auto layout ,you have to add the height and width constraints .then only it changes view size.
Steps:
open your project in xcode.
goto storyboard choose Auto layout ,select your view ,
in Xcode From the Editor menu, choose Pin\Width and Height both
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
As per your question please look at the link below it might help solving your problem of multiple views size and layout.
https://stackoverflow.com/a/27471120/4101371
you can also refer:
https://www.youtube.com/watch?v=Nl2iMF0yKW8&list=PLXCowKcXAVgrxHKLWTa4HxNPrSmTj3D-_
I've also added this link in the answer in above answer.
I am using Xcode 6.1 and in one of the views I have, contains many labels. However, these labels look different in each different devices. Although I have add constraints to all the labels, but still facing the same issue.
How can I get the same view layout across all devices?
How can I make the width and height for each label is flexible, depends on the screen size?
Do I need to design different xib for each device?
The following images showing the result am getting, with auto resize enabled, and constants been added.
on iPhone 6
on iPhone 5
on iPhone iOS 7.1
We have provided with a simple solution . Using Aspect ratio constraint we can get a relative look in all device screens.
I had the same issue and I found this >>
http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
So when designing for lowest to highest screen resolution we can't set a specific width and height for all controls as it may look weird. So using this constraint we can have a relative look for all screens.
If you don't want to use constraints or you want to keep the same width & height , you can add scrollview to hold all controls. For that you can set a resizing frame for scrollview with fixed content size .
To solve this...
1) Go to xib file and uncheck the Auto layout
2) Then set the autosizing manually in the following manner for each and every subview.
Use self.view.bounds.size.width to get the width of screen, then use relative value to initialize all labels.
One soultion is that you can Design a story board for each screen size like one for iphone 5, one for iphone 6 and one for iphone 6+ and in your AppDelegate method "didFinishLaunchingWithOptions" you can get the screen size and popup corresponding storyboard
in this wasy you can set different constraints according to different screen size
I have laid out my ViewControllers in Storyboard using Auto Layout, and everything looks perfect on an iPhone 5. Now I'm testing for iPhone 4 and things are not in their correct position. For example, I placed a UIView at the bottom of its parent UIView. It's width is the screen width and its height is 100. It shows up nicely on an iPhone 5 but doesn't appear at all on an iPhone 4 (I think it's because it's drawn at the height it should for an iPhone 5 which is too far below the screen for a 4)
If I'm using Auto Layout, do I still need to make adjustments to my Views? If so, what's the point of using Auto Layout at all?
Here is the approach to make your layouts fit to retina & non retina form factors.
I am not saying these are the rules, but I follow this approach & hardly get any conflicts which is difficult to resolve.
First & foremost : Always try to design your storyboard on non-retina form factor (I mean in your case design it on iPhone4 size & then apply retina-Form Factor & verify how it fits on iPhone5 size.).
Definitely your view at the bottom of its parent will be having a fix constraint for "Y" position. Usually, you need to make a relative constraint. So when you show it up on iPhone4, the Y & the height might be going beyond the maximum Y axis value.
Try checking these values for your layout in Assistant Editor like topSpace, leadingSpace, trailingSpace, bottomSpace .
AutoLayout doesn't mean that it will fit to your needs, however it adjusts the component accordingly.
In case of any warning in Storyboard, try using the help & suggestion provided like, add missing constraint or adjust frame to suggested
Storyboard will never behave in the same manner for each & every screen or view your design. You need to practise it more & more & you get to know how to add constraints.
Hope that helps.
I am try to develop an application involving text views. If I use the 4 inch size, it goes out of the screen on 3.5 inch devices. If I change the size to 3.5 inch, fix it and change it back to 4 inch, there is this big, ugly gap above the text view.
I think the solution to this problem is multiple view controllers. One for the 3.5 inch and one for the 4 inch. But how would I do this? I am using Xcode 5, developing for iOS 7 and testing on an iPhone 4.
Thanks,
Romejanic
You dont have to use two view controllers. All you need are some Auto Layout Constraints or autosizing mask to resize your view for different screen sizes. Below are some helpful links.
Tutorial about auto layouts:
Part 1: http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
Part 2: http://www.raywenderlich.com/20897/beginning-auto-layout-part-2-of-2
Working with Constraints in Interface Builder
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraints/WorkingwithConstraints.html#//apple_ref/doc/uid/TP40010853-CH8-SW1
Apple Auto Layout Guide https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html
A similar question about how to set auto layout constraints for 4 and 3.5 inches screens
Resize view with Auto Layout between 3.5 and 4 inch form factor
If you are using .xib to create your UI then in the size inspector there is an Autosizing feature. You can hold the lower and upper bound for the text view and stretch the text view,i.e, click on the vertical arrow in the middle of the box. This will auto resize your text view according to your device height.