iPhoneアプリのユーザインタフェースの作りこみ2 - 黒色槍騎兵のiPhoneアプリ開発日記

「iPhoneのメールみたいに編集ボタンを押すと、するっとチェックボックスが表示されるようにする。」の続きです。
方法は、編集モードと非編集モードでセルに配置した部品の表示位置をずらすという方法をとります。
１）セルの作成
まず、必要な要素をつめこんだUITableViewCustumCellクラスを作成します。UITableViewCellを派生させたクラスを作成し、UIImageViewやらUILabelを配置します。
出来上がりのUITableViewCustumCellのイメージはこんな感じになります。

#import <UIKit/UIKit.h>
#import "ToggleImageControl.h"

@interface UITableViewCustomCell : UITableViewCell {
	ToggleImageControl* toggleControl_;
	UIImageView* userIcon_;
	UILabel* name_;
	UILabel* screenName_;
	UILabel* text_;
}

- (void)setName:(NSString*)name;
- (void)setScreenName:(NSString*)screenName;
- (void)setText:(NSString*)text;

@end

#import "UITableViewCustomCell.h"

@implementation UITableViewCustomCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

	self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
	if (self) {

		// CheckBox
		toggleControl_ = [[ToggleImageControl alloc] initWithFrame:CGRectMake(-25, 12, 25, 25)];
		[self.contentView addSubview: toggleControl_];

		// Icon
		userIcon_ = [[UIImageView alloc] initWithFrame:CGRectMake( 5, 7, 35, 35)];
		[self.contentView addSubview: userIcon_];

		// Name
		name_ = [[UILabel alloc] init];
		name_.backgroundColor = [UIColor colorWithWhite:1.0 alpha:.0];
		name_.adjustsFontSizeToFitWidth = YES;
		name_.minimumFontSize = 12;
		name_.font = [UIFont fontWithName:@"Verdana" size:12];
		[self.contentView addSubview: name_];

		// Screen Name
		screenName_ = [[UILabel alloc] init];
		screenName_.backgroundColor = [UIColor colorWithWhite:1.0 alpha:.0];
		screenName_.adjustsFontSizeToFitWidth = YES;
		screenName_.minimumFontSize = 9;
		screenName_.font = [UIFont fontWithName:@"Verdana" size:9];
		[self.contentView addSubview: screenName_];

		// Text
		text_ = [[UILabel alloc] init];
		text_.backgroundColor = [UIColor colorWithWhite:1.0 alpha:.0];
		text_.adjustsFontSizeToFitWidth = YES;
		text_.minimumFontSize = 11;
		text_.font = [UIFont fontWithName:@"Verdana" size:11];
		[self.contentView addSubview: text_];
	}
	return self;
}

- (void)setName:(NSString*)name {
	name_.text = name;
}

- (void)setScreenName:(NSString*)screenName {
	screenName_.text = screenName;
}

- (void)setText:(NSString*)text {
	text_.text = text;
}

-(void)drawRect:(CGRect)rect {
	// 罫線
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextMoveToPoint(context, 0, 50);
	CGContextAddLineToPoint(context, 320, 50);
	CGContextSetLineWidth(context, 0.5);
	CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 1.0);
	CGContextStrokePath(context);
}

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

- (void)dealloc {
	NSLog(@"UITableViewCustomCell dealloc");
	[toggleControl_ release];
	[userIcon_ release];
	[name_ release];
	[screenName_ release];
	[text_ release];

	[super dealloc];
}


@end

２）編集モードでずらす
編集モードと非編集モードで表示位置をかえます。30pxほど画面外に配置し、編集モード時に画面内に配置するようにします。

layoutSubviewsをオーバーライドし、その中でずらす処理を記述します。編集モードかどうかは、セルのeditingプロパティで判断できるので、以下のように実装します。

- (void)layoutSubviews {
	[super layoutSubviews];

	if (self.editing == YES) {
		toggleControl_.frame     = CGRectMake(	5, 12,	25, 25);
		userIcon_.frame 	 = CGRectMake( 35,  7,	35, 35);
		name_.frame 		 = CGRectMake( 80,  0, 230, 20);
		screenName_.frame	 = CGRectMake( 80, 14, 230, 20);
		text_.frame 		 = CGRectMake( 80, 28, 230, 20);
	} else {
		toggleControl_.frame     = CGRectMake(-25, 12,	25, 25);
		userIcon_.frame 	 = CGRectMake(	5,  7,	35, 35);
		name_.frame 		 = CGRectMake( 50,  0, 245, 20);
		screenName_.frame	 = CGRectMake( 50, 14, 245, 20);
		text_.frame 		 = CGRectMake( 50, 28, 245, 20);
	}
}

３）編集ボタンの表示
編集モードと非編集モードの切り替えは、editButtonItemが用意されています。それをrightBarButtonItemに配置すれば、editingプロパティとボタンの表示「編集」「完了」も自動で切り替えを行ってくれます。
使い方は、UITableViewのviewDidLoadで、navigationItem.rightBarButtonItemにeditButtonItemを追加するだけです。
また、編集モードに切り替わった際に、チェックボックスを選択させるためにセルの選択を可能としておきます。
allowsSelectionDuringEditing = YES
に設定します。

- (void)viewDidLoad {
	[super viewDidLoad];

	// table設定(編集モードでの選択、編集ボタン表示)
	self.tableView.allowsSelectionDuringEditing = YES;
	self.navigationItem.rightBarButtonItem = [self editButtonItem];
}

４）セルの右端に">"を表示
UITableViewのtableView: cellForRowAtIndexPath:で、セルを作成したあとにaccessoryTypeを設定します。
accessoryType = UITableViewCellAccessoryDisclosureIndicator

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

	cell = [tableView dequeueReusableCellWithIdentifier:@"custum"];
	if (cell == nil) {
		cell = [[[UITableViewCustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"custum"] autorelease];
		cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
	}

	// 再利用したcellに値をセットする。
	…省略
	return cell;
}

ここまででするっと編集モードでチェックボックスが表示されるようになります。だいぶ、メールアプリに近づいて来ました。あとはチェックボックスの作りこみで、おおまかな動きが完成です。