I want my app to run on every device fine.I have text field on the screen.I am giving constraints to text field as follows:
Aspect ratio to self
Aspect ratio to parent view
I this case my text field will scale according to screen size.Now issue is when i use this method then all my textfields look too big on iPad.I have seen facebook app on which TextFileds don't look too big.I look decent so please tell me what method should i use for this purpose.I know i can use size classes but i don't want to use size classes in my project.
Solution i want if a textField is on iPhone 4s is 20px then on iPad it should be 24px with out using aspect ratio & size classes concept.
Without Size classes You can achieve this using the following constraints. I have tested it on only one textfield and it is in center of screen. So overall constraints on this textfield is as follow:
Align center X to SuperView
Align center Y to SuperView
Width >= 168
Trailing Space to Superview Equals 270(approx) (priority = 999)
Leading space to Superview Equals 270(approx) (Priority = 999)
Height Equals : 30
What happen here is that On ipad 270 leading and trailing will be satisfied while on iphone having less width so both of these constraints shrink and width >= 68 constraints come in action. The result is show in pictures
IPHONE
IPAD
Related
I'm developing an iOS application in Xcode 8. I'm having trouble getting my head around the auto-layout constraints even after reading various tutorials. I am trying to find what combination of constraints allows me to have an adjustable spacing between the top layout guide and the top of my image view.
Below is the preview of the view on iPhone 7 Plus:
iPhone 7 Plus Demo
The top constraint of the UIImageView is currently set to =50, which is the perfect size for larger screens. However, I am trying to have this spacing shrink on smaller screens, as seen below:
iPhone 4s Demo
I have tried what feels like all possible combinations of various constraints with different sizes and priorities but the spacing is either small on all screens or large on all screens. Is there something I am missing?
You can specify different constraint for different trait.
You can do it like below
override var traitCollection: UITraitCollection {
let trait = super.traitCollection
if view.bounds.size.height < 500 {
return UITraitCollection(verticalSizeClass: UIUserInterfaceSizeClass.compact)
}
return trait
}
Override trait collection
Select constraint
Select + button before constant field for the constraint in the inspector
Select height as compact and width as any
It will create another constant field for this constraint.
Specify lower constant value
Else you can make that constraint an outlet and in code, check if view.bounds.size.height < some_value than use smaller value as constant for the constraint else regular value
You can change the top spacing proportional to the height by taking the outlet of the topConstraint and in the viewDidLoad method you can change its value. . Here you need to find a constant value which when multiplied with the actual height of the device gives the required top spacing. Say you need 50p in 7+ which has a screen size of 736p so the constant is 50/736 = 0.067. So in 4s the spacing can be 480 * 0.067 = 33.
You can do this like
topspace.constant = self.view.frame.size.height * 0.067
After some playing around with the above ideas, I found a solution to my problem that lets me see the changes in the storyboard. I position my UIImageView in the preferred location (on iPhone 7+) and set an vertical alignment constraint at the current canvas value - I then set this constraint to have a priority of 750.
I then add a top constraint to the top layout guide which is greater than or equal to 10, this has a priority of 1000.
When seen on a larger screen, the UIImageView positions towards the vertical alignment. When seen on the smaller screens, the vertical alignment pushes the image to the top but the higher priority top constraint of 10 keeps it on the screen.
I have one project where there is one button.
Which seems so big in iphone 4 as per the size in iphone 4 resolution
and same button looks small in iphone6 as per the size of the iphone 6 resolution.
I had used autolayout.
But is there any solution to manage it by autolayout or constraint.
Instead of managing size i.e hieght and width programmatically ?
Give that button an equal width constraint with its super view.
Select that equal width constraint and give multiplier value as (width of button)/(width of superview)
then give aspect ratio to the button.
Now the width of button varies with the width of device and height will change in proportion with its width.
I use this method and it works good.
If you want to manage size of your button, with the ratio of iPhone/iPad screen,
First you need to set equal width and height constraint to your button in storyboard.
Then in code, you have to add two IBOutlet of NSLayoutConstraint and connect them to respective constraint in storyboard, then update yourButtonWidthConstrant.constant and yourButtonHeightConstrant.constant from code according to the ratio.
I have a view on my screen.I have taken iPhone 5 as base screen.I have given following constraints to the view.
1.Aspect ration to self.
2.Aspect ratio to parent view.
3.Horizontal center in container.
4.Vertical Spacing.
Please check this
Here on iPhone 5s the view is not stretched to full width but on iPhone 4 view is not fully stretched.Please tell the issue here.
Ok, I recreated your constraints and was able to replicate your problem. It is quite simple, and is caused by the aspect ratio constraint to superview.
As you can see, the constraint is for text field width to superview height with ratio 320:568. Because we already know the height of superview when drawing the textfield, we need to solve this equation, to get text fields width :
320 textfield.width
----- = -------------------
568 = superview.height
So on iPhone 5, the height of superview (in case of full screen view, of course) is 568 - so we know that textfields width should be 320. On iPhone 4 on the other hand the height is 480. Applying to the equation, and solving for textfield.width we get 270. So it actually shouldn't be stretched.
There is no "issue" here, and everything is working as it should.
If you want the text field to have the same width as it's superview, you should add an "Equal Widths" constraint.
Let me know if you need further explanations.
I don't understand how having together left and right orizontal constraints together.. I still don't understand the exact mechanism beyond interface builder, its constraints and the effective results on the simulator:
I expected the label "ingredienti" in the center of my view (like my input text above with same type of constraints).. Why does it go outside my "screen" in simulation preview?
A leading or trailing constraint (which is what you've set up) sets a fixed distance between the left edge of the view and whatever you've associated it with.
The default simulated size for view controllers in the new universal storyboards and xib files in Xcode is 600x600. But none of the current devices actually have this size.
So, if your label has, let's just say, 100 width, then in order to "center" it using left & right constraints using the simulated interface builder width of 600, we'd create a left constraint of 250 and a right constraint of 250 (250 + 100 + 250 = 600).
But again, none of the actual devices have this width. So if we run your app on an iPhone 6, it'll have a width that translates to 375 "points". If we run it on an iPhone 4s or iPhone 5/5s, it has a width that translates to 320 points.
So, our 100 point wide label is constraint with a constant distance of 250 points from the left edge of the parent view. 250 + 100 = 350. But the iPhone 5 only has a width of 320 points, so part of label appears off the edge of the screen, and the right constraint is broken because the left and right constraints cannot be simultaneously satisfied (you probably have a bunch of warning messages about this in your log when you run the app).
If we want the label centered, we must create a horizontal center constraint (as mikle94's answer demonstrates).
You have to remove left and right constraints from your label and then add "center-horizontally to superview" constraint.
I am using auto layout for my ViewController I know how to define the gap between two views using constraints programmatically. What I want to do now is when the screen size increase, increase the gap also. Because my UIViewsare positioned properly in iphone 4s and 5s but in 6 and 6 plus they are positioned in a small area of the screen. I know adding multiplier we can set the aspect ratio of a view but, how to increase the gap between 2 views when the screen hight increase.
UPDATE
Let say this image,, there is a logo above this please login label.
This is my verticle position constraint
V:|-70-[Title]-130-[lblFirst]-0-[lblSecond]-20-[textusername]-10-[txtpassword]-10-[btnLogin]
this Title is an image 130pix above to this Please Login label. I want to increase this 130 when it comes to iphone 6 and 6 plus
Take a UIView with alpha 0 and clear color and use it instead of the gap and use aspect ratio to the view used for gap and top and bottom or left and right whatever your situation to the views between whom you want to make the gap dynamic. And also you need to add some more alignment constraints to the gapView but it will work. I could not found any other method to do this easily so i have used this method everywhere in all projects and all working fine. I think UIView with clear color and alpha 0 will not effect the screen or performance in any way. We can use this.
Here is an example like if you have two text fields vertically and you want to increase the gap between them dynamically then take a view between then with the exact same width of text field and add those constraints.
1) Top of GapView to upper text field.
2) Bottom of GapView to below text field.
3) Equal width to any text field or leading and trailing to superview or main view.
4) Proportional Height to main view(you can add this constraint by adding equal height from subview to any of superview and then by changing the multiplier);
And your GapView will increase and decrease accordingly.