I am using three20 to present a photo essay of a story I made after the February earthquake in Chile. I would like the app to display portrait type images when iPad device is in portrait orientation and landscape type images when iPad device is in landscape orientation.
So there would be two versions of every image, one cropped for portrait viewing and one cropped for landscape viewing and the app would show the version that is appropriate for the orientation the device is in.
I will crop these image versions separately. That way, the app would make full use of the screen in all orientations and users will read the story like a magazine.
Ideally, the view would change over to the corresponding image, staying where it is in the sequence of images, when the user rotates the device, so from portrait #4 to landscape #4 and vice versa, for example. But, if this is not possible, jumping back to the first image whenever iPad device is rotated is acceptable as well (push to separate TTImageViews maybe?)
The idea is to give to user the experience he is reading an illustrated story in all orientations. Can this be done? If so, can you give some clues?
If it can not be done putting a specific image in the background with the image viewer overlaying it may also be a solution. If separate fullscreen views for each orientation are not possible, then at least I would like to get rid of the black "autoresizing mask" parts of the screen..
Many thanks!
diederik
Related
I am building a Launch Storyboard for iOS 13 compliance.
I am constructing the 'splash screen' from several images. It's the last one that's the problem.
To get the scale right in Portrait, I select the device range (iPad), and portrait, then click 'Vary for Traits' (all before any constraints have been placed on the ImageView)
After I make all the constraints to get it looking right on all iPad devices in portrait mode, I deselect 'Vary for Traits' and then change orientation.
Now the UIImageView is incorrect (rightly so) and so I click 'Vary for Traits' and set all the constraints to get it looking right for landscape.
Then I deselect 'Vary for Traits' and click on Portrait - but now all the portrait constraints are conforming to the landscape ones.
The problem, as I can see is that for all the iPad devices, they have the same wR and hR regardless of Landscape or Portrait...
Is there a way I can still have different constraints depending on orientation? Or am I going to have to do all this in code?
For what it's worth to others, I managed to get an acceptable compromise, buy removing some text from the central image and replacing it with UILabels that I could better 'scale'.
I also used different constraints (where previously I was keeping the main image and title / logo centred H/V with equal width/height to the background and then using the multiply to scale it) I changed them to having all edges 0 to the overall superview and then using the constants to move the top or left and right to get the 'scale' I needed.
It's now looking pretty good in all devices and orientations.
Thanks to everyone who helped.
I have a Universal iOS app and am trying to move from old-style launch images to a simple centered image on a storyboard Launch screen, so I have a single storyboard for all devices. My image (640x1136, iPhone 5s size) needs to not be stretched when the app is run on devices with larger sizes than the image -- in other words, the background color of the UIView should appear surrounding the image on larger devices. For debugging purposes I changed the view background color to a gaudy Lime.
I defined 2 constraints on the UIImageView as directed in the SO post here according to the highest-upvoted answer (Suragch's) and in fact had to also follow the accepted answer's recommendation to add the additional UIView into which my UIImageView would be contained.
The "content mode" of the UIImageView is Center so seems there should be no stretching.
In the pic notice Xcode's Size Inspector settings for the UIImageView. The UIView has iPhone 7-sized dims (750x1334) and so because that iPhone is taller than my image the UIImageView is positioned so that its X is 55, Y is 99. The width and height are same as the image itself (640x1136).
When I run in Simulator an iPhone 7 seems it should look like exactly as what Xcode's Interface Builder shows (Lime color appearing all around the image, but instead, for any device larger than an iPhone 5s or SE it looks like the pic I've attached (an iPad Air, FYI). You can tell the image must be stretched quite a bit vertically because the image is only 1136 tall.
I've attached screenshots for the iPhone 7 (simulator) iPad Air and iPad Pro. Notice the horizontal strips of lime color appear on the right and left edges of the iPad Air. And notice that when it comes to the iPad Pro the lime background color begins to be shown above the image. It's as if on the smaller devices the system is stretching the UIImageView, but as device screen size increases this eventually stops, until for the largest (the Pro) you can actually see the background all around. It seems that for all device sizes listed in the Apple docs that are taller than iPhone 5s or SE, there should be no stretching/distortion. This is what I'm trying to accomplish.
Interface Builder size settings
iPhone 7 (simulator) screenshot
iPad Air (device) screenshot
iPad Pro (device) screenshot
I was able to get this to work finally, by completely eliminating the constraints and only using the autoresizing settings found when you choose the Size Inspector. The UIImageView now retains its specified size and is not stretched.
Try adding a width/height constraint to your ImageView:
This is done by first selecting your ImageView and then selecting this |-☐-| icon (located at the bottom right of the Storyboard window, next to the option where you can change the type of device)
Okay, I think I've figured out the problem. Your image is sized too large. You say you want it to be the size of an iPhone 5, and it's display size is 1136x640 pixels. This is not the same as the width/height in Xcode. To get this, change the device to iPhone 5 (or similar) and get the size. For instance, the size of the View for an iPhone 8 is 667x375. Then your image won't be cut off.
I have a problem to understand how do I manage the various image resolution in iOS with Swift.
For example if I have an image that i use it in my app , I have to create to for various devices resolution , but after that I insert in my project the various image resolution where I have to insert it, in a special folder?.
Can you help me?
You can simply drag your images with different resolutions from finder to the Asset Catalog in Xcode.
First, you need to understand why images with 1x, 2x, and 3x resolutions are needed.
Some devices' screen have denser pixels than others. These devices have what is called "Retina Displays". Imagine that you want to display a 100px by 100px image on a normal display. Now imagine that the same image is displayed on a display where the pixels are more closely packed. Obviously, the image on the second display will appear smaller. That's not a very good user experience.
To solve this problem, you can provide 2x and 3x images. The operating system will automatically choose to use these images whenever the display is a retina display.
Now let's see how you can put the images into Xcode.
First open your asset catalog:
q
Then drag the image that you want to add to this panel:
Then you will see that your image is added:
Now do you see those 1x 2x 3x thingys? That's where you need to drag the images with higher resolutions to!
So here I dragged a 2x image to the 2x slot:
Now when your app runs on a device with retina display, the 2x image will be used!
It's rather not for image resolution but screen's pixel density. Basically you've got non-retina devices (standard) and retina ( 2xstandard and 3xstandard). So, in example if you've got 100x100 point imageView that you would like to feed with image named square.png asset you will need 3 kind of images: square.png (100x100px), square#2x.png (200x200px) and square#3x.png (300x300px).
In Xcode, put these images in something called Asset Catalog - it will handle images' size managing for you.
More info: https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/_index.html
My app is a game and the menus have many labels and buttons and I cannot get all of the different screen sizes(iPhone 4/5/6/6+) to look acceptable from the same set of constraints.
Is there a way that you use to synchronize all the views together to look the same on all different screen sizes?
The project is locked to only portrait so I don't need to consider rotation.
For Autolayout, you
Consider the screen sizes you want to support.
Which view/buttons/labels/imageview etc you want to remain fixed while in
different screen size.
Which view/buttons/labels/imageview etc can be scaled to fit the screen.
Now if by scaling the things you can fit on the screen then you are good to go. But if you still can't find way then you would probably need to you use scrollview and and add a UIView (let's call it content view) to it put your all stuff in it and constraint them vertically all the way from top to bottom.This video can help you if you want to use scrollview
https://www.youtube.com/watch?v=UnQsFlMGDsI
So I'm still getting accustomed to the world of Auto Layout in iOS 6 and it's been a fun (or in plain English -- tough) migration coming over from strings & struts.
I have a UIImageView that's the background for a game I'm working on. Here's what a regular 3.5" Retina Display looks like in Interface Builder:
but if I change the "Size" pop-up in the Simulated Metrics field for the content view to "Retina 4 Full Screen", here's what I see:
And you can see the ugly black bar appearing along the bottom edge of the simulated iPhone 5 screen. This same ugly black bar makes it over to the compiled app running in the iPhone 5 simulator.
Are there any attributes or constraints I can apply via Interface Builder to get the UIImageView's frame to size correctly for the appropriate iPhone device screen size?
Or do I have to enter in constraints via code? (ugh)
I've watched the three WWDC videos and if the engineers covered the topic of sizing a view to fit a parent, they must have glossed over it really fast because I've haven't yet found or heard a decent method to get both UIImageView and NSImageView to size correctly to their parent views under both the iOS and MacOS side.
From what you're showing here, I think that what you want to do is drag the image to meet the bottom of the superview so that it takes up all of the space you want. On the bottom right in the IB view you will see a small, grey pill-shaped set of 3 buttons. Click the center one (once you have your imageView selected). It's the one that looks a little like this: |--|. It will bring up a list of constraints. Once you have done that, select "Bottom Space to Superview". You should then be able to switch between phones and have the image resize automatically.