I'm working on app and will for 1st time use auto layout/size classes. Today my first day learning it and I understand constraints now and how to place the images where I want them to be on every devices from iPhone 4s to iPad PRO.
As my main storyboard in Attributes inspector i'm using INFERRED size. In show Assistant Editor, Preview, i'm using all device sizes.
In my inferred storyboard i'm using a UIImageView size 170 Width, 230 Height. Then I use AutoLayout to make it center of every device screen in preview.
Now the issue is this UIImageView covers HALF of the size of iPhone 4s preview but only about 1/5th the size of iPad PRO. How do I alter the size of each UIImageView to the size that I want them to be in each device without changing that centered position of each UIImageView in the preview devices?
You need to first set up your constraints properly and then choose the type of scaling you want.
Set up your constraints:
Click on the Pin icon |-[]-| at the bottom of the screen. Turn on all four orange I-beams. Set the four constants to zero.
Uncheck the Constrain to margins checkbox and click 'add 4 constraints'
Then set your scaling:
Click on the Image View you added to your View Controller.
In the Attributes Inspector on the right, choose your image.
Set the Mode of the View to Aspect Fill (fill entire screen cropping top/bottom or left/right as necessary) or Aspect Fit (letter box image so that entire image is shown uncrossed).
That should work
Maybe you can use a pending or proportion constraints instead of width and height constraints.
Related
I am attempting to customize the default LaunchScreen.storyboard of my Flutter app. I simply have a red background on the default View, and I added an Image View as a child of it. This Image View is centered on the screen and renders an image that I have added to "Assets.xcassets" with all 3 sizes. Below is a preview of what my Xcode displays:
However, this storyboard renders differently on devices than it appears in Xcode. For example, it appears slightly off-centered on iPhone 12, and it is scaled up too high for iPhone 6s and is way off-centered. See below for screenshots:
As you can see, the storyboard renders differently on the two devices. How can I make the storyboard appear the same on both devices as it does in Xcode? Any help is appreciated. If I used any incorrect terminology or need to provide additional details, please let me know as I have minimal experience using Xcode.
From the storyboard screenshot attached, it looks like there are no constraints added to the UIImageView.
You should add top, leading, bottom & trailing constraints to superview with 0 spacing to achieve what you want.
UPDATE
Above is applicable to the case when you have a small size image like 100x100 or similar that can easily fit on all screen sizes. In the comments, we see that image is way too big and we want to keep it in center while occupying 50% of screen width.
Remove the leading and trailing constraints, select the imageView and it's superview - add equal widths constraint with a multiplier of 0.5, this will make sure that imageView will always occupy 50% of the superview's width.
Also add horizontally center constraint on the imageView. Make sure imageView Content Mode is set to Aspect Fit.
In my project I would like to essentially 'Pin' a button to a certain position on an image. The imageView scales to the screen size from the centre and maintains its aspect ratio.
I am trying to make it so that each button remains over the chakras "coloured icons in centre of body". I need them to maintain a scale that is the size of the chakras and maintain their position over the chakras regardless of screen size.
Wanted Result
Current Result
Scaling Settings
Aspect Settings
Here's an example - you will want to play with the exact positioning, but this should show you the method. You can do everything using auto layout in Xcode.
I took one of your images, and edited it to remove the buttons, and used it as the image in a UIImageView filling the screen of a UIViewController
Then I created 7 small buttons, and added constraints to them width & height = 20, and Align Centre Y to Image View
The tricky part is to add a constraint to align the centre of each button to a fixed percentage of the UIImageView centre - and that will be trial and error until it looks right.
Here's how to set the constraint
here's the app running on the iPhone 12 simulator
and here it is on an iPad (12.9 inch)
and here in landscape
You can take parent containerView for each imageView and Button.
Please see the picture to this link for better understand.
https://ibb.co/dsTjxbw
In my Launch Screen.storyboard, I have a UIImageView named LaunchScreenIcon that scales proportionally to the width of the screen by setting the LaunchScreenIcon.width = width constraint.
Is it somehow possible to change the behavior for landscape orientation so that the height of the UIImageView scales to the height of the screen i.e. LaunchScreenIcon.height = height?
Constrain your image view to 0 on all four sides (so it fills the entire view), then set its Content Mode to Aspect Fit
That should give you what you want.
I was able to accomplish this by:
Going to my Launch Screen.storyboard
Selecting the large iPad model in landscape from the panel at the
bottom
Tapping "Vary for Traits" to the right and checking off both width
and height
Then I added the constraint as I normally would and it was now only
associated with the large iPad model in landscape
I have buttons on my screen I have attached constraints but on different sizes of screen I don't see my buttons right as I want to. There are the same size on different screens and I can't see all buttons on small screens
Here is a good version of it on iphone 8 plus in xcode
and then I change view to iphone se or any another iphone and I get these troubles:
What do I need to do to have the same screens?
Make the buttons have a width that is in proportion to the view
width.
Then add a 1:1 aspect ratio constant so that the buttons remain
square.
Then position the buttons in relation to the screen dimensions (not
absolutely).
This should get the job done for you.
Setting proportional width
Suppose the main view's dimension is 375 x 667 in interface builder. Suppose you place a 90 x 90 button on it. To make it always have a width in proportion to the main view's width,
Add an equal widths constraint to the superview for the button.
Edit the constraint's multiplier: Change it from 1 to (90/375)
Doing the above makes sure that for different screen widths, the button's width will also change in proportion.
Here are screen shots from iPhone XR and iPhone 5s, that I took from a sample I just did to try this out. As you can see, the buttons stay within the screen and maintain their shape. Hope this helps.
You don't seem to have defined the constraints of the button to superview. eg: left edge, top edge...
*edit: post complaint below #raisedeybrow
You will need to define (add constraints) how far from the edge (left and top, right and bottom) you want your button/s to be. Then apply content hugging and compression priorities on buttons for all of them to scale as you'd like. Some will need to be bigger, some you don't want to allow to shrink etc. Lots to set if you'd want it to look fluid
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).