ios開発UITableView with xibおよびカスタムTable View Cell

原文URL:http://blog.csdn.net/m_changgong/article/details/8115137作者:張燕広
1、Single View Applicationプロジェクトを作成する.名前は:TableView Demo、以下の図

2、ViewControllerを修正する.xib、Table Viewコントロールを追加し、次のように接続します.

3、ビューコントローラViewController、プロトコルUItableViewDataSource、UItableViewDelegateで実現しなければならない方法を実現する必要がある.
プロジェクトディレクトリでFrameworks->UIKEtの順に展開する.framework->Headers、UITableViewを開きます.h,検索はプロトコルUItableViewDataSource,UItableViewDelegateの定義を見つけ,以下のようにする.

4、ViewControllerを修正する.h,以下のように
 

<span style="font-family:Microsoft YaHei;font-size:18px;">//
//  ViewController.h
//  TableViewDemo
//
//  Created by Zhang Yanguang on 12-10-25.
//  Copyright (c) 2012  MyCompanyName. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property(nonatomic,retain)NSMutableArray *apps;

@end
</span>

 
5、ViewControllerを修正する.m,以下
 

<span style="font-family:Microsoft YaHei;font-size:18px;">//
//  ViewController.m
//  TableViewDemo
//
//  Created by Zhang Yanguang on 12-10-25.
//  Copyright (c) 2012  MyCompanyName. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize apps;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //    
    [self loadData];
}

//      
-(void)loadData{
    apps = [[NSMutableArray alloc]init];
    for(int i=0;i<8;i++){
        [apps insertObject:[NSString stringWithFormat:@"App-%d",(i+1)] atIndex:i];
    }
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    apps = nil;
    // Release any retained subviews of the main view.
}

-(void)dealloc{
    [super dealloc];
    [apps release];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

#pragma mark table view datasource methods 
//       ，   1
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;{
    return 1;
}

//       
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [apps count];
}

//       
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    //
    NSString *myTableViewCellIdentifier = @"myTableViewCellIdentifier";
    UITableViewCell *cell = [[UITableView alloc]dequeueReusableCellWithIdentifier:myTableViewCellIdentifier];//  1
    if(cell==nil){
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:myTableViewCellIdentifier]; //  2
    }
    NSString *imageName = [NSString stringWithFormat:@"%d",[indexPath row]+1];
    //cell.image = [UIImage imageNamed:imageName]; //        
    cell.imageView.image = [UIImage imageNamed:imageName];
    cell.textLabel.text = [apps objectAtIndex:[indexPath row]];
    cell.textLabel.textAlignment = UITextAlignmentLeft;
    cell.textLabel.font = [cell.textLabel.font fontWithSize:30];
    
    tableView.separatorColor = [UIColor clearColor];  //      
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;   //         
    return cell;
}

//       
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    return @"Header";
}

//       
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
    return @"Footer";
}

#pragma mark table view data delegate methods
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 50;
}
@end</span>

 
備考1、備考2、コード解釈:
1)テーブル内の各ローにはサブビューがあります.すなわち、UITableViewCellクラスのインスタンスです.2)ローが表示されているかどうかにかかわらず、UITableViewがテーブル内の各ローにUItableViewCellのインスタンスを割り当てると、コンテンツのオーバーヘッドが発生することは間違いありません.もちろん、UItableViewはこのように設計されていません.3)現在表示されている行のみがUItableViewCellのインスタンスを割り当てられます.スクロール操作で画面の表ビューユニットから離れました(UITableViewCellの例)再利用可能なセル・シーケンスに配置されます.システムの動作が遅い場合、テーブル・ビューはそのシーケンスからセルを削除して記憶領域を解放します.使用可能な記憶領域があれば、テーブル・ビューは後で再利用するために再取得されます.4)/1つのフォーム・ビューが画面からスクロールされると、別のフォーム・ビューが表示されます.1つのフォームビューが反対側から画面にスクロールされ、画面にスクロールされた新しい行が画面からスクロールされたセルの1つのセルを再使用すると、ビューの作成と解放に関連するオーバーヘッドが回避されます.5)このメカニズムを使用するには、再利用可能なセル6を示す識別子(identifier)テーブルが最初に初期化されたときに再利用可能なフォーム要素がないことは間違いないので、cell=[[UItableView Cell alloc]initWithStyle:UItableView CellStyleDefault reuseIdentifier:myTableView CellIdentifiier];reuseIdentifierパラメータは、テーブル・ユニットの再利用可能な識別子を示す
6、コンパイル、実行、効果は以下の通り

クリックしてソースコードをダウンロード
 
画像でTable Separeator分割線をどのようにカスタマイズするかは、一般的に[tableView setSeparatorColor:[UIcoloor redColor]]のようなものを利用する.文はcellの中間分割線の色を変更します.では、どのようにして1つの画像を分割線の背景にしますか?方法1:cell separatorColorをclearに設定し、画像の分割線をカスタムcustom cellに追加します.
tableView.separatorColor = [UIColor clearColor];
方法2:cellに画素のimageViewを追加して画像を読み込み、tableViewを設定する.separatorStyle = UITableViewCellSeparatorStyleNone
 
最初の行Cellとその上のナビゲーションバーの間隔をカスタマイズ

tableView.tableHeaderView = [[[UIView alloc] initWithFrame:CGRectMake(0,0,5,20)] autorelease];

 
表ビューのセルのカスタマイズ
アプリケーションはもっときれいになりますか?表のセルをカスタマイズして、より美しくします.これまで使用してきたデフォルトのスタイルでは、表のセルが表示され、サムネイルの位置とサイズが固定されています.次の画面に表示されるようにサムネイルを大きくして、各料理の準備時間を添付したい場合は、どうすればいいですか?

異なるスタイルのカスタム表ビューセル
セルのデザイン
この場合、独自の表セルを作成して設計する必要があります.Xcodeに戻ります.プロジェクトブラウザで、[SimpleTable]フォルダを右クリックし、[New File...]を選択します.
独自の表セルを設計するには、新しい表セルインタフェースジェネレータを作成します.この場合、空のユーザーインタフェースを起動するだけです.「次へ」をクリックして続行します.

空のInterface Builderドキュメントを選択
デバイスシリーズの選択を求めるメッセージが表示されたら、「iPhone」を選択し、「次へ」をクリックして続行します.保存したファイルは「SimpleTable Cell」です.

ファイルが作成されると、Project Navigatorで見つけることができます.「SimpleTable.cell.xib」を選択してインタフェースジェネレータに切り替えます.カスタム表のセルの外観を設計します.
オブジェクトライブラリで「Table View Cell」を選択し、インタフェースジェネレータのデザイン領域にドラッグします.

より大きなサムネイルを収容するために、セルの高さを変更します.下/上側のセルの縁を押して高さ78に縮めます.

または、「Size Inspector」を使用して高さを変更することもできます.

表セルの寸法監査を表示する
次に、「Attributes Inspector(プロパティインスペクタ)」の上半分の共通領域を選択して、カスタムセル「SimpleTable Cell」に「Identifier(識別子)」を設定します.この識別子は後のコードで使用されます.

表のセルビューを構成したら、他の要素を入れます.「Image View」を選択し、表ビューのセルにドラッグします.

イメージビューはサムネイルを表示するために使用されます.セルに合わせるようにサイズを変更できます.数値を参照して、私が設定した高さと幅は69ピクセルです.
次に、Name(名前)、Prep Time(準備時間)、Timeの3つのラベルを追加します.「Name」タブは、フォーミュラの名前を表示するために使用されます.「PrepTime」は静的ラベルで、「準備時間」のみが表示されます.最後に、「Time」のラベルは、実際の特定の料理の準備時間を表示するために動的なラベルです.
ラベルを追加するには、Object library(オブジェクトライブラリ)で「ラベル」を選択し、セルにドラッグします.ラベルをダブルクリックして名前を変更できます.

上記と比較すると、フォントのサイズとスタイルが異なる場合があります.フォントスタイルを変更するには、ラベルを選択して「プロパティインスペクタ」を選択します.ここで、「フォント」と「最小フォントサイズ」の設定を変更できます.テキストの色と位置合わせを変更することもできます.

最終設計は次のようになります.

クラスのカスタムセルの作成
これまで、表のセルを設計してきました.しかし、カスタムセルのラベル値を変更するにはどうすればいいですか?カスタム表ビューのセルに新しいクラスを作成します.このクラスは、カスタムセルの最下位のデータモデルを表します.
以前と同様に、「SimpleTableのプロジェクトブラウザ」フォルダを右クリックし、「新規ファイル」を選択します.

新しいファイルテンプレートを選択
このオプションを選択すると、Xcodeからテンプレートの選択を求めるメッセージが表示されます.新しいカスタム表ビューセルクラスを作成し、「Objective-Cクラス」の「Cocoa Touch」を選択し、「次へ」をクリックします.

プロジェクトの新しいファイルを作成
クラス名は「SimpleTable Cell」と記入し、「Subclass of」の「UItableView Cell」を選択します.

「次へ」をクリックし、保存したファイルをSimpleTableプロジェクトフォルダに保存し、「作成」をクリックして続行します.XcodeはProject Navigatorに「SimpleTable Cell.h」という2つのファイルと「SimpleTable Cell.m」を作成します.
前述したように、SimpleTableクラスはカスタムセルのデータモデルとして使用されます.セルには、thumbnail image view(サムネイル画像ビュー)、name label(名前ラベル)、time label(タイムラベル)の3つの値が可変です.このクラスでは、これらのダイナミック値を表す3つのプロパティを追加します.
「SimpleTable.cell.h」を開き、次の属性を追加します.

@property (nonatomic, weak) IBOutlet UILabel *nameLabel;
@property (nonatomic, weak) IBOutlet UILabel *prepTimeLabel
@property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

「SimpleTable.Cell.m」を開き、次の「@implementation SimpleTable.Cell」の下に次のコードを追加します.

@synthesize nameLabel = _nameLabel;
@synthesize prepTimeLabel = _prepTimeLabel;
@synthesize thumbnailImageView = _thumbnailImageView;

接続の確立
変更を保存し、「SimpleTable.Cell.xib」を選択してInterface Builderに戻ります.クラスのプロパティとLabel/ImageView間の接続を作成できます.
まず、セルを選択し、「Identity Inspector」でクラスを「SimpleTable Cell」に変更することで、セルビューと以前に作成したクラスとのつながりを確立できます.
次に、接続のプロパティを設定します.「Objects」の下にある「SimpleTable Cell」を右クリックし、「Outlets」クエリーを表示します.「nameLabel」の横にある円をクリックして押したまま、Label-Nameオブジェクトにドラッグします.Xcodeは自動的に接続を確立します.

「prepTimeLabel」と「thumbnailImageView」の操作を繰り返します.
View”:

接続「prepTimeLabel」および「Label–Time」

接続「thumbnailImageView」および「ImageView」

すべての接続を確立すると、次のように見えます.

SimpleTable ViewControllerの更新
カスタム表のセルの設計とエンコードを完了しました.最後に、最後に変更したセクションに進みます.SimpleTable View Controlにカスタムセルが配置されていることを確認します.
「SimpleTable.View.m」のコードを再確認しましょう.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableItem";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    return cell;
}

 
以前は、デフォルトの表ビュー・セル(UITAbleView.Cell)で表示されていた表アイテムを使用していました.カスタム表セルを使用するには、SimpleTable.View.mでコードを変更する必要があります.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil) 
    {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];
    } 
    
    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];
    
    return cell;
}

 
#import"SimpleTable.Cell.h"をインポートすることで、"SimpleTable View Control"は"SimpleTable.Cellが何であるかを知り、それを利用することができます.
最後に、表セルの高さが78に変更されたため、“@end」の前に次のコードを追加します.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 78;
}

「Run」ボタンとSimpleTableをクリックしたアプリケーションは、次のように見えます.

カスタム表ビューセル(xibを使用しない)

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {
        UIImage *defaultImage = [UIImage imageNamed:@"hotelImageDefault.png"];
        hotelImage = [[UIImageView alloc] initWithFrame:CGRectMake(7, 7, 56, 56)];
        hotelImage.image = defaultImage;
        hotelImage.layer.masksToBounds = YES;
        hotelImage.layer.cornerRadius = 6.0;
        
        titleText = [[UILabel alloc] initWithFrame:CGRectMake(71, 5, 209, 25)];
        titleText.font = [UIFont fontWithName:@"Arial" size:17.0f];
        titleText.backgroundColor = [UIColor clearColor];
        addressText = [[UILabel alloc] initWithFrame:CGRectMake(71, 30, 209, 30)];
        addressText.font = [UIFont fontWithName:@"Arial" size:14.0f];
        addressText.numberOfLines = 2;
        addressText.textColor = [UIColor darkGrayColor];
        addressText.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:hotelImage];
        [self.contentView addSubview:titleText];
        [self.contentView addSubview:addressText];        
    }
    return self;
}