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.
Related
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 think this is an obvious bug on Xcode 6.0.1 but I'm searching for at least a workaround. In interface builder, I have an image view that is smaller in dimensions than the image that it contains. Here is my newly created, fresh nib with just an image view, the heart image is a larger PNG file than the containing image view:
So far so good. However, when I click on the any of the grips at the corners/edges of the view to resize the image view, it immediately changes to this the very moment I click on the grip:
This happens whenever I try to resize by hand (I can resize using width/height values at inspector though) and I have hard time trying to fit my design into the nib. The problem happens both on nibs and the storyboards. Does anyone know a workaround?
UPDATE: I've updated to Xcode 6.1 but I'm still having the same problem.
The same result I've noticed when close and reopen the project. The view continues to grow up every time. I have created a simple project to search the cause of the wrong behavior of the autoresizing mask (flexible width AND align to right).
So, try to disable "flexible width/height" and "align to right". Keep the "align to left" only.
This answer is for autolayout-enabled views/nibs. For autoresizing mask solution, see Nicolai Nita's answer: Xcode 6.0/6.1 Interface Builder resizes views to fit whole content when clicked on the corner grip to resize
I've solved the problem by setting the content compression resistance priority (both vertical and horizontal) to 250 from 750. I don't know why it wasn't the case before Xcode 5 though.
How can I stretch the height of buttons and images in Xcode 4.6.3 in Storyboard?
I have a simple navigation with some images and a few navigations buttons as per the images below. In the first image its displayed on iPhone 4 and on image 2 its on iPhone 5. As you can see the buttons are now looking a bit lost on the bigger display.
Can I stretch the buttons' height for the iPhone 5 in Storyboard? I have seen examples of using Autolayout but they all seem to do with orientation (switching from portrait to landscape).
Can what I need to do be done with Struts and Springs perhaps? I am unable to test at the moment as I only have access to Xcode once a week. Just want to have as much information for the next time I get to work on project.
iPhone 4 display
iPhone 5 display
that's actually really easy to awnser! Just use autosizing. Here is what you need to do:
Xcode 4.5: How do I fix my text views so they display properly in portrait and landscape mode on an iPad?
Just play around with the inner cross and see what happens. You need to set the autosizing for every button if you want to resize them all.
Have a good one,
Noah
Im trying to do something that seems like it should be a no-brainer. But alas, im too dumb to figure this one out. So i need help.
I have an iphone simulator (with a vertical orientation).
The main view has a subview (a blue UIView) that should be displayed in the bottom 25% of the screen. The final rendered screen would basically look like a white screen with the bottom section being blue.
I want the edges of the subview to hug the screen edge. But thats not the part I'm struggling with. The tricky thing is configuring the height of this subview (and the layout of its contents, if any) when I suddenly rotate the orientation of the simulator. If i do this, then everything looks odd.
I would also like to note that what I see in the Interface Builder (with Auto Layout enabled) looks nothing like the app when it loads in the simulator.
PS - for now i will keep playing around with this. maybe i will eventually reach a eureka moment.
* Updated with screen shots *
This is what my layout looks like in Interface Builder:
And this is what it ends up looking like in the simulator:
* Update 2 *
Ok. After updating my post with the screenshots, it dawned on me that the simulator doesn't look like the 4" screen version (even though it does on my computer screen). After running the 4" simulator i can see the the layout just like the IB layout. But this makes me wonder why auto-layout wasn't "smart" enough to adjust for the smaller 3.5" screen.
It looks to me like you have a fixed height constraint from the top edge of the blue view to the superview that is pushing content down - conversely you may have a fixed height view above it that is smooshing things. Try pinning the top edge of the blue view to the superview and lowering the priority or changing it from an equality to a less than equal to constraint.
In IB in XCode you can change the canvas size for iPhone layouts, look for the single button on the right hand side that looks like a rectangle with arrows above and below, or inside it. In the screenshot below it is the leftmost button.
You could simply turn off Auto Layout. Springs and struts can readily make your subview 25% of the superview's height.
Or, you can certainly stick with it, but you'll need to adjust the constraints in code. There's no way to establish such a constraint in the current version of Xcode. Set constraints in IB to pin the box to the bottom of the window and fix the height, setting an outlet for the height constraint. Then in -viewDidLoad, remove the height constraint and add a new constraint to the superview which expresses the height relationship you want.
This isn't to discourage you from learning Auto Layout, but to point out that it's a bit complicated, and that the constraint tools in IB are unintuitive and relatively weak. The WWDC video Introduction to Auto Layout is a good starting point.
If I turn my iPad to landscape a couple of row of table view (and the footer) are just off the bottom of the screen although it fits in portrait.
My problem is that when I use my finger to "pull" view port up to see the material off the bottom I can see it while I keep my finger in place, but when I remove the finger, the viewport drops down again and the material at the bottom disappears.
Same code scrolls fine on iPhone (fonts are too big and so on but that is a different issue)
What am I doing wrong?
Peter
As for what exactly your doing wrong... we can't see your code so we can't tell you. But shed some light on what is happening.
A UITableView is a UIScrollView and how far you can scroll is based on the size view (think frame) compared to the size(CGSize) of the content(contentSize) of the UIScrollView. If the 'frame' is bigger than the contentSize then no scrolling is needed, but if the content is larger, then you can scroll by the difference between the two.
In short, the contentSize of your UITableView is incorrect. This can be caused numerous ways, including auto-resizing on device rotations, dynamically changing table/footer heights without updating the table, etc.