UITableViewでUITextFieldを使うメモ
よくあるログイン画面は、UITableView で作ってある(気がする)。
なので、それでやりたい。で、まず一歩目が、UITextFieldの配置。簡単そうだけど、意外とハマった。
やりたいのは、こんなの。UITableViewCell で UITextField を使う。入力フィールドがCellの真ん中に表示されるようにする。
TableViewCell の設定。
LoginViewController.m
#define TAG_USER_ID 1 #define TAG_PASSWORD 2 // テーブルの列にデータセット - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UILabel *nameLabel; UITextField *passTextFld; static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier]; cell.accessoryType = UITableViewCellAccessoryNone; cell.selectionStyle = UITableViewCellSelectionStyleNone; UIFont *textFont = [UIFont systemFontOfSize:17.0]; // ラベル nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 10, 130, 50)]; nameLabel.backgroundColor = [UIColor clearColor]; [nameLabel setFont:textFont]; [cell.contentView addSubview:nameLabel]; // テキスト passTextFld = [[UITextField alloc] initWithFrame:CGRectMake(130, 20, 140, 50)]; passTextFld.delegate = self; [passTextFld setFont:textFont]; passTextFld.autocapitalizationType = UITextAutocapitalizationTypeNone; passTextFld.clearButtonMode = UITextFieldViewModeWhileEditing; if (indexPath.row == 0) { [nameLabel setText:@"ユーザーID"]; passTextFld.placeholder = @"ユーザーID"; passTextFld.returnKeyType = UIReturnKeyNext; passTextFld.secureTextEntry = NO; passTextFld.tag = TAG_USER_ID; } else { [nameLabel setText:@"パスワード"]; passTextFld.placeholder = @"パスワード"; passTextFld.returnKeyType = UIReturnKeyDefault; passTextFld.secureTextEntry = YES; passTextFld.tag = TAG_PASSWORD; } [cell.contentView addSubview:passTextFld]; } return cell; }
高さとかはこんな感じ。
// セクション数 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } //セクションのタイトルを設定 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { return nil; } // テーブルセルの高さを設定 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 50.0f; } // tableのリスト件数 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 2; } #pragma mark - TextField Check // TextField Returnタップ - (BOOL)textFieldShouldReturn:(UITextField *)textField { // キーボード非表示 [textField resignFirstResponder]; return YES; }
ヘッダーファイルにUITextFieldの操作を行うDelegateメソッドを定義しとく。
LoginViewController.h
#import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> @interface LoginViewController : UIViewController <UITextFieldDelegate> { }
なんか変。orz
ラベル(ユーザーID)と入力テキストの配置、高さを同じにしてるのに、なんかズレる。
frameのCGRect指定で、雰囲気、設定してみた。→ダメ。
なら、frameの横位置で中央に設定するのは、幅/2 ってよくある。なら、高さも半分じゃ?てことで、
やってみた。→ダメ。orz そらそうよね、高さ50/2 でY軸の位置を指定したって…w
で、ふと思い出した。
InterfaceBuilder で、UITextField の設定を見ると、なんか、真ん中に表示する ってあったよなー と。
試しに見てみた。
てことで、正解src☆
// テキスト passTextFld = [[UITextField alloc] initWithFrame:CGRectMake(130.0f, 0.0f, 140.0f, 50.0f)]; passTextFld.delegate = self; [passTextFld setFont:textFont]; passTextFld.keyboardType = UIKeyboardTypeASCIICapable; // 高さ:Center passTextFld.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; passTextFld.autocapitalizationType = UITextAutocapitalizationTypeNone;
時間かかったけど、出来たので、オッケー♪
【参考サイト】
☆座標の指定が整数値でない場合 UIKit の描画(ビュー、画像、ボタン、その他いろいろ)がぼやける
http://d.hatena.ne.jp/KishikawaKatsumi/20100527/1274910461
☆UITextField horizontal and vertical alignment
http://cocoamatic.blogspot.jp/2011/01/uitextfield-horizontal-and-vertical.html