BVUnderlineButton - iOS Control for web-link style button

My client requested a web-link style button for a forgot password button on the log-in screen, which seemed on the surface to be a simple thing to implement.

After looking into it I was surprised to learn that there's no built-in way to underline text in a UI element on iPhone - you have to simply draw it yourself.

Searching the web I found some sample code in varying states of usability. By sticking these together and putting a couple more features in I came up with CVUnderlineButton.

It's available on GitHub at https://github.com/benvium/BVUnderlineButton

Simple example button

Here's the README for the control.

BVUnderlineButton

Simple UIButton subclass that draws a button with the title underlined.

Based on code originally found at http://davidjhinson.wordpress.com/2009/11/26/underline-text-on-the-iphone/ with all the fixes from the comments and some further tweaks.

This code requires ARC.

Usage

Add BVUnderlineButton.m and BVUnderlineButton.h to your project.

If you're using a Storyboard or XIB files:

• drag a UIButton to your stage, set the 'Type' (under Attributes Inspector / Button) to Custom
• Set the Class (under Identity Inspector / Custom Class) to BVUnderlineButton.

If you're using code, just create the button as you would a regular Custom style UIButton, e.g.

#import "BVUnderlineButton.h"

BVUnderlineButton *button = [BVUnderlineButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self 
       action:@selector(aMethod:)
forControlEvents:UIControlEventTouchDown];
[button setTitle:@"underlined" forState:UIControlStateNormal];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[view addSubview:button];

Adjusting the underline position

---

Depending on the font you may wish to adjust the vertical position of the underline using the underlinePosition property. The default is -2 pixels.

If you're using a Storyboard or XIB files:

• Select the BVUnderlineButton instance on your stage.
• Open the 'Identity Inspector' and click the + under 'User Defined Runtime Attributes'
• Type 'underlinePosition' for keyPath, choose 'Number' for type, and type in the new value as a floating-point number (e.g. 1)

If you're using code, just set the underlinePosition property.

button.underlinePosition = 1;

RestKit: Could not find an object mapping for keyPath: ' '

RestKit is an excellent Objective-C framework to make dealing with downloading and uploading data to and from a REST-based server considerably simpler than coding it all yourself.

When I started out I found it pretty straightforward until I hit a REST command that returned a JSON array at the root object, where I ran into the dreaded Could not find an object mapping for keyPath: ' ' error.

Here's an example REST response that caused this error:

[ { "name":"foo"}, { "name":"bar"} ]

It seems restkit expects there to be a root level object e.g. 

{ "data": [ { "name":"foo"}, { "name":"bar"} ] }

If your server doesn't do this, and you can't change it, then the automatic mapping system doesn't seem to work.

The solution is pretty simple (manually tell the system which mapping to use) but I took me a while to figure out, so I thought it might help others if I posted it here.

Making apps work on iPhone 5 screen size

Here's a series of gotchas I found in attempting to convert my apps to work correctly on the new taller screen of the iPhone 5.

You need to add a new splash screen at the iPhone 5 size.

This is easy. Just create a new splash screen that's exactly 640x1136 pixels in size.

Call it Default-568h@2x.png and include it in your app.

The existence of this file is the magic key that tells iOS6 that your app is ready for iPhone 5. Without this file your app will always appear bordered.

Use window.rootViewController to add your initial view

First up, if you're building your initial views in code make sure you add your initial view to the window with window.rootViewController rather than the old way of simply adding the view as a subview.

If you don't do this, autorotating will not work at all for your app under iOS 6.

Here's an example:

navigationController = [[UINavigationController alloc] initWithRootViewController: myRootVC];
//[window addSubview:[navigationController view]]; Don't do this!
window.rootViewController = navigationController; // Do this instead!

Use viewDidLayoutSubviews rather than viewDidLoad to set up widget sizes relative to the window

If you lay out your UI in Interface Builder, and set the struts and springs properly, you might expect that inside your viewDidLoad method, your widgets will be auto-laid out to the new taller size.
They won't be! Everything will be exactly the size that you set it to be in Interface Builder at that stage.
As a result you should make sure you don't depend on the size of a widget in the viewDidLoad method. I hit this when I wanted to programatically create a view half the height of the screen.

Of course, by the time the user sees the screen everything is the right size. The issue is that this resizing takes place after the viewDidLoad - but where?

The answer is to use the viewDidLayoutSubviews method which is called after the automatic layout has finished. Override this method and insert your custom sizing.

- (void) viewDidLayoutSubviews
{
    // do clever layout logic here. super call not needed.
}

Automatically loading iPhone 5-sized images where required

You'll be familiar with the way that [UIImage imageNamed:] automatically loads @2x versions of images when running on a retina device.  Unfortunately, imageNamed: will NOT automatically load -586h@2x versions of images when running on an iPhone 5.

Sometimes this doesn't matter, for example icons and non-full screen graphics are probably the same on iPhone 4 & 5. However, if you have full-screen background images, or full-width / height background images for toolbars etc you will have problems. Your 480-high images will most likely get stretched (and will probably look horrid as a result).

You can manually check the screen size and load the right image like this:

UIImage* myImage;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
if ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f) {
   myImage = [UIImage imageNamed:@"myImage-568h@2x.png"];
} else {
   myImage = [UIImage imageNamed:@"myImage.png"];
}  

Or better you can 'swizzle' the imageNamed function itself, and make it automatically pick up the right image (if available).
Here's an example I found on github to do exactly this (I did not write this code, copyright is with the author).

The correct way to use your own NSError objects in your app

Thanks to Mike Abdullah @mikeabdullah for pointing out the 'deliberate' (ahem) mistake in this post the first time around. Oops.

View the log output of any app on iPhone or iPad

Here's another tip using the great libimobiledevice library http://www.libimobiledevice.org/, originally built to manage iOS devices on Linux.

This method shows you how you can view the log output (e.g. what you see in Xcode when running in debug mode) on any app, whether it's an AppStore build or an AdHoc build.

Some apps are more talkative than others - it all depends on how careful the developers were to remove log messages in release builds.

I find this most useful for debugging issues in release versions of our apps. If a user reports a sequence of actions causes a crash, you can try this out while watching the log from your app.

Here's how:

• Grab the libimobiledevice binary for Mac OS X from my github account athttps://github.com/benvium/libimobiledevice-macosx/zipball/master
• Follow the install instructions here:
  https://github.com/benvium/libimobiledevice-macosx/blob/master/README.md

Connect your device, open up Terminal.app and type:

idevicesyslog

Up pops a real-time display of the device's system log.

With it being a console app, you can filter the log using unix commands, such as grep


For instance, see all log messages from a particular app:

idevicesyslog | grep myappname

Install iPhone / iPad / iOS App IPA without iTunes or Xcode

Using the great libimobiledevice library http://www.libimobiledevice.org/, originally built to manage iOS devices on Linux, it's possible to do a bunch of cool things, including installing an app directly on a connected device without needing to use iTunes or Xcode.

Here's how:

• Grab the libimobiledevice binary for Mac OS X from my github account at https://github.com/benvium/libimobiledevice-macosx/zipball/master
• Follow the install instructions here:
  https://github.com/benvium/libimobiledevice-macosx/blob/master/README.md

Now connect your iDevice, open Terminal.app and type:

ideviceinstaller -i myApp.ipa

Note: Your IPA will need to have a valid code signature and mobileprovision file for the install to succed. This system is NOT a way around iOSs security!

Script to automatically create retina and non-retina versions of images

I often get sets of files from graphic designers for iOS apps. Ensuring that the standard and @2x versions of all the files are present and correct is a bit of a pain, for the artist and for myself. The number of times there's been a mispelling in one of the images has been.. well .. many.
Instead I now ask them to send only the retina versions of the images, without the @2x tag in the filename (this has caused confusion).

I then run this script on the whole folder of files, and out pops a folder containing all the files properly renamed and resized. I use the incredible useful 'sips' command-line application that comes with OSX.

The fiddly bit of this script was working out the new size of non-retina images. Yes, they're half the size, but sips doesn't support percentages.
Credit to (person on superuser.com who I'll find eventually) for the neat sed command to extract the pixel size from the output of sips.
Note: clearly the file extension part can be done better. But it works for me right now.