NotTooBad Software » iPhone development

Icons for your iPhone settings

Kare — Mon, 02 Nov 2009 18:52:58 +0000

bjango.com has an interesting article about how and why many developers are moving their settings into the app itself. They even have some icons you can use, both for the tab bar and the toolbar.

Finally released my first App

Kare — Fri, 04 Sep 2009 12:07:29 +0000

I finally released my first iPhone app, Repetitions, today. It’s going to be very interesting to see how it does. After reading about how other apps have done I’m not very optimistic, especially since the release date of my app was set to 25 August (when it was accepted by Apple) instead of today when it was actually released. Which of course means my app now appears on page 6 of the “Health and Fitness” category in the AppStore. Where no one will find it. But I will be releasing an update soon anyway, which should put it on the first page at least for a couple of days.

Added mySettings to GitHub

Kare — Fri, 26 Jun 2009 17:14:13 +0000

I finally added mySettings to GitHub, using the marvel that is hg-git. It allows me to continue using mercurial, and to push and pull from git repositories. The project on GitHub can be found here. The main place for mySettings will still be on BitBucket, I’m just uploading the code to GitHub to see if it will attract more users and contributors.

Customising a table view with mySettings

Kare — Thu, 21 May 2009 18:32:47 +0000

I’ve been working on my iPhone app lately (for performing physical exercises like the ones you get from a physiotherapist, but more about that later) so I haven’t written anything for a long time. I thought I’d rectify that by showing how to create highly customised UIs with fairly little coding. I recently added support for delegates to mySettings and that opened up a lot of possibilities, even with only one method in the delegate (for now).

As an example, here’s the configuration screen for my app:

To do this I had to, of course, install mySettings. Then create this plist:

And configure the table view:

NSString *plist = [[NSBundle mainBundle] pathForResource:@"ExerciseSettingsView" ofType:@"plist"];
tableviewdelegate = [[ExerciseSettingsTableViewDelegate alloc] initWithConfigFile:plist andSettings:exercise];
tableviewdelegate.delegate = self;
tableviewdelegate.viewcontroller = self;
 
tableview.backgroundColor = [UIColor clearColor];
tableview.rowHeight = 53;
tableview.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
tableview.separatorColor = [UIColor clearColor];
 
tableview.delegate = tableviewdelegate;
tableview.dataSource = tableviewdelegate;

“exercise” is the model object containing the values, including the array “repetitions” populating the bottom section of the table view. “ExerciseSettingsTableViewDelegate” is a subclass of “SettingsMetadataSource” from mySettings. I use it to override

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

so I can add on the alternating background images (since I need the row number for that). I also override

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

to provide the different row heights for the two sections.

The bottom section has custom cells, but the top one uses the standard cells from mySettings. To customise the fonts, colours, background view and accessory view I use the delegate function

- (void) cellDidInit:(SettingsCell *)cell

which is called right after the cell has been initialised.

The tricky bit

Sadly the difficult part is still left; the user needs to be able to add, remove and reorder the cells in the bottom section, and I have not been able to find a way to customise the reorder control. The built-in one looks completely out of place here. Not to mention the red minus sign for removing cells.

Another way to create Settings views

Kare — Mon, 04 May 2009 19:26:56 +0000

Craig Hockenberry has also created an API for Settings views. But unlike mySettings his API creates the views from code instead of plists. Like this:

- (void)constructTableGroups
{
NSMutableArray *cells = [NSMutableArray array];
IFTextCellController *textCell = [[[IFTextCellController alloc] initWithLabel:@"Text" andPlaceholder:@"Placeholder" atKey:@"sampleText" inModel:model] autorelease];
[cells addObject:textCell];
IFSwitchCellController *switchCell = [[[IFSwitchCellController alloc] initWithLabel:@"Switch" atKey:@”sampleSwitch” inModel:model] autorelease];
[cells addObject:switchCell];
tableGroups = [[NSArray arrayWithObject:cells] retain];
}

Check it out at http://furbo.org/2009/04/30/matt-gallagher-deserves-a-medal/ .

Measuring pixels in OS X

Kare — Mon, 06 Apr 2009 18:37:35 +0000

I know there are standalone applications for this, but when I need to measure something in one of my applications I find it easiest to just use the screenshot functionality built into OS X. Just press Command-Control-Shift-4 and drag to measure.

A UIPickerView with labels

Kare — Sun, 29 Mar 2009 18:55:54 +0000

I recently needed a picker view with labels (like the one in the timer tab in the Clock app) to select minutes and seconds for a time interval. So I made the following subclass of UIPickerView:

#import
 
/**
A picker view with labels under the selection indicator.
Similar to the one in the timer tab in the Clock app.
NB: has only been tested with less than four wheels.
*/
@interface LabeledPickerView : UIPickerView {
NSMutableDictionary *labels;
}
 
/** Adds the label for the given component. */
- (void) addLabel:(NSString *)labeltext forComponent:(NSUInteger)component;
 
@end

… and the implementation:

/*******************************************************************************
* Copyright (c) 2009 Kåre Morstøl (NotTooBad Software).
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
*    Kåre Morstøl (NotTooBad Software) – initial API and implementation
*******************************************************************************/
 
// http://stackoverflow.com/questions/367471/fixed-labels-in-the-selection-bar-of-a-uipickerview/616517
 
#import "LabeledPickerView.h"
 
@implementation LabeledPickerView
 
/** loading programmatically */
- (id)initWithFrame:(CGRect)aRect {
if (self = [super initWithFrame:aRect]) {
labels = [[NSMutableDictionary alloc] initWithCapacity:3];
}
return self;
}
 
/** loading from nib */
- (id)initWithCoder:(NSCoder *)coder {
if (self = [super initWithCoder:coder]) {
labels = [[NSMutableDictionary alloc] initWithCapacity:3];
}
return self;
}
 
- (void) dealloc
{
[labels release];
[super dealloc];
}
 
#pragma mark Labels
 
- (void) addLabel:(NSString *)labeltext forComponent:(NSUInteger)component {
[labels setObject:labeltext forKey:[NSNumber numberWithInt:component]];
}
 
/**
Adds the labels to the view, below the selection indicator glass-thingy.
The labels are aligned to the right side of the wheel.
The delegate is responsible for providing enough width for both the value and the label.
*/
- (void)didMoveToWindow {
// exit if view is removed from the window or there are no labels.
if (!self.window || [labels count] == 0)
return;
 
UIFont *labelfont = [UIFont boldSystemFontOfSize:20];
 
// find the width of all the wheels combined
CGFloat widthofwheels = 0;
for (int i=0; i
widthofwheels += [self rowSizeForComponent:i].width;
}
 
// find the left side of the first wheel.
// seems like a misnomer, but that will soon be corrected.
CGFloat rightsideofwheel = (self.frame.size.width - widthofwheels) / 2;
 
// cycle through all wheels
for (int component=0; component
// find the right side of the wheel
rightsideofwheel += [self rowSizeForComponent:component].width;
 
// get the text for the label.
// move on to the next if there is no label for this wheel.
NSString *text = [labels objectForKey:[NSNumber numberWithInt:component]];
if (text) {
 
// set up the frame for the label
CGRect frame;
frame.size = [text sizeWithFont:labelfont];
// center it vertically
frame.origin.y = (self.frame.size.height / 2) - (frame.size.height / 2) - 0.5;
// align it to the right side of the wheel, with a margin.
// use a smaller margin for the rightmost wheel.
frame.origin.x = rightsideofwheel - frame.size.width -
(component == self.numberOfComponents - 1 ? 5 : 7);
 
// set up the label
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.text = text;
label.font = labelfont;
label.backgroundColor = [UIColor clearColor];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0,1);
 
/*
and now for the tricky bit: adding the label to the view.
kind of a hack to be honest, might stop working if Apple decides to
change the inner workings of the UIPickerView.
*/
if (self.showsSelectionIndicator) {
// if this is the last wheel, add label as the third view from the top
if (component==self.numberOfComponents-1)
[self insertSubview:label atIndex:[self.subviews count]-3];
// otherwise add label as the 5th, 10th, 15th etc view from the top
else
[self insertSubview:label aboveSubview:[self.subviews objectAtIndex:5*(component+1)]];
} else
// there is no selection indicator, so just add it to the top
[self addSubview:label];
}
}
}
 
@end

A big thanks to dizy from stackoverflow.com for showing how to add the labels below the selection indicator.

If anyone knows of a better place to put the label-adding code than didMoveToWindow then please let me know. It seems out of place where it is now.

This class is part of the mySettings project and the latest version can always be found here: LabeledPickerView.h, LabeledPickerView.m.

mySettings: A Settings API for the iPhone

Kare — Fri, 20 Mar 2009 19:56:35 +0000

NB: Unfortunately I am not able to do any more development on this or any other projects. I am hoping that someone else will take over the project and update it. There is also this similar project.

A lot of iPhone apps have their own settings views similar to the ones in the Settings App on the iPhone home screen. But to my surprise I couldn’t find any general API for it. So I made my own and published it here. It uses a plist configuration file like the one used by the Settings App, with some added options (and some removed ones, but they will hopefully be implemented in the near future).

In a nutshell it takes a plist like this:

and turns it into this:

Features

Text fields, on/off switch button, integers and time intervals (with maximum/minimum values and custom format string for the integers).
More options are needed, obviously, like dates and select lists. Feel free to help out if there are other options you would like to see implemented.
Titles can be indented.
By default the settings themselves are stored in the standard user defaults object ([NSUserDefaults standardUserDefaults]), but you can use any object that supports key-value coding. This enables you to use your model classes directly in the settings view.
And if you don’t find blue pyjama stripes exciting, you can of course change the table view background.

And that’s it for the time being. A work in progress, obviously. I would also like to see support for custom table cells and dynamically filling a section with the contents of an array or a dictionary. And localisation. And sliders. And customising fonts and colours. And lots more cool stuff. So if you want to check it out, follow these instructions. And if you make any changes please let me know so I can merge them back into the repository.