絶対に挫折しないiPhoneアプリ開発入門Part.10 ~Table View Controller その５、cellForRowAtIndexPath~

前回：絶対に挫折しないiPhoneアプリ開発入門Part.9 ~Table View Controller その４、numberOfSectionsInTableView、numberOfRowsInSection、Xcodeの背景を黒に~

Androidも同時に学びたい方は

さて、前回のnumberOfRowsInSectionの下にはこんなのがあると思います。

cellForRowAtIndexPath

- (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];
    }
    
    // Configure the cell...
    
    return cell;
}

次はこれを編集していきます。

結果から言うと、

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    cell.textLabel.text = [dataMain1 objectAtIndex:indexPath.row];
    cell.textLabel.textAlignment = UITextAlignmentCenter;
    cell.textLabel.font = [UIFont systemFontOfSize:17];
    cell.detailTextLabel.text = [dataDetail1 objectAtIndex:indexPath.row];
    cell.detailTextLabel.font = [UIFont systemFontOfSize:11];
    cell.detailTextLabel.textColor = [UIColor darkGrayColor];
    if(indexPath.row == 0){
        cell.imageView.image = [UIImage imageNamed:@"適当に入れたい画像を.png"];
    }
    if(indexPath.row == 1){
        cell.imageView.image = [UIImage imageNamed:@"入れてくださいな^^.png"];
    }
    if(indexPath.row == 2){
        cell.imageView.image = [UIImage imageNamed:@"ここはあなたの画像を.png"];
    }
    if(indexPath.row == 3){
        cell.imageView.image = [UIImage imageNamed:@"by渡部裕之.png"];
    }
    
    return cell;
}

そして、今のとこぼくはこういう画面です。

では、解説に移ります。

cellForRowAtIndexPath

ここでは、

テキストのサイズ、色、配置
画像の配置

などの設定をします。

要するに、

セルの中身をどういう風にするかを決めます。

cell.textLabel.text , cell.detailTextLabel.text

まず、

cell.textLabel.text = [dataMain1 objectAtIndex:indexPath.row];

これは、配列の順番に上から１つのセルにそのテキストが出てくるようにしてねという意味です。

言葉で説明は難しいのですが、実際に見てみれば一目瞭然です。

dataMain1 = [[NSArray alloc] initWithObjects:@"日吉商店街",@"日吉キャンパス",@"日吉駅時刻表",@"ひよしまるについて",nil];

dataMain1という配列の場合、順番に

日吉商店街
日吉キャンパス
日吉駅時刻表
ひよしまるについて

とありますね。

これがそのまま順番に列になるということです。

そして

cell.detailTextLabel.text = [dataDetail1 objectAtIndex:indexPath.row];

についても同じです^^

メインのテキスト（日吉商店街など）とディテール（普通部通りなど）を対応させるために、
配列の順番には気を配ってくださいね。

cell.textLabel.textAlignment

これは、見た通りで、

文字列を

中央に寄せるか
左に寄せるか
右に寄せるか

を決めるメソッドです。

今回では

cell.textLabel.textAlignment = UITextAlignmentCenter;

となってなますが、

cell.textLabel.textAlignment = UITextAlignmentLeft;

cell.textLabel.textAlignment = UITextAlignmentRight;

もできます。

cell.textLabel.font , cell.detailTextLabel.font

cell.textLabel.font = [UIFont systemFontOfSize:17];
cell.detailTextLabel.font = [UIFont systemFontOfSize:11];

見てわかる通り、文字の大きさを決めてます。

この数値を変えれば、様々な大きさの文字に出来ます。

cell.detailTextLabel.textColor

cell.detailTextLabel.textColor = [UIColor darkGrayColor];

メインの文字と詳細説明の文字の色を変えたいので、
詳細の文字の色をダークグレーにしました。

"darkGrayColor"という部分を変えれば様々な色に出来ます。

cell.imageView.image

cell.imageView.image = [UIImage imageNamed:@".png"];

セルに画像を挿入するメソッドです。

そして上のメッソドだけだとすべての列に同じ画像がになってしまうので、

if文を使って条件分岐します。

つまり、１列目はこの画像、２列目はこの画像を表示してね、という風にプログラムするということです。

　 if(indexPath.row == 0){
        cell.imageView.image = [UIImage imageNamed:@"１列目に表示させたい画像.png"];
    }
    if(indexPath.row == 1){
        cell.imageView.image = [UIImage imageNamed:@"２列目に表示させたい画像.png"];
    }
    if(indexPath.row == 2){
        cell.imageView.image = [UIImage imageNamed:@"３列目に表示させたい画像.png"];
    }
    if(indexPath.row == 3){
        cell.imageView.image = [UIImage imageNamed:@"４列目に表示させたい画像.png"];
    }

画像は

png

をオススメします。pngで統一するほうが良いでしょう。

ほかにもfontWithName:size:メソッドを使ってUIFontを作ることもできるなどありますが、
ここではひとまずひよしまるを完成させるためのメソッドの紹介にとどまります。

今回のテキストラベルまとめ

追記：注意すべき点として、

UITableViewCellStyleSubtitle

の部分がありました。

何も編集していない状態だと、mファイルがこうなってます。

- (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];
    }
    
    // Configure the cell...
    
    return cell;
}

見つかりましたか？

UITableViewCellStyleDefault

こうなってますね。

この「Default」の部分を「Subtitle」にしてくださいね。

そうしないと詳細（detailText）が表示されません。

他にも、

UITableViewCellStyleValue1

UITableViewCellStyleValue2

があり、試してみてくださいな♫

（12月12日追記）

次回：絶対に挫折しないiPhoneアプリ開発入門Part.11 ~Table View Controller その６、画面遷移、didSelectRowAtIndexPath、タブバーを消す、アニメーション~

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
当ブログ管理人のツイッターはこちら
◎フォローしてくださると泣いて喜びます！ツイッター上で当ブログの質問などにもできるだけお答えしますし、役に立つiPhoneアプリ開発情報もつぶやきます。個人的なご依頼（たとえば、プログラミングの家庭教師、Skypeレッスンをしてくれないか、iPhoneアプリ開発の勉強会ってやってるの、とかですね）でもかまいません。
■スカイプレッスンについて
開発をしているとその都度ぶつかる問題があると思いますが、検索で調べてもなかなかわからない、あるいは調べても非常に時間がかかる場合があると思います。開発者のみなさんもお忙しいと思いますので、私のレッスンを受けながら開発を進めていただけると、大幅にお時間を短縮できます。加えて、iPhoneアプリ開発の基礎、応用が身につき、今後の開発もスムーズに進められます。

お問い合わせはツイッター、またはhiyoshimarukoアットマークgmail.comまでお願いします。（アットマークを@にしてください）お待ちしております！