/var/log/seiji

06 Dec 2008

UINavigationController, TableViewControllerの作成-CS193P

UINavigationControllerの作成

Lecture7を基に、新しい課題"Presence"アプリケーションを作成していきます。実際の内容と脱線するところもありますが、ご了承下さい。
CS193P - Cocoa Programming | Announcements.jpg
iPhone Application Programming

今迄、作成したソースはhttp://public.me.com/seijit/iPhone/CS193Pから

今回の目標

下の図のようなアプリケーションの内、PersonListをTableViewで表示できるようになるのが目標です。(左側の図)
target-1.png

xcode.png新規プロジェクト、ViewControlerの作成

新規プロジェクト作成

Navigation-Based Applicationを選択すれば簡単なのですが、今回はあえてWindow-Based Application を選択して作成していきます。プロジェクト名は"Presence"とします。

200812052345.jpg

TableViewController, xibファイルの作成

ViewControllerとして今回はTableViewControllerを作成します。また、それに対応するxibファイルを作成します。TableViewControllerのサブクラスのファイル名を"PersonListViewController",xibファイル名を"PersonList.xib"とします。

2-1.jpg

新規ファイル.jpg

PresenceAppDelegateの修正

以前、ViewControllerを追加した同様のやり方で、UINavigationControllerをDelegateクラスに追加します。

PresenceAppDelegate.h
#import 
@interface PresenceAppDelegate : NSObject  {
    UIWindow *window;
    UINavigationController *navController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navController;
@end
PresenceAppDelegate.m
#import "PresenceAppDelegate.h"
@implementation PresenceAppDelegate
@synthesize window;
@synthesize navController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
    // Override point for customization after application launch
    [window addSubview:[navController view]];
    [window makeKeyAndVisible];
}

- (void)dealloc {
    [window release];
    [navController release];
    [super dealloc];
}
@end

picture.pngUINavigationControllerの配置・接続

MainWindow.xib

MainWindow.xibをWクリックしInterfaceBuilderを起動します。ここで、UINavigationControllerを配置します。

LibraryからNavigation ControllerオブジェクトをDrag&DropでDocumentWindow上に作成します。そのオブジェクトに対して、PresenceAppDelegateクラスのOutlet,navControllerを接続します。

ピクチャ 1.jpg

Navigation Controllerオブジェクトの下にはView Controllerオブジェクトがあります。このクラス名を"PersonListViewController", NIB Nameを"PersonList"とします。

ピクチャ 2.jpg

最後にNavigation ControllerオブジェクトをWクリックしView画面を出します。タイトルを"PersonList"とします。

ピクチャ 3.jpg

これでMainWindow.xibを閉じ、今度はPersonList.xibを開きます。

PersonList.xib

初めにLibraryからTableViewを選択しview上にDrag&Dropで配置し、各Cellの高さをSize Inspectorでheightを60.00にします。次にFile's OwnerのClass名を"PersonListViewController"とし、最後にPersonListViewControllerのviewをTableViewに接続して終了です。

ピクチャ 4.jpg

これで、Navigation-Based Applicationを選択した場合に近いものができました。

xcode.pngTableViewControllerの実装

先ほど、作成したTableViewControllerのSubClassのPersonListViewControllerの実装を行います。

読み込むデータ

今回、読み込むデータは静的なものにします。Project内(Bundle内)に画像(i.g. Bors.jpg)をDrag&Dropで配置します。今回使用した画像はSouth Park Studiosで作成したものを使わせていただいています。

PersonListViewController.m — Presence-1.png

ファイルパスを取得し、ファイル名を名前とするわけです。

UIImageの拡張

UIImageはImageを扱うクラスです。今回、用意している画像は120px × 120pxで、このまま表示するとCellからはみだします。画像を縮小して表示したいのですが、UIImageには簡単に行えるのがない為、UIImageのカテゴリを実装し、リサイズの機能を付加します。

UIImageResize.h
#import <Foundation/Foundation.h>
@interface UIImage (Resize)
- (UIImage*)resize:(CGRect)rect;
@end
UIImageResize.m
#import "UIImageResize.h"

@implementation UIImage (Resize)
- (UIImage*)resize:(CGRect)rect {
    UIGraphicsBeginImageContext(rect.size);
    [self drawInRect:rect];
    UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return imageCopy;
}
@end

これでResizeのメソッドを持つUIImazeを扱えるようになりました。

PersonListViewController.h

#import <UIKit/UIKit.h>

@interface PersonListViewController : UITableViewController {
    NSMutableArray *myData;
}

@property (nonatomic, retain) NSArray *myData;
@end

PersonListViewController.m

#import "PersonListViewController.h"
#import "UIImageResize.h"

@implementation PersonListViewController
@synthesize myData;

// 間省略

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

Bundleからファイルを読込みNSMutableArrayに格納します。

- (void)viewDidLoad {
    [super viewDidLoad];
    // load data
    self.myData = [NSMutableArray array];
    NSBundle *bundle = [NSBundle mainBundle];
    NSArray *imgPaths = [bundle pathsForResourcesOfType:@"jpg" inDirectory:@""];
    NSString *path;
    for (path in imgPaths) {
        NSString *name =[[path lastPathComponent] substringToIndex:[[path lastPathComponent] length]- [@".jpg" length]];
        NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:name, @"name", path, @"path", nil];
        [myData addObject:dic];
    }
}

TableViewを表示する為のメソッドを実装します。

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [myData count];
}


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }

    // Set up the cell...
    int personIndex = [indexPath indexAtPosition: [indexPath length] - 1];
    UIImage *image= [UIImage imageWithContentsOfFile:[[myData objectAtIndex:personIndex] objectForKey:@"path"]];

    [cell setImage:[image resize:CGRectMake(0, 0, 60, 60)]];
    [cell setText:[[myData objectAtIndex:personIndex] objectForKey:@"name"]];
    return cell;
}

これで下のように動くはずです。

iPhone シミュレータ.png

今回作成したソースはhttp://public.me.com/seijit/iPhone/CS193P/Lecture7のPresence.tar.gzです。

Comments

comments powered by Disqus