UITableViewCellにUITextFieldを埋める

HowTo iPhone SDK Guild

〜テーブルビューを使ったサンプルを作る〜シリーズは面倒になったんでやめ。
Guildタグでよろしく。まあ、そんな感じで。

作業内容

テーブルビューのセルにテキストフィールドを埋め込む。

    • おまけ
      • キーボードを自動表示。
      • テキスト入力中、テキストフィールドの右側にＸボタンを表示。

Xcode

XcodeでUITableViewCellの継承クラスを作成。

カスタムセル
  • 新規ファイルで、UITableViewCell Subclass テンプレートから、EditableCell クラスを追加。
  • EditableCellクラスにUITextFieldクラスのインスタンス変数を追加。
- (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier]) {
        // Initialization code
        textField = [[UITextField alloc] initWithFrame:CGRectZero];
        textField.font = [UIFont systemFontOfSize:20.0];
        textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
        // TextFieldの右側にＸボタンを表示
        textField.clearButtonMode = UITextFieldViewModeWhileEditing;
        // テキストフィールドをテーブルビューセルに追加
        [self addSubview:textField];
    }
    return self;
}

- (void)layoutSubviews {
    // CGRectInset : 中央を固定し、オフセットでdx,dyを指定する
    // この場合もとのサイズよりも小さくなる
    textField.frame = CGRectInset(self.contentView.bounds, 20, 0);
}

UITableViewDatasourceプロトコルのtableView:cellForRowAtIndexPath:でカスタムセルを返すようにする。

Controllerクラス

EditableCellのインスタンス変数を追加し、インスタンス化する。

- (void)viewDidLoad {
    . . . .

    if (nameCell == nil) {
        nameCell = [[EditableCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"nameCell"];
    }
    [nameCell.textField setPlaceholder:@"character name"];
}

tableView:cellForRowAtIndexPath:で、カスタムセルを返す。

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

    . . . .	

    if (indexPath.section == 0) {
        return nameCell;
    } else {
        cell.text = @"種族と性別を選択してください";
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }

    return cell;	
}

ビュー表示時に自動的にキーボードが表示されるようにする。
カスタムセルをファーストレスポンダにすることでキーボードを表示できる

- (void)viewWillAppear:(BOOL)animated {
    [nameCell.textField becomeFirstResponder];
}
- (void)viewWillDisappear:(BOOL)animated {
    // いらないかもしれないけど
    [nameCell.textField resignFirstResponder];
}

実行


次の予定

ピッカーを実装。