I am coming onto a project that only looks good in landscape view. When I switch to portrait, it looks like all the elements stay where they are and things do not get resized to fit the view. Some of the content on certain pages might not fit in portrait mode at all based on how things are already laid out in landscape.
If I want to make the app look good in both orientations, is my best bet to play around with the resizing on the size inspector for views that items will fit fine.
And then for views where items do not fit easily, rethink the design and either use some iPad functionality like popover, or create a separate view to display the data differently instead of just resizing?
Thanks.
Quite a bit can be achieved by playing with resizing controls in IB (especially the ones that stick the control to a side - sometimes it may be not very obvious, like "stiking"the control that's on top to the bottom side).
However, a much more robust solution is to have a method that would reposition/resize all your controls depending on the screen size (1024x768 or 768x1024). Then call it whenever the device is rotated.
Such a method is also quite handy for other purposes - e.g. if you have a view that is only sometimes visible (like an ad), you'll need to resize the rest to a non-full-screen size.
Related
I have an app with a primary view that has a UITabBarController with 5 tabs. Each tab is a UINavigationController.
In interface builder, I'm customizing the background of each page by dragging a UIImageView and setting it fullscreen. The image I'm setting to the view is 640x960. I am setting it to be Aspect Fill.
However, what I've noticed is that it is not where I would expect it to be. When navigating between by tabs, the image seems to be shifted down from where it should be.
Also, when pushing a new view to the navigation controller, the background of this new view isn't offset in the same way as the tabbar one, and it is also slightly dimmed.
How can I set my UIImageViews on each page to be aspect correct and fill the screen 1:1? Also, how does one disable the dimming when pushing a view to the navigation controller?
Thanks for any tips, and apologies if this is covered in another thread, I couldn't find an answer searching the site.
Assuming that you are using the IB to setup your views, you should select navbar/tabbar options to reflect what will be on the actual page. That should place your image correctly. I would also recommend that you make both a low res and hi res version of your background images -- 320x480 and 640x960. Of course, your size may need to be adjusted (reduced) for the navbar and/or tabbar which will leave less than 960 px of vertical height -- probably more like 920px if you are in portrait mode. Then you add #2x to the base name of the hi res version, this would account for older iPhone screens.
Once you have the image placed correctly, resizing should be unnecessary. You can have the image automatically resize width and height using the little arrows on the layout page -- that's a bit hard to describe. It can also be done in code -- if you still need that I can provide a sample.
Maybe you need to set all AutoresizingMask in order to resize the UIImageView properly on each view. And to main aspect ratio u should use either AspectFill or AspectFit on the contentMode.
In my app, I have part of a view sticking out from the right. I would like the user to be able to swipe that to the left, to pull/reveal the rest of that view, which would basically almost cover the screen. See below:
I am figuring my best option is to use UIScrollView for two reasons. That I can lock the movement to horizontal only, and the animation for swiping is already built it.
My question is, can I have one page of the UIScrollView smaller than the other as shown in my mockup images?
UIScrollView horizontal paging like Mobile Safari tabs
I'm trying to make an app that handles orientation/rotation similarly to the way the built-in Calc app does.
If you check out that app, in portrait mode there's a normal calculator, and if you rotate to landscape mode there are additional buttons that appear to the left.
I can't figure out how to do this by setting the autosize masks. The problem is the "normal" calculator view is 320px wide in portrait mode, but actually shrinks to around 240px in landscape mode to fit the additional controls.
I've seen examples like the AlternateViews sample app that have two different view controllers (one for portrait and one for landscape), but they don't seem to animate the transitions between the views nicely like the Calc app does.
I've also tried setting the frames for the views manually in willAnimateSecondHalfOfRotationFromInterfaceOrientation, but it doesn't seem to look "quite right" and also I'm not certain how that works with the autoresize mask.
Any ideas how this is done? Thanks!
Just override the following method call:
- (void)willRotateToInterfaceOrientation: (UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
Inside of there resize all of your components so they look nice.
This is just an example of the basic problem I'm having, so don't worry if this situation sounds a bit pointless ;)
Let's say I have an app that's mainly a UINavigationController just two levels deep. The top level is a table with a list of image filenames, and the second level has just a UIImageView showing the image for the filename you tapped.
For an app such as this, does anyone know a good way to allow the table at the top level to autorotate while keeping the second level of images fixed in portrait mode?
So far I've been able to almost get there... but when I tap a filename while in landscape mode, the image slides into view in the wrong orientation even if the second level view controller's shouldAutorotateToInterfaceOrientation returns yes for only portrait modes.
There was no good way to do this in iPhone OS 2.x, but in 3.0, they've dramatically improved it.
In 2.x, the shouldAutorotateToInterfaceOrientation: delegate method was only obeyed for changes to the orientation, so you'd get the behavior you describe: if it was rotated in another view controller, it would stay rotated through pushes and pops even if the new view controller didn't support rotation to that orientation.
In 3.0, UINavigationController polls shouldAutorotateToInterfaceOrientation: on each push or pop and obeys what it returns the way you'd expect, e.g.: if you're currently rotated in Landscape Left orientation, and you push an instance of a view controller that only supports Portrait orientation via shouldAutorotateToInterfaceOrientation:, it automatically and instantly flips the logical orientation and slides in the new view the correct way in Portrait orientation.
Note that this will only work on applications linked against (and therefore requiring) 3.0. For applications linked against 2.x, it will emulate the old behavior.
The problem is that if you use auto rotation the entire UI (including the UIWindow instance I believe) is rotated.
Anything pushed onto the navigation controller at this point will be done in landscape.
So when you push the imageview, that is exactly what you get.
To get this to work, you have to either:
Handle the rotation of the root view
manually (using a transform)
Unrotate the image view by -PI/2
using a transform.
Either way you have to perform the transforms manually to get this to work.
As a side note, this may be bad UI design. As a user, I would expect as I drill down for images to appear rightside up. But this is without knowing the exact context of your app.
I have a view that supports landscape and portrait viewing, with the controls all moving around when you switch from one to the other. I'm currently doing this by setting the .center of each one of my controls when the user rotates the phone. The problem is that this is tedious, and requires a lot of code, and seems to defeat the purpose of using Interface Builder in the first place.
My question is: is there a way in Interface Builder for one view to support multiple looks (one for landscape one for portrait)? If not how do other people do this with IB? Do you set up 2 views?
Edit: Just to clarify my landscape and portrait views look different, I don't want a straight transform, I actually display the data differently in landscape mode
When necessary, I add UIView objects to the view in IB which I make hidden. Give it a nice background color so you can see it, and send it all the way to the background. Then use that view's frame when you need to set the frame of an object. If you have a lot of them, you might consider using UILabel instead, so you can give it a visible name in IB.
If you're worried about memory issues, just remove all these extra UIViews in ViewDidLoad and just store their frame values in member CGRects. This only works of course if you don't have any of the views auto-resize or reposition on rotate, which you probably shouldn't anyway, in this case. I do this for resizing/repositioning for any reason, not just when the screen rotates.
I'm not 100% sure if it's possible, but have you considered using different view controllers for landscape and portrait?
The AutoSize attributes of IBOutlet objects in the Size Inspector of IB (command 3) give some pretty nice options for auto-stretching and positioning of items. You can control L/R and T/B screen positions and relative width and height. You can't get full control of the layout, but most of the basic operations are there.
The only way one view can support multiple orientations in IB is to set the autosizing mask of components to either scale and/or anchor to edges. To design a totally different layout for each orientation you need to design a portrait and landscape view separately (each in its own XIB) and switch between them programatically.