Editable UITableView with a text box in each cell

Question

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

Answer 1

You need to code a little bit to create a custom cell layout, so I hope you don't scare you.

First, a new subclass of UITableViewCell . Let me call it InLineEditTableViewCell . Your InLineEditTableViewCell.h interface might 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 might 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, you configure your UITableView , as usual, in your controller. In this case, you need to implement the protocol method UITablesViewDataSource - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath . Before #import "InLineEditTableViewCell" your implementation for this, remember the #import "InLineEditTableViewCell" in your view controller. After that, 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"; } 

What is it! You now have custom cells in a UITableView .

Good luck