Custom UITableViewCells

Question

I am actually very surprised how difficult it is to keep your code well structured and readable when doing iphone app stuff... but it might be because I am doing something wrong.

I have a Sign Up page containing different kinds of inline-editable data: birthday, gender, name, password, phone number. I have made the page as a table view of custom cells where each cell is an instance of a sub class of UITableViewCell and is read from its own nib file. This because I thought that I then might be able to reuse these different kinds of cells later in other table view pages.

The approach of encapsulating the different custom cells in their own place is not working that well though:

1. Who is going to be the controller of e.g the gender picker inside the GenderCell?

2. How am I actually going to reuse the cells in a different table view controller when I had to put the SignUpController as the file's owner of the cell nib files?

I do not know if anyone but myself understood what I just wrote, but if so, I would be very thankful for any suggestions on how to structure my code differently.

Thanks a lot,
Stine

To make things more clear (?!) let me paste some of my code in here:

EditableLabel.h

@interface EditableLabel : UILabel {   
    UIView *inputView, *inputAccessoryView; 
}

@property (nonatomic, retain) UIView *inputView, *inputAccessoryView; 

- (void) setInputView:(UIView *)aView andToolbar:(UIToolbar *)aToolbar;

@end

EditableLabel.m

@implementation EditableLabel

@synthesize inputView, inputAccessoryView;

- (void) dealloc {
    [inputView release];
    [inputAccessoryView release];
    [super dealloc];
}

- (void) setInputView:(UIView *)aView andToolbar:(UIToolbar *)aToolbar {
    self.inputAccessoryView = aToolbar;
    self.inputView = aView;
}

- (BOOL) canBecomeFirstResponder {
    return YES;
}

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [self becomeFirstResponder];
}

@end

EditableCell.h

typedef enum {
    USERNAME, PASSWORD, MOBILE, BIRTHDAY, GENDER, DESCRIPTION, CATEGORY
} CellTag;

@interface EditableCell : UITableViewCell {
    CellTag tag;    
    UIView *editPoint;
    IBOutlet UILabel *headerLabel;
}

- (void) setTag:(CellTag)aTag andHeader:(NSString *)aHeader andEditPoint:(UIView *)aView;

@property (nonatomic) CellTag tag;
@property (nonatomic, retain) UIView *editPoint;
@property (nonatomic, retain) UILabel *headerLabel;

- (IBAction) editingDone:(id)sender;

- (void) showInputView;
- (void) hideInputView;

@end

EditableCell.m

@implementation EditableCell

@synthesize tag, editPoint, headerLabel;

- (void) dealloc {
    [editPoint release];
    [headerLabel release];
    [super dealloc];
}

- (void) setTag:(CellTag)aTag andHeader:(NSString *)aHeader andEditPoint:(UIView *)aView {
    self.tag = aTag;
    self.headerLabel.text = aHeader;
    self.editPoint = aView;
}

- (IBAction) editingDone:(id)sender {
    [self hideInputView];
}

- (void) showInputView {   
    [self.editPoint becomeFirstResponder];
}

- (void) hideInputView {
    [self.editPoint resignFirstResponder];    
}

@end

EditableLabelCell.h

@interface EditableLabelCell : EditableCell {
    IBOutlet UILabel *placeHolderLabel;
    IBOutlet EditableLabel *editableLabel;
}

@property (nonatomic, retain) UILabel *placeHolderLabel;
@property (nonatomic, retain) EditableLabel *editableLabel;

- (void) setTag:(CellTag)aTag 
      andHeader:(NSString *)aHeader 
 andPlaceHolder:(NSString *)aPlaceHolder
   andInputView:(UIView *)aView
     andToolbar:(UIToolbar *)aToolbar;

- (void) setValue:(NSString *)aValue;

@end

EditableLabelCell.m

@implementation EditableLabelCell

@synthesize placeHolderLabel, editableLabel;

- (void) dealloc {
    [placeHolderLabel release];
    [editableLabel release];
    [super dealloc];
}

- (void) setTag:(CellTag)aTag andHeader:(NSString *)aHeader andPlaceHolder:(NSString *)aPlaceHolder andInputView:(UIView *)aView andToolbar:(UIToolbar *)aToolbar {
    [super setTag:aTag andHeader:aHeader andEditPoint:self.editableLabel];
    self.placeHolderLabel.text = aPlaceHolder;
    [self.editableLabel setInputView:aView andToolbar:aToolbar];    
}

- (void) setValue:(NSString *)aValue {
    if (aValue && aValue != @"") {                
        self.placeHolderLabel.hidden = YES;
        self.editableLabel.text = aValue;        
    } else {
        self.editableLabel.text = nil;
        self.placeHolderLabel.hidden = NO;
    }
}

@end

EditableGenderCell.h

@protocol EditableGenderCellDelegate <NSObject>
@required
  - (NSString *) getTextForGender:(Gender)aGender;
  - (void) genderChangedTo:(Gender)aGender forTag:(CellTag)aTag;
@end

@interface EditableGenderCell : EditableLabelCell <UITableViewDataSource, UITableViewDelegate> {
    id<EditableGenderCellDelegate> delegate;    
    Gender gender;
    IBOutlet UITableView *genderTable;
    IBOutlet UIToolbar *doneBar;
}

- (void) setTag:(CellTag)aTag 
    andDelegate:(id<EditableGenderCellDelegate>)aDelegate 
      andHeader:(NSString *)aHeader 
      andGender:(Gender)aGender
 andPlaceHolder:(NSString *)aPlaceHolder;

@property (nonatomic, retain) id<EditableGenderCellDelegate> delegate;
@property (nonatomic) Gender gender;
@property (nonatomic, retain) UITableView *genderTable;
@property (nonatomic, retain) UIToolbar *doneBar;

@end

EditableGenderCell.m

@implementation EditableGenderCell

@synthesize delegate, gender, genderTable, doneBar;

- (void) dealloc {
    [delegate release];
    [genderTable release];
    [doneBar release];
    [super dealloc];
}

- (void) setTag:(CellTag)aTag andDelegate:(id<EditableGenderCellDelegate>)aDelegate andHeader:(NSString *)aHeader andGender:(Gender)aGender andPlaceHolder:(NSString *)aPlaceHolder {
    [super setTag:aTag andHeader:aHeader andPlaceHolder:aPlaceHolder andInputView:self.genderTable andToolbar:self.doneBar];
    self.delegate = aDelegate;
    self.gender = aGender;
    [super setValue:[self.delegate getTextForGender:aGender]];
}

#pragma mark - Table view data source

- (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 2;
}

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    switch (indexPath.row) {
        case MALE:
            switch (self.gender) {
                case MALE:
                    cell.accessoryType = UITableViewCellAccessoryCheckmark;    
                    break;
                default:
                    cell.accessoryType = UITableViewCellAccessoryNone;  
            } 
            break;
        case FEMALE:
            switch (self.gender) {
                case FEMALE:
                    cell.accessoryType = UITableViewCellAccessoryCheckmark;    
                    break;
                default:
                    cell.accessoryType = UITableViewCellAccessoryNone; 
            }  
            break;
    }

    cell.textLabel.text = [self.delegate getTextForGender:indexPath.row];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    return cell;
}

#pragma mark - Table view delegate

- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    self.gender = indexPath.row;
    [super setValue:[self.delegate getTextForGender:self.gender]];
    [self.delegate genderChangedTo:self.gender forTag:self.tag];   
    [tableView reloadData];
}

@end

Answer 1

Have a look at my answer to How to make a UITableViewCell with different subviews reusable?.

You should back up your custom tableviewcell nib files with a custom class representing your cell and encapsulate logic in it for example your gender picker. If you need to inform some outside controller of the gender you can make use of the delegate pattern.

Custom Gender picker in a TableViewCell

Ok let's start with the nib file, looking like this:

view hierarchy, don't set the File's Owner...

...set instead the class of the table view cell of your custom class:

The custom class

As you can see the class is almost empty, only providing the segmented control as property

GenderPickerTableViewCell.h

@interface GenderPickerTableViewCell : UITableViewCell 
{
    UISegmentedControl *genderPickerSegmentedControl;
}

@property (nonatomic, retain) IBOutlet UISegmentedControl *genderPickerSegmentedControl;

@end

GenderPickerTableViewCell.m

#import "GenderPickerTableViewCell.h"


@implementation GenderPickerTableViewCell

@synthesize genderPickerSegmentedControl;

#pragma mark -
#pragma mark memory management

- (void)dealloc 
{   
    [genderPickerSegmentedControl release];
    
    [super dealloc];
}

#pragma mark -
#pragma mark initialization

- (void)awakeFromNib
{
    // initialization goes here, for example preselect a specific gender
}

@end

The table view using our new cell

I'll provide only the necessary methods to make this work. The TableViewCellFactory class is just a nib loader like I posted in my referenced answer above. The genderPickerTableViewCellWithTableView is just a convenience class method to return that special kind of cell without too much boilerplate code

The last important thing to note is the configuration of the cell, this is kept simple, I just access the segmented control directly and add a target to it which informs this view controller about a change.

#pragma mark -
#pragma mark view lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    tableView.rowHeight = 100.0;
    tableView.dataSource = self;
    tableView.delegate = self;
}

#pragma mark -
#pragma mark UITableView methods

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

- (UITableViewCell *) tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)anIndexPath
{
    GenderPickerTableViewCell *cell = [TableViewCellFactory genderPickerTableViewCellWithTableView:aTableView];

    [cell.genderPickerSegmentedControl addTarget:self 
                                          action:@selector(genderPicked:) 
                                forControlEvents:UIControlEventValueChanged];
    
    return cell;
}

#pragma mark -
#pragma mark UISegmentedControl action

- (void)genderPicked:(id)sender
{
    UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;
    
    NSLog(@"selected index: %d", [segmentedControl selectedSegmentIndex]);
}

I hope this helps a bit for the beginning.

Answer 2

This is the code you can use for bouncing:

 -(IBAction)textFieldDidBeginEditing:(UITextField *)textField { //Keyboard becomes visible
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:0.3];
self.view.frame = CGRectMake(self.view.frame.origin.x, self.view.frame.origin.y - 50, self.view.frame.size.width, self.view.frame.size.height);
[UIView commitAnimations];

}

Just set y accordingly an call it when editing begins.