iPhoneアプリ開発勉強会@福井高専

[福井]iPhoneアプリ開発勉強会 http://atnd.org/events/7182
懐かしの母校でのiPhoneアプリ開発勉強会に講師として参加したので、発表内容を簡単にまとめます。発表内容は下記のとおり。
・テーブルビュー基礎
・テーブルビューセルにUISwitch
・テーブルビューセルでバッヂ表示

■テーブルビュー基礎
こちらのページ(『混沌のiPhoneアプリケーション工房』さん)で丁寧に説明されてますので、そちらを見てください。次のページに進むとセルの追加や削除、移動も説明されていてオススメのサイトです。

■テーブルビューセルにUISwitch
TableViewControllerでセルにUISwitchを埋め込む。セルは2つ。UISwitchの変更を検出する。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 2;
}

- (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] autorelease];
        UISwitch *uiSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(0, 0, 90, 24.0)];
        cell.accessoryView = uiSwitch;
        [uiSwitch release];
    }
    
    // Configure the cell.
    if (indexPath.row == 0) {
        cell.textLabel.text = @"switch0";
        [(UISwitch *)cell.accessoryView addTarget:self action:@selector(switch0Changed:)
                                 forControlEvents:(UIControlEventValueChanged | UIControlEventTouchDragInside)];
    } else {
        cell.textLabel.text = @"switch1";
        [(UISwitch *)cell.accessoryView addTarget:self action:@selector(switch1Changed:)
                                 forControlEvents:(UIControlEventValueChanged | UIControlEventTouchDragInside)];
    }
    
    return cell;
}

- (void)switch0Changed:(id)sender {
    if ([(UISwitch *)sender isOn]) {
        NSLog(@"switch0 is ON");
    } else {
        NSLog(@"switch0 is OFF");
    }
}

- (void)switch1Changed:(id)sender {
    if ([(UISwitch *)sender isOn]) {
        NSLog(@"switch1 is ON");
    } else {
        NSLog(@"switch1 is OFF");
    }
}

■テーブルビューセルでバッヂ表示
TableViewControllerでセルにrowの値をバッヂを表示。セルは2つ。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 2;
}

- (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] autorelease];
        Badge *badge = [[Badge alloc] initWithFrame:CGRectMake(0, 0, 40, 25)];
        cell.accessoryView = badge;
        [badge release];
    }
    
    // Configure the cell.
    if (indexPath.row == 0) {
        cell.textLabel.text = @"badge0";
        ((Badge *)cell.accessoryView).num = indexPath.row;
    } else {
        cell.textLabel.text = @"badge1";
        ((Badge *)cell.accessoryView).num = indexPath.row;
    }

    return cell;
}

バッヂの宣言

#import <UIKit/UIKit.h>

@interface Badge : UIView {
    int num;
}

@property (nonatomic) int num;

@end

バッヂの実装

#import "Badge.h"

@implementation Badge

@synthesize num;

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.opaque = NO;
        self.userInteractionEnabled = NO;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
	
    UIFont *font = [UIFont boldSystemFontOfSize:14];
    NSString *countString = [NSString stringWithFormat:@"%d", num];
    CGSize numberSize = [countString sizeWithFont:font];
    CGRect bounds = CGRectMake(0, 0, numberSize.width + 16 , 18);
    float radius = bounds.size.height / 2.0;
	
    UIColor *badgeColor = [UIColor colorWithRed:0.530 green:0.600 blue:0.738 alpha:1.000];
    CGContextSetFillColorWithColor(context, [badgeColor CGColor]);
    CGContextBeginPath(context);
    CGContextAddArc(context, (rect.size.width - bounds.size.width) + radius, radius, radius, M_PI / 2 , 3 * M_PI / 2, NO);
    CGContextAddArc(context, rect.size.width - radius, radius, radius, 3 * M_PI / 2, M_PI / 2, NO);
    CGContextClosePath(context);
    CGContextFillPath(context);
	
    [[UIColor whiteColor] set];
    bounds.origin.x = (rect.size.width - bounds.size.width) + (bounds.size.width - numberSize.width) / 2;
    [countString drawInRect:bounds withFont:font];
}

@end

別マシンからDropbox経由で同期取ったテキストファイルが開けなくてちょっとグダグダになった部分もあってすいませんでした。コーディングしながらの説明でこの内容を30分というのは、ちょっと無謀だったかも？とちょっと反省してますw。でも、こんなことが簡単にできるよというのは伝わったと思うので、あとは実際にやってみていただければと。