I have 1x, 2x and 3x images in image assets file like below mentioned image.
But, it were placed 1x image for all devices like below mentioned image.
Am using Xcode 7.3 and iOS 9.3. I created imageview using auto layout. And set Align centre x to superview and Align centre Y to superview.
Any advice / input would be appreciated! Thanks.
This is fine. 3x doesn't mean that your imageview will show three time bigger. It's uses three time bigger resolution. That means if your imageview's size is 50x50 then iphone 6 plus (5.5 inch) requires image with resolution 150x150. If you set 50x50 resolution image to this display then it will not show perfact. That's it. It doesn't mean that 3x image will display 3 time larger then original imageview.
Then also you need your imageview of your size of your image then set UIViewContentModeScaleAspectFill content mode to your imageview with same constraints specified in question!
As #Lion answered this question very well, using 3X does not means your image height and width will increase 3 times.
If you want to resize your image view for bigger device so all you need is to use appropriate autolayout constrains.
follow this if you want to change origin and size of image view with device size(aspect ratio)
And when your size of imageview resize, use the 2/3 times bigger image as imageview for 2X/3X resolution.
Autolayout: origin and size should change according to width and height factor
Check these devices
iPhone 4 and prior #1X
iPhone 4S,5,5S,5C,6,6S,7,7S #2x
iPhone 6+,6S+,7+,7S+ #3x
suppose after applying constraints for bigger screen your image view's size is (50,50) then use a image of size 150,150 for 3X resolution
Make sure your content mode is UIViewContentModeScaleAspectFill and there are no height/width constraints for your UIImageView
Related
I have one ImageView but the width and height are not constant. Both will change as per device width and height. (Height of ImageView is 1/3 of screen size and width is complete device width)
Example:
Proper Colors
Height
Width
iPhone SE
375
222.5
iPhone 11 Pro Max
414
298.67
iPhone 12 Pro Max
428
308.67
iPhone 12
390
281.33
As we see, width and height are varying so in this scenario what should be size for 1x image. Once we get 1x size then 2x and 3x sizes we can find easily.
Note: If width and height is fixed then I know how to find 1x, 2x and 3x.
Example: If imageView is 20x20 then, 1x = 20x20, 2x = 40x40, 3x = 60x60, But in above scenario width and height is not constant.
Note: If width and height is fixed then I know how to find 1x, 2x and 3x. Example: If imageView is 20x20 then, 1x = 20x20,2x = 40x40,3x = 60x60
#1x, #2x, #3x has more to do with the pixel density of the screen and not the size of the image. If the same sized image is displayed on a higher resolution screen then iOS will automatically choose a #3x version of the asset. Think of video quality on YouTube, a 720p and 1080p has the same size. But the 1080p video is more clear.
But in above scenario width and height is not constant.
As to dealing with the changing size of the screen, you need to decide before hand how your images should be displayed. This is a UI designing concern. UIImageView has various ContentMode options that you can use. For example,
scaleAspectFit: The option to scale the content to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent.
So if you use scaleAspectFit then on larger screen sizes you will have more blank space to the sides of the image.
Also, please take a look at Apple's Human Interface Guidelines for Image Size and Resolution and 1x, 2x and 3x Image Scaling on iOS Explained blog post.
The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or #1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as #2x and #3x). As a result, high-resolution displays demand images with more pixels.
When you can fit more pixels on the same screen real-estate, you also need higher resolution images. This is where 1x, 2x and 3x come in. You provide higher resolution image files for the same assets, which are automatically selected by iOS when your app runs on a high-PPI iPhone model.
If I create an image view that has constraints that are proportional to the size of the screen. I can't decide the exact dimensions of image I need to supply for any of x1, x2 or x3. I understand how image sets work. But it's figuring out the dimensions I need because when I the following code I get slightly different dimensions for every device I test on:
print(imageView.bounds.size.width)
print(imageView.bounds.size.height)
Different x2 devices like the iPhone 5 and iPhone 6 will give me slight differences. But because they receive the same image, will it not look different?
Add an Aspect Ratio constraint on your UIImageView to make sure you don't stretch the image.
Use Aspect Fill or Aspect Fit content mode for UIImageView.
Keep the biggest image for each scale factor (2x, 3x). Basically, there are multiple device resolutions for 2x scale factor, so #2x image should have resolution designed for iPhone 6 and it will be automatically downscaled on smaller devices (iPhone 5/4s). 3x image should have resolution for
I am currently trying to introduce myself to Xcode, IB and Vector images. I am struggling with the auto layout and having the buttons adjust to screen size.
As you can see the buttons are same size in the iPhone 6s and iPad Pro.
And here is the iPad Pro 12.9" size of the buttons:
The vector images I use are universal .pdf images at the size of 50x41. And here are the settings to those:
How do I get these images to adjust properly from screen size to screen size?
Thanks a lot for your help!
What constraints do you have to change the size of the imageView? I would expect to see a constraint between the top two images (and the bottom two) that forces a constant gap.
The constraints on each image's width should then have a lower priority so they get stretched on a bigger screen. Then you want to constrain the height of each image to its width so they stay 1:1 (I'm guessing), and therefore stretch vertically if they are stretched horizontally.
Set the UIImageView content mode to UIViewContentModeScaleAspctFit and set AutoLayout constraints on the container for aspect ratios rather than just spacing and fixed sizes.
In my IOS app I want to display the biggest variation of an image that can be fully displayed on the device. I want to do it without resizing the image to be larger or smaller so that the image doesn't seem blurry.
On my webserver I have 3 variations of the same image. To keep it simple let's say they only differ in width: 640, 750 and 1000.
An iPhone 5 will display the 640 width image.
An iPhone 6 will display the 750 width image.
An iPhone 6+ will display the 1000 width image.
I can easily get the size of a UIImageView in order to download the right image, but how to do I set an Auto Layout Constraint on the UIImageView that sets the UIImageView to the right width?
If I set a low priority <= 1000 width constraint on the UIImageView, then the image is displayed at a width of 1000 regardless of the size of the device. This is true even when I set the UIImageView to have a low Content Compression Resistance Priority.
I am using XCode, Objective C and IOS 8.
If I'm going about this wrong please tell me.
Thank you!
easy solution would be to make a width constraint of the UIImageView, then create an outlet for the same.
Now inside the code , set constraint.constant value by calculating according to the device.
I am creating an Ipad app and no matter what height I set my ImageView to be it is always too big.
For example I have an ImageView that's about 20 pixels tall and has all of the constraints that I need to keep it where I want it to be. When I play this 20 pixel tall ImageView on the Ipad simulator the ImageView covers about half of the Ipad screen.
How can I work with Ipad images if even a 1x1 pixel image view takes up a signifiant amount of the screen? (Yes, I made the 1x1 image just to see if it would still be insanely large)
Under Auto Layout, if you don't set the size of the image view absolutely, it will size itself to match the size of the image assigned to it. That is probably what is happening to you.