I am working with xamarin.forms and using constraints to center and scale a logo in my splash screen. The problem is: The constraint that I define to Iphone 5s, 6, 6s etc.. doesn't work to the Ipad, and when I define it to the Ipad, it doesn't work to Iphones...
Does someone know how to solve that?
Iphones contraint (in right positions etc):
Ipads constraint (it's is wrong here):
If you just want to center the logo in the screen, I am not sure why you would go with different Size classes for iPhone and Tablet.
Instead of W-Compact, H-Regular for iPhone and W-Regular, H-Regular
for iPad, I would suggest you to apply your constraint with W-Any,
H-Any & View As should be : Generic.
If you set W-Compact, H-Regular, the constraint applies to
iPhone(Portrait) device.
If you set W-Regular, H-Regular, the constraint applies to iPad
devices(Both Orientation).
If you set W-Any, H-Any, the constraint will be applied regardless of
the device size and orientation.
To Center the logo, I would recommend 4 constraint to be set for the Logo.
Width = Fix Width
Height = Fix Height
CenterX to Parent = 0
CenterY to Parent = 0
-----or-----
Top Space to Parent = 0
Bottom Space to Parent = 0
Leading Space to Parent = 0
Trailing Space to Parent = 0
Set, UIImageView mode to Aspect Fit.
Hope it helps.
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 am attempting to vary my auto layout constraint by iPhone version. The vary for traits allows you to differ by size classes. However all the iPhones in portrait orientation are all compact width and regular height.
Assuming I have an element that is horizontally centered but I want my distance from the top of my main view to vary based upon device size, how should I accomplish this?
You cannot specify screen-sizes or device versions in auto-layout - only size classes.
If relative positioning/sizing doesn't work for you, and you want to do positioning such as 5 pts on iPhone SE and 15 pts on iPhone 6, you have to do it via code. Your options are:
Don't use auto-layout...
Change constraint values (constants, multipliers, priorities, etc)
If you read through Apple's docs on auto-layout, you can see it is targeted toward adaptive interface design, not alternate interface design.
Method 1 : Programmatically changing Constraint Values
If you want to set different constant top values for iPhone variation, then create a outlet of Top Constraint and change its constant value.
_topConstraint.constant = Conditional code for each device.
Method 2 : Setting Adaptive Constraints
Eg: I have taken a view with fixed height = 100, width = 200 and centred it horizontally.
Now it give a proportionate top space as per the device size, please gear up for some maths.
Suppose, the top space in iPhone5 screen = 36 pt.
Total View Height = view top + view height = 36 + 100 = 136
Total Screen Height = 568 Bottom Ratio = 568/136 = 4.17
So, set a bottom layout constraint and add the multiplier as 4.17.
enter image description here
On iPhone 7 plus and other devices, it changes the top automatically.
How would I achieve that a view spans over the device width on an iPhone 6 in portrait mode and on landscape having a maximum width of say 400px and be aligned to the right side?
Can this be achieved by using device classes and / or vary for traits? What I really want, is that the view adapts to the width of the device: if it is wider than 400px (because I rotated the device to landscape mode or because the app runs on an iPhone Plus or iPad) it should no longer span the width of the display but rather have a maximum width of 400px and sit on the right side. Maybe this can only be done by code?
Thanks for any input.
What I really want, is that the view adapts to the width of the
device: if it is wider than 400px (because I rotated the device to
landscape mode or because the app runs on an iPhone Plus or iPad) it
should no longer span the width of the display but rather have a
maximum width of 400px and sit on the right side.
This can be achieved by setting the following constraints to control the width and placement of your view.
Pin the view to the trailing edge of its superview with constant 0 and a priority of 1000.
Pin the view to the leading edge of its superview with a constant of 0 and a priority of 750.
Set a width constraint for the view, and make it Less Than or Equal to 400 with a priority of 1000.
When viewed on an iPhone 6 in portrait, all three constraints are easily satisfied.
When viewed on an iPhone 6 in landscape, constraint 2 (which has the lower priority) is broken to satisfy the other 2 constraints. Auto Layout will do its best to satisfy constraint 2 and will make the view as wide as possible without breaking the width constraint which is 400 units.
You will need other constraints for your view to establish its height and vertical position.
I am using an Image view which is placed on top of parent view. Color of parent viewis changed. i want my design to look same on all iphone sceen sizes in portait. top tabel is positioned accuratly as it should be in the center. but I am having issue with my Logo as you can see in screen shots Logo is at perfect place in only iphone 5.5 inch. what constraint i should set to position my logo as same point (lets say S in "YAS" should be touhcing the hair of girl as in Iphone 5.5) for all devices ?
i have applied constaints but its not working please guide me
This is wahtI am getting in previw
These are my Constraints
This is my Xib
I tried differecnt values for multiplier but nothing happened
image View is in Scale to fill mode
Position your LOGO Horizontallycenter manually and then give TOP , LEADING , TRAILING and aspect ration constraint . When your view's width will increase these constraints will increase height of your Logo.
Also set your ImageView(Logo) View -> Mode to Bottom (in Attribute Inspector).
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