2013年7月16日火曜日

UITableViewについて - UITableViewのセルをカスタムセルを使ったほうがいい(2)

前回に引き続きカスタムセルについてです。

今回からカスタムセルを作ってUITableViewを生成してみます。

環境

  • Xcode : 4.6.2
  • iOS SDK : 6.1
  • デバッグ 実機 : iPod touch、バージョン6.1.3

目的

セルのコンテンツの重なりはないかと、セルの再利用が行われているかどうかを調べます。

作ってみる

それでは作っていきます。

やり方は以下の記事を参考にしました。

カスタマイズされたUITableViewCellを使う - @blog.justoneplanet.info

今回は、

  • カスタムセルとしてUITableViewCellクラスを継承した「CustomCell」クラスを作成。
  • セルのコンテンツはCustomCellクラス側で初期化する。
  • Xibファイルは使わない。

プロジェクトの作成

プロジェクトは「Single View Application」で作成。

使用するクラス

  • ViewController.h/m - UIViewControllerクラス継承
  • CustomCell.h/m - UITableViewCellクラス継承

ViewController

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

ViewController.h

#import "ViewController.h"
#import "CustomCell.h"

@interface ViewController () 
@property(nonatomic, retain)UITableView *tableView;  // テーブルビュー
@property(nonatomic, retain)NSArray *datas;  // 表示するデータを入れる配列
@end

@implementation ViewController

@synthesize tableView=_tableView;
@synthesize datas=_datas;

-(id)init
{
    if (self=[super init]) {
        // セルに表示するデータの初期化
        self.datas = [NSArray arrayWithObjects:@"a", @"b", @"c", @"d", @"e", @"f", @"g", @"h", @"i", @"j", nil];
    }
    
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    // iOS 6.0以降からのセル再利用の設定
    // http://dev.classmethod.jp/smartphone/iphone/ios6-uitableview/
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"CustomCell"];

    // テーブルビュー作成
    [self createTableView];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark -
#pragma mark - Private Method

// テーブルビュー作成
- (void)createTableView
{
    self.tableView = [[[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStylePlain] autorelease];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    [self.view addSubview:self.tableView];
}

#pragma mark -
#pragma mark - Table view delegate

// セルのセクション数を設定
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

// セルの個数を設定
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.datas count];
}

// セル高さを設定
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 100;
}

// セルの内容を設定
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *CellIdentifier = @"CustomCell";
    
    CustomCell *cell = [self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    
    if (cell == nil)
    {
        cell = [[[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        NSLog(@"CustomCell init");
    }
    
    //ラベルの値設定
    cell.label.text = [self.datas objectAtIndex:indexPath.row];
    
    return cell;
}

@end

CustomCell

CustomCell.h

#import <UIKit/UIKit.h>

@interface CustomCell : UITableViewCell
@property(retain, nonatomic)UILabel *label;
@end

CustomCell.m

#import "CustomCell.h"

@implementation CustomCell

@synthesize label=_label;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // 表示するラベルの初期化
        self.label = [[UILabel alloc]initWithFrame:CGRectMake(120, 30, 150, 50)];
        [self.contentView addSubview:self.label];
        
    }
    return self;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];
}

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

@end

結果

セルのコンテンツの重なりなし。
セルの再利用も行われている。

おわり

今回行った方法だと、セルのコンテンツの初期化と表示するデータの設定が複数のクラスで行われていて、少し使いづらいですね。
初期化と表示するデータの設定を一つのクラスで行いたいですね。

次回にその方法を書きます。

参考記事

カスタマイズされたUITableViewCellを使う - @blog.justoneplanet.info

0 件のコメント:

コメントを投稿