UIButton images look fine in IB but get stretched when displayed on app - iphone

I'm developing an Enterprise app for tracking mileage and maintenance for company vehicles. I've added graphic buttons to snazz it up a bit. The buttons look the way they're supposed to look on the XIB in IB, and on the iPhone all other UIViews look correct, but on one particular UIView the graphic images are stretched way out of proportion vertically.
The first image below shows how it's supposed to look, with the three graphics buttons at the bottom. The second image shows how it's showing on the phone. The Help button on this screen cap shows normally, but it can't be counted on to stay that way.
It also is not consistent. Calling this view at any time may show the image stretched or it may not show an image at all. It rarely shows the image normally, like the Help button looks below.
The development phone is a 4S running 6.1.3. The views are set for the Retina 3.5 screen. XCode is the latest (whatever it is).
Again, it's only on this one view that the problem shows up. There is another UIView on the same view controller that is hidden when this UIView is shown. The button graphics on the other view look fine. All of the other views and view controllers use the same graphics on the UIButton, without any problem.

In Interface Builder (Xcode) you created the view using a 4.5-inch screen height.
But the device where you are seeing the problem is a 5-inch screen. So the view is resized to fit.
And when it does that, the autolayout constraints that Interface Builder put on those subviews take over to determine what they do. Those constraints are causing the heights to change.

No need to turn Autolayout off. Autolayout can be very useful, but it seems to enjoy randomly assigning the constraint "Align Baseline to:" to UIButtons after repositioning them.
Just select the UIButton/UIImageView in question inside Storyboard, locate the constraint "Align Baseline to:", tap the gear icon and select "Promote to User Constraint", and tap once more and select "Delete". This should solve your issue.

In response to the comments here, I will answer my own question: I turned Autolayout off for this view controller, and that fixed everything. This is the first app I have written since XCode has begun development for the iPhone 5, so I wasn't aware of the Autolayout feature. I'll need to understand how it works and why it did what it did.
Thanks for all your help!

Related

Size of UIView object in Interface Builder changes when using the app

I have an extra UIView object that I just dragged onto the storyboard. It covers the entire iPhone screen. So I clicked on it and dragged it until it only covered half of the iPhone screen.
This is what my storyboard looks like with my extra UIView object selected:
However, when I actually use the app on my iPhone, the UIView is much smaller and doesn't even take up half of the screen(It's the square with the stackoverflow site image inside of it):
How can I keep it from being smaller when I actually run the app? When running the app, I want the UIView object to be the same size as it is on the storyboard in xcode.
Thanks for the help.
You must have selected Autolayout. Uncheck it and problem is resolved.

Xib Size - seems to think its longer than it is

This is a bit of a strange one, but basically I am having a problem whereby the xib size of my initial view controller seems to be longer than the screen.
So, if you have an ad banner set to be on the bottom of the screen... If I run the app in simulator, it does not show on iPhone 3GS/4/4S devices, yet WILL show on the iPhone 5.
I have tried changing the xib size settings, I even created a new xib file, but the same problem is occuring which leads me to believe it is hardcoded somewhere, but I cannot think where to look for this.
It is basically like it thinks the bottom of the screen is about 30-50px more than what it actually is... Hence why the iPhone5 displays ok as it has the taller screen.
Any help would be appreciated!
Its bcoz of the StatusBar. It reserve 20px of screen . You can remove this space by do change in Status bar is initially hidden in plist and set status bar to NONE in IB.
The iPhone 5 has a taller screen. The most flexible way to lay out your xib is via AutoLayout. Here is a tutorial to get you started:
http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
http://www.raywenderlich.com/20897/beginning-auto-layout-part-2-of-2
Basically, you want the ad banner to be contrained to the bottom of the view.

Whats the approach to create a view similar to the one at apple app store

I wanted to know how can we design the view controller such that.., the upper half of the screen remains fixed and the below part of the screen can be navigated through.. !!
Should we use slipScreenController here ?
Your description sounds nothing like the Appstore app but the Appstore app simply has one vertical UIScrollView and another horizontal UIScrollView inside that for images.
If you are referring to browsing categories in AppStore then:
That is a tableView implemented in such way that it doesn't take the whole screen area. You need to create a UIViewController (not UITableViewController) and than add a tableView to the view (using Interface Builder or code). That way you can change the size and position of the tableView and use the remaining area of the view for something else, for example a UISegmentedControl above the tableView.
If you are reffering to reading description and images of single app then I think that UIScrollView is used for displaying images, not sure about the rest.

webOS style view switching on iPhone app

I have been working with a iPhone app that I would like to have switch views like the Palm Pre does for multitasking. I know the usual way of switching views by using the black bar at the bottom of the app but the app I am working on does not lend itself to having a big black bar in the way (see attached picture #1).
I guess my question is, how do I shrink the current view (Current Location window) and show other views on the sides? (see attached picture #2) Then be able to swipe left and right to view other views. I have no idea how to do this and would be eternally grateful if someone could help me out with this.
http://www.threepixeldrift.com/images/deep-storage/webOScardapp1.jpg
http://www.threepixeldrift.com/images/deep-storage/webOScardapp2.jpg
The architecture should be similar to that of NavigationController: you have a number of ViewControllers each responsible for one card in your app. Then you have a 'super-controller' which controls these ViewControllers, by adding and removing their controlled views from the superview when necessary.
You'll need to use CoreAnimation and write the animations yourself.
i would use a UIScrollView and each card can be a small view that is shown by setting the contentoff set.

UIPageControl render quirk with UIScrollView

I'm building an iPhone application and like most I am trying to implement a UIScrollView with a UIPageControl, however I am coming across a very quirky behavior, which I assume may be a bug. Hopefully one of you has seen this before because it is driving me nuts.
Basically, the page control works fine, everything is hooked up and works normally on all accounts EXCEPT, with certain placements of the UIPageControl within the UIView, the UIPageControl will cease to render.
I'll just take screenshots of the XIB window to help illustrate... here's a placement that works perfectly fine:
http://www.jasconi.us/prob1.png
The UIPageControl is placed physically above the UIScrollView. Works great, everything is visible and working.
The next two DO NOT work:
http://www.jasconi.us/prob2.png
http://www.jasconi.us/prob3.png
The first one is simply placed below the scroll view. Doesn't render at all.
The second one is placed above the scroll view without technically being inside of it. Also doesn't render.
What the hell is up with this? I've tried using
[[self view] bringSubviewToFront:pageControl];
...to no avail.
Any ideas?
OK I found the answer to this, it's a little six degrees of Kevin Bacon.
This isn't actually a software bug, but a XIB quirk, for some reason the lower placement of the page control in combination with the default settings for autosize and anchor seem to jettison the control into outer space.
If you turn off all auto-scaling and auto-sizing and auto-anchoring and all that other crap, the controls appear exactly as you expected. The fact that it appears reliably when placed above the ScrollView is an oddity.
shrug.
Hope this helps future iPhone initiates.
Did you check to make sure that numberOfPages is not 0?
If you set a breakpoint can you see that pageControl is not nil?
I was still encountering this exact same problem, even after trying everyone's posted answers. My issue ended up being a little more "DOH":
I was using UIPageControl at the bottom of a modal FormSheet, however, I forgot to set the size of the view as Form Sheet in the xib. This caused my page control to be off the screen and never visible.
Moral: set view size (Full, Form, Page, etc) in your xib on the base view.
This will sound like a real no brainer, but I got caught out by it.
By default, UIPageControl expects to be on a dark background. IE: The dots are light gray, and white for the current page.
I used UIPageControl on it's own with no scrollview to change the time range of a graph I was rendering with drawRect:
Long story short, the graph background was white, so the page controller worked, I just couldn't see it. The solution was putting the graph itself in a subview, and making the parent that contained the page control have a dark background.