Beautifully-formatted Times and Numbers

Example of rendered proportional numbers and monospaced numbers

Example of rendered proportional numbers and monospaced numbers

Not all font instances are created equally! In iOS text is mostly displayed using proportional fonts, meaning each character width is trimmed and varies depending on each character. This makes the text easier to read and feel more natural and you’ll notice this on characters such as ‘i’ which will often be the thinnest character compared to say an ‘m’ character. However for numbers displayed in a tabular format such as times, figures and currencies you’ll want monospaced characters so you can tidy up the layout and visually scan the data quickly. So how do you do this?
Continue reading

Core Animation stops animation on app relaunch

On one of my projects I discovered a bug in a never-ending animation I had set up. Whenever the app was suspended (such as when you multitask and open another app), on relaunching the app the animation was frozen. After some investigating, I discovered that with Core Animation you need to set a flag on the CABasicAnimation class called removedOnCompletion to NO otherwise the animation will get cleaned up when it gets suspended.

Objective-C:

CABasicAnimation *dartWiggleAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
dartWiggleAnimation.fromValue =
   [NSValue valueWithCGPoint:CGPointMake(self.center.x-DART_WIGGLE_HALF, self.center.y+DART_CENTER_H_OFFSET)];
dartWiggleAnimation.toValue =
   [NSValue valueWithCGPoint:CGPointMake(self.center.x+DART_WIGGLE_HALF, self.center.y+DART_CENTER_H_OFFSET)];
dartWiggleAnimation.timingFunction =
   [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; 
dartWiggleAnimation.duration = 0.4;
dartWiggleAnimation.repeatCount = HUGE_VALF;
dartWiggleAnimation.autoreverses = YES;
dartWiggleAnimation.removedOnCompletion = NO;
[[nextDart layer] addAnimation:dartWiggleAnimation forKey:@"dartWiggle"];

Swift:


        let dartWiggleAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.position))
        dartWiggleAnimation.fromValue = CGPoint(x: self.center.x - DART_WIGGLE_HALF, y: self.center.y + DART_CENTER_H_OFFSET)
        dartWiggleAnimation.toValue = CGPoint(x: self.center.x + DART_WIGGLE_HALF, y: self.center.y + DART_CENTER_H_OFFSET)
        dartWiggleAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
        dartWiggleAnimation.duration = 0.4
        dartWiggleAnimation.repeatCount = Float.greatestFiniteMagnitude
        dartWiggleAnimation.autoreverses = true
        dartWiggleAnimation.isRemovedOnCompletion = false
        nextDart.layer.add(dartWiggleAnimation, forKey: "dartWiggle")

Does this seem like a bug or a feature?

Core Data Objects in Wrong Sections

NSFetchedResultsController is a really handy class. Use one of the default Core Data templates in Xcode and you’ll very quickly have a nice list of managed objects in a table view. With a few more lines of code you can get the NSFetchedResultsController to group your objects by sections. You do this by specifying a key-path in the class’s constructor method but there is another step that if overlooked will cause some confusion.

In a sample app I’ve created a food table that lists food in categories.

FetchedResultsController method grouping sections using a key-path:

Objective-C:

- (NSFetchedResultsController *)fetchedResultsController {
	if (fetchedResultsController != nil) {
		return fetchedResultsController;
	}

	// Create and configure a fetch request with the food entity.
	NSFetchRequest *fetchRequest = [[NSFetchRequest alloc] init];
	NSEntityDescription *entity = [NSEntityDescription entityForName:@"RWFood" inManagedObjectContext:managedObjectContext];
	[fetchRequest setEntity:entity];

	// Create the sort descriptors array.
	NSSortDescriptor *nameDescriptor = [[NSSortDescriptor alloc] initWithKey:@"name" ascending:YES];
	NSArray *sortDescriptors = [[NSArray alloc] initWithObjects:nameDescriptor, nil];
	[fetchRequest setSortDescriptors:sortDescriptors];

	// Create and initialize the fetch results controller.
	NSFetchedResultsController *aFetchedResultsController = [[NSFetchedResultsController alloc] initWithFetchRequest:fetchRequest managedObjectContext:managedObjectContext sectionNameKeyPath:@"category" cacheName:@"Food"];
	self.fetchedResultsController = aFetchedResultsController;
	fetchedResultsController.delegate = self;

	// Memory management.
	[aFetchedResultsController release];
	[fetchRequest release];
	[nameDescriptor release];
	[sortDescriptors release];

	return fetchedResultsController;
}

Swift:


lazy var fetchedResultsController: NSFetchedResultsController<rwfood> = {
    let fetchRequest: NSFetchRequest<rwfood> = RWFood.fetchRequest()
    let sortDescriptor = NSSortDescriptor(key: "name", ascending: true)
    fetchRequest.sortDescriptors = [sortDescriptor]
    let aFetchedResultsController = NSFetchedResultsController(fetchRequest: fetchRequest, managedObjectContext: managedObjectContext, sectionNameKeyPath: "category", cacheName: "Food")
    aFetchedResultsController.delegate = self
    do {
        try aFetchedResultsController.performFetch()
    } catch let error {
        print("Unable to perform fetch: \(error)")
    }
    return aFetchedResultsController
}()

Specify a key-path

Screenshot of Food sample app in wrong order.Save and quit the app a few times and you’ll see the objects seem to be in the wrong sections. If you look closer you’ll see that the objects are actually sorted in ascending name order. On looking at the code, it seems this is exactly what we asked the program to do! After some testing it also seems to show up more often if the table is a grouped one.

As per the docs, after you specify a key-path to group each section with you also need to make sure the first sort descriptor is sorting this key-path. Add a sort descriptor and everything will work as expected.

Revised fetchedResultsController method with missing sort descriptor:

Objective-C:

- (NSFetchedResultsController *)fetchedResultsController {

	if (fetchedResultsController != nil) {
		return fetchedResultsController;
	}

	// Create and configure a fetch request with the plant entity.
	NSFetchRequest *fetchRequest = [[NSFetchRequest alloc] init];
	NSEntityDescription *entity = [NSEntityDescription entityForName:@"RWPlant" inManagedObjectContext:managedObjectContext];
	[fetchRequest setEntity:entity];

	// Create the sort descriptors array.
	NSSortDescriptor *typeDescriptor = [[NSSortDescriptor alloc] initWithKey:@"type" ascending:YES];
	NSSortDescriptor *nameDescriptor = [[NSSortDescriptor alloc] initWithKey:@"name" ascending:YES];
	NSArray *sortDescriptors = [[NSArray alloc] initWithObjects:typeDescriptor, nameDescriptor, nil];
	[fetchRequest setSortDescriptors:sortDescriptors];

	// Create and initialize the fetch results controller.
	NSFetchedResultsController *aFetchedResultsController = [[NSFetchedResultsController alloc] initWithFetchRequest:fetchRequest managedObjectContext:managedObjectContext sectionNameKeyPath:@"type" cacheName:@"Plants"];
	self.fetchedResultsController = aFetchedResultsController;
	fetchedResultsController.delegate = self;

	// Memory management.
	[aFetchedResultsController release];
	[fetchRequest release];
        [categoryDescriptor release];
	[nameDescriptor release];
	[sortDescriptors release];

	return fetchedResultsController;
}

Swift:


lazy var fetchedResultsController: NSFetchedResultsController = {
    let fetchRequest: NSFetchRequest<rwplant> = RWPlant.fetchRequest()
    let typeDescriptor = NSSortDescriptor(key: "type", ascending: true)
    let nameDescriptor = NSSortDescriptor(key: "name", ascending: true)
    fetchRequest.sortDescriptors = [typeDescriptor, nameDescriptor]
    let aFetchedResultsController = NSFetchedResultsController(fetchRequest: fetchRequest, managedObjectContext: managedObjectContext, sectionNameKeyPath: "type", cacheName: "Plants")
    aFetchedResultsController.delegate = self
    do {
        try aFetchedResultsController.performFetch()
    } catch let error {
        print("Unable to perform fetch: \(error)")
    }
    return aFetchedResultsController
}()

Custom fonts on iPad and iPhone

Just incase you didn’t realise, with iOS 3.2 (iPad) and above you can load in custom fonts and use them with a standard UIFont object. There are a few catches… The font must be in the following format: –

  • OpenType Format (OTF)
  • TrueType Format (TTF)

Once you’ve dragged your chosen font file into an Xcode project, the next step is to add a line into the application’s Info.plist file. Add a new key UIAppFonts and make it an array. Expand the array and add a new string for each font, making the string the file’s full name including an extension.

Xcode Screenshot

You’re all set up now to use the font. That would be great if you knew which font it was! Here is a great little snippet for looping through all the fonts loaded into the system. Scan through the list and find your font.

Objective-C:

// Get all the fonts on the system
NSArray *familyNames = [UIFont familyNames];
for( NSString *familyName in familyNames ){
	printf( "Family: %s \n", [familyName UTF8String] );
	NSArray *fontNames = [UIFont fontNamesForFamilyName:familyName];
	for( NSString *fontName in fontNames ){
		printf( "\tFont: %s \n", [fontName UTF8String] );
	}
}

Swift:


// Get all the fonts on the system
UIFont.familyNames.forEach { familyName in
    print("Family: \(familyName)")
    UIFont.fontNames(forFamilyName: familyName).forEach { fontName in
        print("\tFont: \(fontName)")
    }
}

To use your font now, just use the standard UIFont constructor…

Objective-C:

self.titleLabel.font = [UIFont fontWithName:@"Inkpen Medium" size:31.0];

Swift:


self.titleLabel.font = UIFont(name: "Inkpen Medium", size: 31.0)

Some points to note: –

  • You can also use the font inside UIWebViews.
  • Interface Builder for XCode 3.2 has a bug that won’t let you choose the font. You have to do it in code.
  • Loading in too many fonts will slow your loading time down and will hurt your users’ eyes.