안녕하세요 박동윤입니다.
지난 Hello sadi! 프로젝트에 가속도 센서의 데이터를 받아 이미지를 움직이는 부분을 추가해보도록 하겠습니다.
단, 지난 프로젝트에서 Window-Based Application 으로 시작한 것과는 달리 View-Based Application 으로 제작하도록 하겠습니다. (ViewController를 사용)
특별히 다른 것은 없고 Window-Based Application 으로 생성한 프로젝트에서는 AppDelegate 만 존재하여, 우리가 UIView 를 상속한 MyView 라는 클래스를 직접 파일 생성하여 추가해주었습니다만, View-Based Application 에서는 AppDelegate 과 함께 ViewController 라는 것이 생성됩니다. 이 ViewController 는 이미 View 를 담고 있기에 이를 바로 사용하면 됩니다.
View-Based Application 으로 프로젝트 생성
저는 HelloSADIAccel 이라는 이름으로 프로젝트를 생성하였습니다
다음과 같이 AppDelegate 와 ViewController 가 기본적으로 생성됩니다
HelloSADIAccelAppDelegate.h 를 보면 다음과 같이 HelloSADIAccelViewController 를 담고 있습니다.
#import <UIKit/UIKit.h>
@class HelloSADIAccelViewController;
@interface HelloSADIAccelAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
HelloSADIAccelViewController *viewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet HelloSADIAccelViewController *viewController;
@end
@class HelloSADIAccelViewController;
@interface HelloSADIAccelAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
HelloSADIAccelViewController *viewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet HelloSADIAccelViewController *viewController;
@end
HelloSADIAccelAppDelegate.m 을 보면 HelloSADIAccelViewController 의 view 를 addSubview 로 window에 추가하는 것을 볼 수 있습니다. 즉, 우리는 이미 존재하는 HelloSADIAccelViewController 의 view 를 사용하면 됩니다.
#import "HelloSADIAccelAppDelegate.h"
#import "HelloSADIAccelViewController.h"
@implementation HelloSADIAccelAppDelegate
@synthesize window;
@synthesize viewController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after app launch
[window addSubview:viewController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[viewController release];
[window release];
[super dealloc];
}
@end
#import "HelloSADIAccelViewController.h"
@implementation HelloSADIAccelAppDelegate
@synthesize window;
@synthesize viewController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after app launch
[window addSubview:viewController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[viewController release];
[window release];
[super dealloc];
}
@end
HelloSADIAccelViewController.xib 을 더블클릭하여 인터페이스빌더를 실행하고, 지난번 프로젝트와 동일하게 UI 제작을 합니다. 지난번 처럼, 일단 SADI_LOGO.png 를 프로젝트의 Resource 폴더에 Add 해야겠지요. (지난 세미나자료 참조)
역시 주의할점은 다음과 같이 File's Owner 를 선택한 상태에서 (HelloSADIAccelViewController가 선택된 상태에서)위의 Action/Outlet 연결작업을 해야합니다. 종종 다른 요소의 정보창이 표시된 상태에서 하는 경우가 있습니다.
이때 File's Owner 는 HelloSADIAccelViewController 자신이라고 보면 됩니다.(인스턴스)
제작이 끝났으면 일단 File - Save 하여 수정된 인터페이스 정보를 xib 파일에 저장하고,
다시, File 메뉴의 Write Class Files 를 눌러 변경사항을 기록합니다. 이때 Merge 를 선택하여 기존 클래스에
정보를 추가합니다.
Merge 를 누르면 머지 프로그램이 실행되고 두 코드를 비교하는데,
키보드의 좌우키와 상하키를 이용하여 다음과 같이 변경/추가된 내용들을 좌측 (추가된 내용) 으로 선택하고 save 해줍니다.
HelloSADIAccelViewController.m 파일에 다음과 같이 버튼이 눌렸을때 텍스트가 바뀌도록 수정합니다. (지난번과 동일)
#import "HelloSADIAccelViewController.h"
@implementation HelloSADIAccelViewController
- (IBAction)button1Pressed {
textLabel.text = @"Communication Design";
}
- (IBAction)button2Pressed {
textLabel.text = @"Fashion Design";
}
- (IBAction)button3Pressed {
textLabel.text = @"Product Design";
}
@implementation HelloSADIAccelViewController
- (IBAction)button1Pressed {
textLabel.text = @"Communication Design";
}
- (IBAction)button2Pressed {
textLabel.text = @"Fashion Design";
}
- (IBAction)button3Pressed {
textLabel.text = @"Product Design";
}
이제 View-Based Application 템플릿으로 지난번과 같은 내용이 완성이 되었습니다.
여기서 가속도 센서를 사용하여 로고를 움직이는 부분을 추가하도록 하겠습니다.
다음과 같이 HelloSADIAccelAppDelegate.h 에 UIAccelerometerDelegate 를 추가해줍니다.
#import <UIKit/UIKit.h>
@class HelloSADIAccelViewController;
@interface HelloSADIAccelAppDelegate : NSObject <UIApplicationDelegate, UIAccelerometerDelegate> {
UIWindow *window;
HelloSADIAccelViewController *viewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet HelloSADIAccelViewController *viewController;
@end
@class HelloSADIAccelViewController;
@interface HelloSADIAccelAppDelegate : NSObject <UIApplicationDelegate, UIAccelerometerDelegate> {
UIWindow *window;
HelloSADIAccelViewController *viewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet HelloSADIAccelViewController *viewController;
@end
HelloSADIAccelAppDelegate.m 에는 다음과 같이 추가하여 가속도 센서를 초기화 하고 didAccelerate 를 구현합니다.
setUpdateInterval 은 말그대로 초당 업데이트 회수(Hertz)를 지정해주는 부분입니다.
#import "HelloSADIAccelAppDelegate.h"
#import "HelloSADIAccelViewController.h"
@implementation HelloSADIAccelAppDelegate
@synthesize window;
@synthesize viewController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Configure and start the accelerometer
[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 40)];
[[UIAccelerometer sharedAccelerometer] setDelegate:self];
// Override point for customization after app launch
[window addSubview:viewController.view];
[window makeKeyAndVisible];
}
- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
[viewController handleAccelerometerX:acceleration.x Y:acceleration.y Z:acceleration.z];
}
- (void)dealloc {
[viewController release];
[window release];
[super dealloc];
}
@end
#import "HelloSADIAccelViewController.h"
@implementation HelloSADIAccelAppDelegate
@synthesize window;
@synthesize viewController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Configure and start the accelerometer
[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 40)];
[[UIAccelerometer sharedAccelerometer] setDelegate:self];
// Override point for customization after app launch
[window addSubview:viewController.view];
[window makeKeyAndVisible];
}
- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
[viewController handleAccelerometerX:acceleration.x Y:acceleration.y Z:acceleration.z];
}
- (void)dealloc {
[viewController release];
[window release];
[super dealloc];
}
@end
위에서 handleAccelerometerX:Y:Z: 는 우리가 ViewController 에 구현하여 이미지를 움직일 메소드 입니다.
그럼 다음과 같이 HelloSADIAccelViewController.h 에 메소드를 정의를 하고
#import <UIKit/UIKit.h>
@interface HelloSADIAccelViewController : UIViewController {
IBOutlet UIButton *button1;
IBOutlet UIButton *button2;
IBOutlet UIButton *button3;
IBOutlet UIImageView *imageSADI;
IBOutlet UILabel *textLabel;
}
- (IBAction)button1Pressed;
- (IBAction)button2Pressed;
- (IBAction)button3Pressed;
- (void)handleAccelerometerX:(float)x Y:(float)y Z:(float)z;
@end
@interface HelloSADIAccelViewController : UIViewController {
IBOutlet UIButton *button1;
IBOutlet UIButton *button2;
IBOutlet UIButton *button3;
IBOutlet UIImageView *imageSADI;
IBOutlet UILabel *textLabel;
}
- (IBAction)button1Pressed;
- (IBAction)button2Pressed;
- (IBAction)button3Pressed;
- (void)handleAccelerometerX:(float)x Y:(float)y Z:(float)z;
@end
HelloSADIAccelViewController.m 에 다음과 같이 구현을 합니다.
x, y 축 기울기 에 따라 로고 이미지가 좌우 상하로 움직이게 됩니다.
가속도 센서는 시뮬레이터에서는 테스트 불가능하며, 기기에서만 테스트 가능합니다.
#import "HelloSADIAccelViewController.h"
@implementation HelloSADIAccelViewController
- (IBAction)button1Pressed {
textLabel.text = @"Communication Design";
}
- (IBAction)button2Pressed {
textLabel.text = @"Fashion Design";
}
- (IBAction)button3Pressed {
textLabel.text = @"Product Design";
}
- (void)handleAccelerometerX:(float)x Y:(float)y Z:(float)z {
if(y<-0.5)
imageSADI.center = CGPointMake(imageSADI.center.x, imageSADI.center.y+3);
if(y>0.5)
imageSADI.center = CGPointMake(imageSADI.center.x, imageSADI.center.y-3);
if(x<-0.5)
imageSADI.center = CGPointMake(imageSADI.center.x-3, imageSADI.center.y);
if(x>0.5)
imageSADI.center = CGPointMake(imageSADI.center.x+3, imageSADI.center.y);
}
@implementation HelloSADIAccelViewController
- (IBAction)button1Pressed {
textLabel.text = @"Communication Design";
}
- (IBAction)button2Pressed {
textLabel.text = @"Fashion Design";
}
- (IBAction)button3Pressed {
textLabel.text = @"Product Design";
}
- (void)handleAccelerometerX:(float)x Y:(float)y Z:(float)z {
if(y<-0.5)
imageSADI.center = CGPointMake(imageSADI.center.x, imageSADI.center.y+3);
if(y>0.5)
imageSADI.center = CGPointMake(imageSADI.center.x, imageSADI.center.y-3);
if(x<-0.5)
imageSADI.center = CGPointMake(imageSADI.center.x-3, imageSADI.center.y);
if(x>0.5)
imageSADI.center = CGPointMake(imageSADI.center.x+3, imageSADI.center.y);
}
flash.display.Sprite
