beginning iphone 4_devlopement_chpter7_tab_b
TRANSCRIPT
순서
1. 피커 (Picker), 탭바 (Tab bar) 란 ?
2. 앞으로 만들어볼 녀석들
3. 메인 탭바의 구성을 만들자 .
4. 탭별 콤포넌트를 만들자 .
1. 피커 (Picker), 탭바 (Tab bars) 란 ?
(1) 피커
회전하는 다이얼이 들어있는 컨트롤 .
(2) 탭바
하단에 버튼 영역 고정시켜 놓고 버튼을 선택함으로써 컨텐츠 영역을 바꾸는 컨트롤
2. 앞으로 만들어 볼 것들
DatePicker
SinglePicker
DoubePicker
3. 메인 탭바의 구성을 만들자 .
DependentPicker
CustomPicker
- 개발 시나리오
(1) 다섯개의 탭이 들어가도록 기본 탭바를 만든다 .(2) 탭바에 아이콘 추가(3) 데이트피커 , 단일 컴포넌트 피커 , 멀티 컴포넌트 피커 , 의존컴포넌트를 활용한 피커 , 이미지를 활용한 커스컴피커를 각 탭마다 추가한다 .
1. 프로젝트 명 Picker 로 생성2. Group & files panel 최상단 폴더 선택후 command + n 클릭3.
파일생성 및 각파일 생성 및 추가
그대로 next 하고 다음창도 next 저장할 이름은 "DatePickerViewController" 로 저장 .
그러면 확장자가 h,m,xib 파일 자동생성
이런식으로
SingleComponentPickerViewControllerDoubleComponentPickerViewControllerDependentComponentPickerViewControllerCustomPickerViewController
추가생성
supporting files 폴더 선택후 command+option+a 후image,icon,music 파일 , 사전파일 import
PickersAppDelegate.h
#import <UIKit/UIKit.h>@interface PickersAppDelegate : NSObject <UIApplicationDelegate> { UIWindow *window; UITabBarController *rootController;}
@property (nonatomic, retain) IBOutlet UIWindow *window;@property (nonatomic, retain) IBOutlet UITabBarController *rootController;@end
PickersAppDelegate.m
#import "PickersAppDelegate.h"@implementation PickersAppDelegate @synthesize window; @synthesize rootController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {}
// Override point for customization after app launch[self.window addSubview:rootController.view];[self.window makeKeyAndVisible];return YES;
- (void)dealloc {}@end[rootController release];[window release];[super dealloc];
MainWindow.xib 수정
나머지도 이미지를 추가해서 아이콘 변경
4. 탭별 콤포넌트를 만들자 .
(1) 프로그래밍 순서
1. 콤포넌트 .h 파일에 컴포넌트 IBOutlet 과 Properties(getter,setter), IBAction 를 만든다 .
2. (1) Interface Builder 를 통해서 View 에 하위 콤포넌트 (Picker,Button) 들을 등록 (2) Picker 를 Files Owner 의 IBOutlet 와 연결한다 . (3) Button 에 action 을 등록하고 그것을 Files Owner 의 IBAction 과 연결한다 .
3. 콤포넌트 .m 파일에 컨트롤러 로직을 작성한다 .
간략하게 콤포넌트 .h -> Interface Builder - > 콤포넌트 .m
DatePickerView 를 만들어 봅시다 .
- DatePickerViewController.h
#import <UIKit/UIKit.h> @interface DatePickerViewController : UIViewController { UIDatePicker *datePicker;}@property (nonatomic, retain) IBOutlet UIDatePicker *datePicker; - (IBAction)buttonPressed; @end
DataPickerViewController.xib 를 선택해서 interfaceBuilder 를 연다 .
ctrl + files'owner 선택 드래그 해서 datePicker 컴포넌트에 드랍
버튼 더블클릭해서 이름 press로 명명
버튼을 누르면IBAction 함수가 호출되도록
- DatePickerViewController.m
#import "DatePickerViewController.h"@implementation DatePickerViewController@synthesize datePicker;- (IBAction)buttonPressed { NSDate *selected = [datePicker date]; NSString *message = [[NSString alloc] initWithFormat: @"The date and time you selected is: %@", selected]; UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Date and Time Selected" message:message delegate:nil cancelButtonTitle:@"Yes, I did." otherButtonTitles:nil]; [alert show]; [alert release]; [message release];}
- (void)viewDidLoad { NSDate *now = [[NSDate alloc] init]; [datePicker setDate:now animated:NO]; [now release];}- (void)viewDidUnload { [super viewDidUnload]; self.datePicker = nil;}- (void)dealloc { [datePicker release]; [super dealloc];}
버튼 클릭
SinglePickerView 를 만들어 봅시다 .
- SingleComponentPickerViewController.h
#import <UIKit/UIKit.h>@interface SingleComponentPickerViewController : UIViewController<UIPickerViewDelegate, UIPickerViewDataSource> { UIPickerView *singlePicker; NSArray *pickerData; }@property (nonatomic, retain) IBOutlet UIPickerView *singlePicker; @property (nonatomic, retain) NSArray *pickerData; - (IBAction)buttonPressed; @end
SinglePickerViewController.xib 를 선택해서 interfaceBuilder 를 연다 .
ctrl + files'owner 선택 드래그 해서 singlePicker 컴포넌트에 드랍
버튼 더블클릭해서 이름 press로 명명
버튼을 누르면IBAction 함수가 호출되도록
- SingleComponentPickerViewController.m
#import "SingleComponentPickerViewController.h"@implementation SingleComponentPickerViewController@synthesize singlePicker; @synthesize pickerData;- (IBAction)buttonPressed { NSInteger row = [singlePicker selectedRowInComponent:0]; NSString *selected = [pickerData objectAtIndex:row]; NSString *title = [[NSString alloc] initWithFormat:@"You selected %@!", selected]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:@"Thank you for choosing." delegate:nil cancelButtonTitle:@"You're Welcome" otherButtonTitles:nil];
[alert show]; [alert release]; [title release];}
- (void)viewDidLoad { NSArray *array = [[NSArray alloc] initWithObjects:@"Luke", @"Leia", @"Han", @"Chewbacca", @"Artoo", @"Threepio", @"Lando", nil]; self.pickerData = array; [array release];}
- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.singlePicker = nil; self.pickerData = nil;}
- (void)dealloc { [singlePicker release]; [pickerData release]; [super dealloc];}
#pragma mark -#pragma mark Picker Data Source Methods- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 1;}- (NSInteger)pickerView:(UIPickerView *)pickerViewnumberOfRowsInComponent:(NSInteger)component { return [pickerData count];}#pragma mark Picker Delegate Methods- (NSString *)pickerView:(UIPickerView *)pickerViewtitleForRow:(NSInteger)rowforComponent:(NSInteger)component { return [pickerData objectAtIndex:row];}
버튼클릭
DoublePickerView 를 만들어 봅시다 .
- DoubleComponentPickerViewController.h
#import <UIKit/UIKit.h>#define kFillingComponent 0#define kBreadComponent 1@interface DoubleComponentPickerViewController : UIViewController<UIPickerViewDelegate, UIPickerViewDataSource>{ UIPickerView *doublePicker; NSArray *fillingTypes; NSArray *breadTypes;}@property(nonatomic, retain) IBOutlet UIPickerView *doublePicker; @property(nonatomic, retain) NSArray *fillingTypes;@property(nonatomic, retain) NSArray *breadTypes;-(IBAction)buttonPressed;@end
- DoubleComponentPickerViewController.m
#import "DoubleComponentPickerViewController.h"@implementation DoubleComponentPickerViewController@synthesize doublePicker; @synthesize fillingTypes; @synthesize breadTypes;-(IBAction)buttonPressed{ NSInteger fillingRow = [doublePicker selectedRowInComponent:kFillingComponent]; NSInteger breadRow = [doublePicker selectedRowInComponent: kBreadComponent]; NSString *bread = [breadTypes objectAtIndex:breadRow]; NSString *filling = [fillingTypes objectAtIndex:fillingRow]; NSString *message = [[NSString alloc] initWithFormat:@"Your %@ on %@ bread will be right up.", filling, bread]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle: @"Thank you for your order" message:message delegate:nil cancelButtonTitle:@"Great!" otherButtonTitles:nil]; [alert show]; [alert release]; [message release];}
- (void)viewDidLoad { NSArray *fillingArray = [[NSArray alloc] initWithObjects:@"Ham",@"Turkey", @"Peanut Butter", @"Tuna Salad",@"Nutella", @"Roast Beef", @"Vegemite", nil]; self.fillingTypes = fillingArray; [fillingArray release]; NSArray *breadArray = [[NSArray alloc] initWithObjects:@"White", @"Whole Wheat", @"Rye", @"Sourdough", @"Seven Grain",nil]; self.breadTypes = breadArray; [breadArray release];}- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.doublePicker = nil; self.breadTypes = nil; self.fillingTypes = nil; }
- (void)dealloc { [doublePicker release]; [breadTypes release]; [fillingTypes release]; [super dealloc];}
#pragma mark -#pragma mark Picker Data Source Methods- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 2;}- (NSInteger)pickerView:(UIPickerView *)pickerViewnumberOfRowsInComponent:(NSInteger)component { if (component == kBreadComponent) return [self.breadTypes count]; return [self.fillingTypes count];}#pragma mark Picker Delegate Methods- (NSString *)pickerView:(UIPickerView *)pickerViewtitleForRow:(NSInteger)rowforComponent:(NSInteger)component { if (component == kBreadComponent) return [self.breadTypes objectAtIndex:row]; return [self.fillingTypes objectAtIndex:row];}
버튼클릭
DependentPickerView 를 만들어 봅시다 .
plist 파일의 구조 (1)
plist 파일의 구조 (2)
- DependentComponentPickerViewController.h
#import <UIKit/UIKit.h>#define kStateComponent 0#define kZipComponent 1@interface DependentComponentPickerViewController : UIViewController<UIPickerViewDelegate, UIPickerViewDataSource> { UIPickerView *picker; NSDictionary *stateZips; NSArray *states; NSArray *zips;}@property (retain, nonatomic) IBOutlet UIPickerView *picker;@property (retain, nonatomic) NSDictionary *stateZips;@property (retain, nonatomic) NSArray *states;@property (retain, nonatomic) NSArray *zips;- (IBAction) buttonPressed;@end
- DependentComponentPickerViewController.m
#import "DependentComponentPickerViewController.h"@implementation DependentComponentPickerViewController@synthesize picker;@synthesize stateZips;@synthesize states;@synthesize zips;- (IBAction) buttonPressed { NSInteger stateRow = [picker selectedRowInComponent:kStateComponent]; NSInteger zipRow = [picker selectedRowInComponent:kZipComponent]; NSString *state = [self.states objectAtIndex:stateRow]; NSString *zip = [self.zips objectAtIndex:zipRow]; NSString *title = [[NSString alloc] initWithFormat: @"You selected zip code %@.", zip]; NSString *message = [[NSString alloc] initWithFormat: @"%@ is in %@", zip, state]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:message delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show]; [alert release]; [title release]; [message release];}
- (void)viewDidLoad { NSBundle *bundle = [NSBundle mainBundle]; NSString *plistPath = [bundle pathForResource: @"statedictionary" ofType:@"plist"]; NSDictionary *dictionary = [[NSDictionary alloc] initWithContentsOfFile:plistPath]; self.stateZips = dictionary; [dictionary release]; NSArray *components = [self.stateZips allKeys]; NSArray *sorted = [components sortedArrayUsingSelector: @selector(compare:)]; self.states = sorted; NSString *selectedState = [self.states objectAtIndex:0]; NSArray *array = [stateZips objectForKey:selectedState]; self.zips = array;}- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.picker = nil; self.stateZips = nil; self.states = nil; self.zips = nil;}
- (void)dealloc { [picker release]; [stateZips release]; [states release]; [zips release]; [super dealloc];}
#pragma mark -#pragma mark Picker Data Source Methods- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 2;}- (NSInteger)pickerView:(UIPickerView *)pickerViewnumberOfRowsInComponent:(NSInteger)component { if (component == kStateComponent) return [self.states count]; return [self.zips count];}#pragma mark Picker Delegate Methods- (NSString *)pickerView:(UIPickerView *)pickerViewtitleForRow:(NSInteger)rowforComponent:(NSInteger)component { if (component == kStateComponent) return [self.states objectAtIndex:row]; return [self.zips objectAtIndex:row];}- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component { if (component == kZipComponent) return 90; return 200;}
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { if (component == kStateComponent) { NSString *selectedState = [self.states objectAtIndex:row]; NSArray *array = [stateZips objectForKey:selectedState]; self.zips = array; [picker selectRow:0 inComponent:kZipComponent animated:YES]; [picker reloadComponent:kZipComponent]; }}
버튼클릭
CustomPickerView 를 만들어 봅시다 .
- CustomPickerViewController.h
#import <UIKit/UIKit.h>#import <AudioToolbox/AudioToolbox.h>@interface CustomPickerViewController : UIViewController<UIPickerViewDataSource, UIPickerViewDelegate> { UIPickerView *picker; UILabel *winLabel; NSArray *column1; NSArray *column2; NSArray *column3; NSArray *column4; NSArray *column5;UIButton *button;SystemSoundID crunchSoundID;SystemSoundID winSoundID;}@property(nonatomic, retain) IBOutlet UIPickerView *picker;@property(nonatomic, retain) IBOutlet UILabel *winLabel;@property(nonatomic, retain) NSArray *column1;@property(nonatomic, retain) NSArray *column2;@property(nonatomic, retain) NSArray *column3;@property(nonatomic, retain) NSArray *column4;@property(nonatomic, retain) NSArray *column5;@property(nonatomic, retain) IBOutlet UIButton *button;@property(nonatomic) SystemSoundID crunchSoundID;@property(nonatomic) SystemSoundID winSoundID;- (IBAction)spin;@end
#import "CustomPickerViewController.h"@implementation CustomPickerViewController@synthesize picker;@synthesize winLabel;@synthesize column1;@synthesize column2;@synthesize column3;@synthesize column4;@synthesize column5;@synthesize button;@synthesize crunchSoundID;@synthesize winSoundID;-(void)showButton { button.hidden = NO;}-(void)playWinSound { AudioServicesPlaySystemSound (winSoundID); winLabel.text = @"WIN!"; [self performSelector:@selector(showButton) withObject:nil afterDelay:1.5];}
- (IBAction)spin { BOOL win = NO; int numInRow = 1; int lastVal = -1; for (int i = 0; i < 5; i++) { int newValue = random() % [self.column1 count]; if (newValue == lastVal) numInRow++; else numInRow = 1; lastVal = newValue; [picker selectRow:newValue inComponent:i animated:YES]; [picker reloadComponent:i]; if (numInRow >= 3) win = YES; } button.hidden = YES; AudioServicesPlaySystemSound (crunchSoundID); if (win) [self performSelector:@selector(playWinSound) withObject:nil afterDelay:.5]; else [self performSelector:@selector(showButton) withObject:nil afterDelay:.5]; winLabel.text = @""; }
- (void)viewDidLoad { UIImage *seven = [UIImage imageNamed:@"seven.png"]; UIImage *bar = [UIImage imageNamed:@"bar.png"]; UIImage *crown = [UIImage imageNamed:@"crown.png"]; UIImage *cherry = [UIImage imageNamed:@"cherry.png"]; UIImage *lemon = [UIImage imageNamed:@"lemon.png"]; UIImage *apple = [UIImage imageNamed:@"apple.png"];
for (int i = 1; i <= 5; i++) { UIImageView *sevenView = [[UIImageView alloc] initWithImage:seven]; UIImageView *barView = [[UIImageView alloc] initWithImage:bar]; UIImageView *crownView = [[UIImageView alloc] initWithImage:crown]; UIImageView *cherryView = [[UIImageView alloc] initWithImage:cherry]; UIImageView *lemonView = [[UIImageView alloc] initWithImage:lemon]; UIImageView *appleView = [[UIImageView alloc] initWithImage:apple]; NSArray *imageViewArray = [[NSArray alloc] initWithObjects: sevenView, barView, crownView, cherryView, lemonView, appleView, nil];NSString *fieldName =[[NSString alloc] initWithFormat:@"column%d", i];[self setValue:imageViewArray forKey:fieldName];
[fieldName release]; [imageViewArray release]; [sevenView release]; [barView release]; [crownView release]; [cherryView release]; [lemonView release]; [appleView release];}
NSString *path = [[NSBundle mainBundle] pathForResource:@"win" ofType:@"wav"];AudioServicesCreateSystemSoundID((CFURLRef)[NSURL fileURLWithPath:path], &winSoundID);
path = [[NSBundle mainBundle] pathForResource:@"crunch" ofType:@"wav"];AudioServicesCreateSystemSoundID((CFURLRef)[NSURL fileURLWithPath:path], &crunchSoundID);
srandom(time(NULL));
}
- (void)viewDidUnload { [super viewDidUnload]; self.picker = nil; self.winLabel = nil; self.column1 = nil; self.column2 = nil; self.column3 = nil; self.column4 = nil; self.column5 = nil; self.button = nil;
if (winSoundID) AudioServicesDisposeSystemSoundID(winSoundID), winSoundID = 0;if (crunchSoundID) AudioServicesDisposeSystemSoundID(crunchSoundID), crunchSoundID = 0;}
- (void)dealloc { [picker release]; [winLabel release]; [column1 release]; [column2 release]; [column3 release]; [column4 release]; [column5 release]; [button release];if (winSoundID) AudioServicesDisposeSystemSoundID(winSoundID), winSoundID = 0;if (crunchSoundID) AudioServicesDisposeSystemSoundID(crunchSoundID), crunchSoundID = 0; [super dealloc];}
#pragma mark -#pragma mark Picker Data Source Methods- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 5;}- (NSInteger)pickerView:(UIPickerView *)pickerViewnumberOfRowsInComponent:(NSInteger)component { return [self.column1 count];}#pragma mark Picker Delegate Methods- (UIView *)pickerView:(UIPickerView *)pickerViewviewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view { NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d", component+1]; NSArray *array = [self valueForKey:arrayName]; [arrayName release]; return [array objectAtIndex:row];}@end
버튼클릭
Q & A
