Am working on an ipod/iphone application that primarily captures a photo. Am designing the flow in xcode4 IB storyboard.
However, as you can see from the image it is taking the default resolution as 320x480 which causing the preview on ipod retina display to show up in a corner than full screen. How can I make the IB get device resolution and adjust the ratio accordingly?
I tried looking at project settings, build settings, info.plist however couldn't find an answer yet.
Thx
Those dimensions are in points, not pixels. They are correct. On retina displays, 320 points are equal to 640 pixels. If your application is only showing up in a quarter of the screen, it's likely the problem is in your code, not in how you have set things up in Interface Builder.
Related
I'm trying to make a splash screen on ios, but weird is, it fit perfectly when using storyboard but not fit when using simulator or real device
It show perfect on storyboard
But small in real or simulator
Please help, i don't know what going on
Set Top, Bottom, Leading, and Trailing constraints to 0. Don't Give Height and Width to it, just constraints are enough.
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 want my iPhone 5s app to simply upscale for the iPhone 6. I have no Launch Images in the project, but I do have the interface builder location declared in the plist to get rid of the black bars. How can I get the app to just upscale, right now it shows white space in Storyboard.
Looking at your question it looks like you are using absolute frame values for positioning, by setting frame.size.{width, height} and frame.origin.{x,y}.
You have two options.
set those values programatically. It's not recommended at all but might be easier to setup. Detect what is the screen's size with [[[UIScreen mainScreen] bounds] size] (check for the height property) or detect the device's version (eg Determine device (iPhone, iPod Touch) with iPhone SDK).
a less slippery road is to transform your project an start using AutoLayout. There's a learning curve but it guarantees that your project will be fitting well any screen. Start here: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html
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.