I have a calculator display in my app that uses auto layout. The iPhone 5 and iPhone 5s have the same display and resolution; however, when I run the app in the simulator the iPhone 5 displays it far poorer than the iPhone 5s. Why is this, and how can I fix it?
Since I cannot see your constraints it is difficult for me to give you a definite answer. This is what I would do.
select the text field that is mis aligned
click on the far left triangle between two pikes icon.
click on clear constraints.
a. rest to suggested constraints -or-
b. control drag to the sides and create your own constraints
According to this link https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/AppearanceCustomization.html
To adjust how a view controller lays out its views, UIViewController
provides the following properties:
edgesForExtendedLayout: The edgesForExtendedLayout property uses the
UIRectEdge type, which specifies each of a rectangle’s four edges, in
addition to specifying none and all. Use edgesForExtendedLayout to
specify which edges of a view should be extended, regardless of bar
translucency. By default, the value of this property is UIRectEdgeAll.
Try to set self.edgesForExtendedLayout=UIRectEdgeNone;
Related
I am using AutoLayout and Size classes, but with release of iOS 10 and new Xcode 8.0, there is one new option Vary for Traits. Is this replacement of Size Classe for different width and height of devices.
By selection of width checkbox, it displays varying 14 compact width devices.
By selection of height checkbox, it displays varying 18 compact height devices.
By selection of both checkbox, it displays varying 11 compact width regular height devices.
How to make use of this options ?
Can we use AutoLayout with size classes as like Xcode7.0 ?
If any one has in depth knowledge then please explain it.
This is just an extension as to how to use "Vary Traits" quickly in your project for adding different layouts for iPad and iPhones.
Please read this for understanding more on the Size classes.
https://developer.apple.com/reference/uikit/uitraitcollection
If you are skipping the example which follows below, do read the Summary in the end.
OBJECTIVE :
You need a button having different widths in iPhone and iPad. The former having width of 80 and latter having a width of 300.
METHOD 1 :
Vary for Traits with Multiple Constraints as installed.
STEPS :
Add the common constraints first like Center the button horizontally and vertically.
Choose VaryForTraits and for iPhone screens as per the size class guidelines , a C*R size class fits the model and this we check the tickmarks of Width & Height in PopUp. Dismiss the pop-up by clicking anywhere on screen.
Add the width constant and check whether the constraint is added for C*R size-class. After adding constraints, choose Done Varying button.
For iPad screens, again select any iPad device and choose VaryForTraits and this time on clicking height-width, it should show R*R variation.
Again add a width constraint, the last added iPhone width constraint must be unhighlighted as in the screenshot. The value added will be for the size-class R*R this time.
Switch back to iPhone layout and it takes 80 as width and iPad will take 300.
CONCLUSION :
Please notice that there are total of two constraints added and in both the constraints, the values differ according to the size-class chosen.
METHOD 2 :
Vary for Traits with Single Constraint , Multiple Size-Class installed
STEPS :
Add the normal width constraint. Then select that constraint and choose the + button besides the Constant value.
Add trait variation, and for iPhone we choose C*R and set the constant value as 100.
Again for iPad which follows a trait variation as R*R, we add another variation by clicking again on + button and set the value as 300.
Select an iPad and the width will be automatically taken as 300 and coming back to iPhone it takes 100 as value.
CONCLUSION :
This seems to be a better option rather than adding two constraints when a single constraint is only required and the constant value differs.
WHEN TO USE, WHAT TO USE :
Both the approaches are basically doing the same thing, setting values to Size-classes.
But, #Method1 is used when you want to add a constraint specifically for a device or say size-class. For example, in iPhone the button should be from Top 50 pts and in iPad it should be centered horizontally and vertically. In such situations, you need to use VaryForTraits as it opens doors to add constraints for a specific size class.
#Method2 is used when you want different constant values for a same constraint type.
P.S : TO ALL THOSE WHO ARE NOT ABLE TO GET THE EXAMPLE WORKING
Please make sure, you are adding only the required constraints as Installed. The checkbox against Installed should only appear for the constraint that you need for a size class. That is the key!
Just add a top constraint & a leading to an uiButton in a view. Select the top constraint and uncheck the basic Installed option with Plus sign. Now, by clicking on the Plus sign, add variation to CR and check that option. Now, change the device from iPhone to iPad with various orientation combinations. This constraint will be applied only for CR size class which is iPhone in portrait orientation. If the checkbox against the basic Installed (the one with Plus symbol) was checked that means the constraint should be applied to all size classes.
SUMMARY :
Trait Variation is a change to the presentation of your user interface that is based on a device configuration. Trait Variations of the user interface is not just limited to constraints but can be applied to much more. Such as changing the color of the background and other elements when the device is set to a dark style. A variation can apply to an element of the user interface, such removing a constraint, or to a property of a view class or constraint, such as the font for a label. You can vary:
Size or position of a view
Installation of a view
Installation of a constraint
Constraint constant
Font
Color for the font, tint, or background
Layout margins
Image file
The specific set of properties you can vary depends on the class of the element. In the example, we have demonstrated the use of- Installation of a constraint & - Constraint constant . Others, are quite simple and can be easily inferred.
Vary for traits is the evolution of size classes option that was present in the past version of Xcode. It allows a much more nifty and precise variation based on traits. Of course, it is not limited to iPad/iPhone only variations but you can specify also variations based on orientation and different device.
Other answers in this thread have some lacks and inaccuracies, perhaps the most efficient way to give an answer is to make an example. For the sake of clarity we will limit our example to only a button and two layouts. However, as explained below, you can extend the following example as you wish. Our goal is to to adjust the position of a button between two different layouts: landscape and portrait on all devices.
Note: If not enabled “vary for traits” option, all layout and ui interface adjustments are referred to all traits (ie. all size classes).
Let’s start by putting a button on our storyboard. Since “vary for traits” is not enabled, the button will be present in all different layouts. If, instead, we had enabled vary for traits the button would be referred only to the particular trait selected.
Now, let’s enable “vary for trait” and choose a variation based on height. You should see that the bottom screen will turn in blue and according to the selection you will see all the device impacted. So far, so good.
Select again the button and add the constraints ad usual. In our example, we will add top and left leading space as well as width and height. After that, click on the “Done Varying”. You will see that the bottom part of the screen will turn gray again. What is happening is that we have told Interface Builder to add the above constraints only for the (w:C h:R) classes.
Now select the landscape mode on the bottom of the screen. You will see that the Button is in red, because it lacks the constraints that you have added only for some traits. Select again vary for traits and select again the height variation. Add the following constraints:
and press done varying. Now the button is well identified on the screen both for landscape and portrait.
Build and run. You will see that the button will change according to the orientation of the screen.
You can create more advanced layouts following this pattern. For example, you can select at the beginning a vary for traits and drop UIKit objects only for a specific trait. This object will be present only in the specified variant and will be greyed out on the others one allowing you to create completely different user interfaces based on traits.
It is nothing but size classes it self but with different representation. till xcode 7 we used size classes and we consider height-width in regular,compact and any manner, in vary for traits concept is same but xcode specifically explain exact device. In older version we know that for every iphone in portraint etc kind of information where in this we can know exact device!
Check the below screen shots,
You should refer wwdc2016 - video for more information!
Reference : This So Post
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.
So I've been using size classes in Xcode 6 beta. I started out by putting some buttons in the middle of the screen in the AnyxAny base class. They showed up on the right side of the screen when I then ran the app in the iPhone simulator. To fix this, I went into the compactxregular size class and dragged the buttons to the middle and spaced them out a little. Then, when I ran it in the simulator, nothing had changed. Why? Is it just a glitch in the beta version or am I not doing something right? It worked when I added a center x alignment constraint to the buttons but I still wanted to do some spacing. (and also, what's the point of the size classes if I could just do it using constraints?)
The size classes are important so you can add individual constraints per size class (using the same storyboard). It has the flexibility to allow you to share certain constraints between all sizes devices and orientations, or just a single.
Click on each constraint you add and on the right menu, you can toggle which size class you'd like to add the constraint for. (It's the + button next to the installed check marks)
You can specify different constraints for different size classes. Watch the WWDDC 2014 video View Controller Advancements in iOS 8 to see how to do it in IB. If you can specify the layout you need without size classes, don’t bother; they’re just for overrides.
I'm using Auto Layout for an iPhone app to place a button footer bar at the bottom of the screen on both 3.5" and 4" iPhones. The bar is a UIView containing two UIButtons and a UIImageView.
I have a Vertical Space Constraint pinning the bottom space to the superview.
(Editor -> Pin -> Bottom Space to Superview)
It has an Equal relationship. Constant is 60, Standard is NO, Priority is 1000, and Placeholder is NO.
In iOS 7 it works exactly as expected. In iOS 6, it does not. The bar is not a consistent distance from the bottom when I switch between that view controller and its neighbors, and the buttons frequently do not work (they don't even highlight when I tap them). This is all in the simulator, I haven't tried hardware yet. The app is a legacy app, so all of the layout work is in xib files, not storyboards.
Do I need to do something different in iOS 6 to get Auto Layout to work? From what I read, it should be fully compatible with 6 & 7.
Some more information is needed to really get to the heart of the matter. Specifically how auto layout is being used to attach the bar to the bottom.
One thing that gets me over and over though, is remembering to set the translatesAutoResizingMasksIntoConstraints property to false on view(s) that utilize constraints.
Be sure to check the log output while debugging as that will indicate if you have any ambiguous or unsatisfiable constraints. At design time, XCode 4 IB will attempt to add any constraints that you are missing for you. XCode 5 IB will only tell you what you are missing and then at runtime try to add any missing constraints if it can.
If you look at the screenshot, showing a list of US states, "WV" is not the last row, there are two more rows after: "WI" and "WY" which extend beyond the bottom of the layout. This used to work with Xcode4/iOS6 regardless of whether or not you were in 3.5-inch or 4-inch. Now this only seems to work for 4-inch but not 3.5-inch.
Does anyone know how to get the height behaving correctly for Retina 3.5-inch?
The orange background in the storyboard screenshot below is the View background color.
You need to use the buttons in the lower right-hand side of the interface builder. Specifically, you can use the "Pin" button to create constraints to the top/bottom and other gui objects.
Constraints in Xcode4 used to auto-create if you dragged an object to the edge of the screen but not anymore in Xcode5 which is why I was confused.