blog.seiji.me | seiji.me

UIViewControllerとXibファイルの作成

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

今回はUIViewControllerのSubClassを作成する。またそれに対応するxibファイルを新規に作成し、その中にUIButtonやUILabelを配置し、MainWindowのSubUIViewとする。

iPhone Application Programming

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

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

UIViewControllerのSubClass作成

• XCodeでUIViewControllerのサブクラスを作成します。名前はMyUIViewControllerとします。
  
  
• 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
  

xibファイルの作成

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

ViewControllerとxibファイルの接続

MainWindow.xib

• 今迄はこの中にUILabelやUIButtonなどを配置しました。XcodeからMainWindow.xibをクリックします。Controllerのインスタンスを削除します。
• Interface BuilderでLibraryからViewControllerをDrag&DropしてDocumentWindowへ、Identity InspectorでClass名をMyUIViewControllerにします。
  
• 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に接続します。
  
• 試しにUISliderでも配置してSimulatorを起動してみましょう。MainWindow.xibのWindow内にもコンポーネントが配置されているのにも関わらず、MyView.xibの内容が表示されるのがわかります。

ViewControllerの実装

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で実装しているところです。

UIの変更とOutlet,Actionとの接続

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

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