Editable UITableView with a textfield on each cell

Question

I am new to the iOS world and I want to know how to make a UITableView with custom cells that look and behave like the one you have when you try to configure some WiFi connexion on your device. (You know the UITableView with cells containing UITextField s with blue font where you set up the ip address and all that stuff... ).

Answer 1

To make a custom cell layout do involve a bit of coding, so I hope that dosen't frighten you.

First thing is creating a new UITableViewCell subclass. Let's call it InLineEditTableViewCell . Your interface InLineEditTableViewCell.h could look something like this:

#import <UIKit/UIKit.h>

@interface InLineEditTableViewCell : UITableViewCell

@property (nonatomic, retain) UILabel *titleLabel;
@property (nonatomic, retain) UITextField *propertyTextField;

@end

And your InLineEditTableViewCell.m could look like this:

#import "InLineEditTableViewCell.h"

@implementation InLineEditTableViewCell

@synthesize titleLabel=_titleLabel;
@synthesize propertyTextField=_propertyTextField;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Here you layout your self.titleLabel and self.propertyTextField as you want them, like they are in the WiFi settings.
    }
    return self;
}

- (void)dealloc
{
    [_titleLabel release], _titleLabel = nil;
    [_propertyTextField release], _propertyTextField = nil;
    [super dealloc];
}

@end

Next thing is you set-up your UITableView as you normally would in your view controller. When doing this you have to implement the UITablesViewDataSource protocol method - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath . Before inserting your implementation for this, remember to #import "InLineEditTableViewCell" in your view controller. After doing this the implementation is as follows:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    InLineEditTableViewCell *cell = (InLineEditTableViewCell *)[tableView dequeueReusableCellWithIdentifier:@"your-static-cell-identifier"];

    if (!cell) {
        cell = [[[InLineEditTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"your-static-cell-identifier"] autorelease];
    }

    // Setup your custom cell as your wish
    cell.titleLabel.text = @"Your title text";
}

That's it! You now have custom cells in your UITableView .

Good luck!