/var/log/seiji

28 Nov 2008

UIViewControllerとXibファイルの作成-CS193P

UIViewControllerとXibファイルの作成

引き続きCS193PのLecture5のAssignment3に取り組むことにする。ここまではControllerを作成し、MainWindow.xib中にUIButtonやUILabelを配置した。

今回はUIViewControllerのSubClassを作成する。またそれに対応するxibファイルを新規に作成し、その中にUIButtonやUILabelを配置し、MainWindowのSubUIViewとする。
CS193P - Cocoa Programming | Announcements.jpg
iPhone Application Programming

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

前回の"HelloPoly"プロジェクトを拡張します。

xcode.png UIViewControllerのSubClass作成

  • XCodeでUIViewControllerのサブクラスを作成します。名前はMyUIViewControllerとします。
    1-1.jpg
    1-2-1.jpg
  • HelloPolyAppDelegate.h, HelloPolyAppDelegate.mを以下のように修正します。
    HelloPolyAppDelegate.h
    #import <UIKit/UIKit.h>
    @class MyUIViewController;
    @interface HelloPolyAppDelegate : NSObject <UIApplicationDelegate> {
        UIWindow *window;
        MyUIViewController *myUIViewController;
    }
    @property (nonatomic, retain) IBOutlet UIWindow *window;
    @property (nonatomic, retain) IBOutlet MyUIViewController *myUIViewController;
    @end
    
    HelloPolyAppDelegate.m
    #import "HelloPolyAppDelegate.h"
    #import "MyUIViewController.h"
    
    @implementation HelloPolyAppDelegate
    @synthesize window;
    @synthesize myUIViewController;
    - (void)applicationDidFinishLaunching:(UIApplication *)application {
        [window addSubview:[myUIViewController view]];
        [window makeKeyAndVisible];
    }
    - (void)dealloc {
        [myUIViewController release];
        [window release];
        [super dealloc];
    }
    @end
    

xcode.png xibファイルの作成

  • ファイル-新規ファイル-iPhone OS(User Interfaces)-View XIBから作成します。 名前はMyView.xibとします。
    1-3.jpg
    1-4.jpg

picture.png ViewControllerとxibファイルの接続

MainWindow.xib

  • 今迄はこの中にUILabelやUIButtonなどを配置しました。XcodeからMainWindow.xibをクリックします。Controllerのインスタンスを削除します。
  • Interface BuilderでLibraryからViewControllerをDrag&DropしてDocumentWindowへ、Identity InspectorでClass名をMyUIViewControllerにします。
    1.jpg
  • HelloAppDelegateのプロパティmyUIViewControllerを先ほど作成したMyUIViewControllerに接続します。
  • MyUIViewControllerのAttributes InspectorのNib Nameに先ほど作成したMyView.xibと入力します。MainWindow.xibを閉じます。

MyView.xib

  • File's Ownerを選択し、Identity InspectorでClass名をMyUIViewControllerにします。
  • Connection InspectorでプロパティのviewをViewに接続します。
    1-5-1.jpg
  • 試しにUISliderでも配置してSimulatorを起動してみましょう。MainWindow.xibのWindow内にもコンポーネントが配置されているのにも関わらず、MyView.xibの内容が表示されるのがわかります。

xcode.pngViewControllerの実装

MyUIViewControllerの実装を行います。Controllerの役割をこのMyUIViewControllerが行うようにしますので、Outlet, Actionを同様に実装します。また、今回はUISliderで値を設定できるようにもします。

MyUIViewController.h

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

@interface MyUIViewController : UIViewController {
    IBOutlet UIButton *decreaseButton;
    IBOutlet UIButton *increaseButton;
    IBOutlet UILabel *nameOfPolygon;
    IBOutlet UILabel *numberOfSidesLabel;
    IBOutlet UISlider *numberSlider;
    IBOutlet PolygonShape *polygon;
}
- (IBAction)decrease;
- (IBAction)increase;
- (IBAction)adjustNumberOfSides:(id)sender;

@end

MyUIViewController.m


- (void)updateInterface {
    if ( [polygon numberOfSides] == [polygon minimumNumberOfSides]) {
        decreaseButton.enabled = NO;
        NSLog(@"enabled NO");
    } else {
        decreaseButton.enabled = YES;
        NSLog(@"enabled YES");
    }
    if ( [polygon numberOfSides] == [polygon maximumNumberOfSides]) {
        increaseButton.enabled = NO;
    } else {
        increaseButton.enabled = YES;
    }
    nameOfPolygon.text = [NSString stringWithFormat:@"aka a %@", [polygon name]];
    numberOfSidesLabel.text = [NSString stringWithFormat:@"%d", [polygon numberOfSides]];
    numberSlider.value = [polygon numberOfSides];
}

- (IBAction)decrease { // Controller.mと同じ }
- (IBAction)increase { // Controller.mと同じ }

- (IBAction)adjustNumberOfSides:(id)sender
{
    UISlider *slider = (UISlider *)sender;
    float value = slider.value;
    [polygon setNumberOfSides:value];
    [self updateInterface];
}
- (void)viewDidLoad {
    [polygon setMinimumNumberOfSides:3];
    [polygon setMaximumNumberOfSides:12];
    [polygon setNumberOfSides:numberOfSidesLabel.text.integerValue];
    [self updateInterface];
    NSLog (@"My polygon from viewDidLoad: %@", polygon);
    [super viewDidLoad];
}

注意点は前回NSObject::awakeFromNibで実装した箇所を今回はUIViewController::viewDidLoadで実装しているところです。

picture.png UIの変更とOutlet,Actionとの接続

下の図のように変更します。それに伴いoutlet, actionとの接続を行います
2-1.jpg

長くなったのでとりあえずここまでにします。図形の描画部分は次にしたいと思います。今回作成したソースはhttp://public.me.com/seijit/iPhone/CS193P/Lecture3のHelloPoly2.tar.gzを。間違っているところもあるかと思いますが、そこはご了承下さい。

Comments

comments powered by Disqus