아이폰어플개발정보2010. 6. 24. 08:01
슬라이더로 표현하기.
모바일 프로그램을 작성하다보면, 모바일 환경을 알아야 한다. 모바일 환경은 일반적인 데스크탑에서의 환경과는 다르게 한정된 자원을 이용해야 한다는 사실을 기억해야 한다. 그리고 그런 사실은 자원에서 뿐만 아니라, 인터페이스나, 디자인에서도 동일하게 적용된다.


New project.
새 로운 프로젝트를 시작한다. 'View-based Application' 을 선택하고 프로젝트 이름은 'fiveSlider' 로 하였다. 이번에 만들게 될 애플리케이션은 여러개의 슬라이더가 있고, 라벨을 통하여 슬라이더의 수치를 표현해 주는 애플리케이션이다. 키보드로 입력하는 애플리케이션을 제작할때 처럼 어떤 형태의 애플리케이션이 될것인가에 대한 구상을 한다.



그림1. 프로젝트 구상.

프 로젝트에 대한 구상을 마쳤다면 먼저 해야 할 것은 어떤 객체들을 아웃렛으로 선언하고, 어떤 액션을 가져야 하는지 생각해 보는 것이다. 'fiveSlider' 프로젝트에서는 슬라이더를 움직이면 왼쪽에 있는 숫자 라벨이 슬라이더의 내용에 맞게 변화되는 액션을 취하게 된다. 아주 간단한 기능을 가지고 있다. 여기서 변화가 있는 객체는 슬라이더 옆의 숫자 라벨과, 슬라이더이다. 숫자 라벨은 당연히 아웃렛을 선언을 해 주어야 한다. 하지만, 슬라이더는 그렇지 않다. 물론 아웃렛을 선언해도 작동한는것에는 문제가 없다. 하지만, 슬라이더 자체가 이미 아웃렛이 선언되어 있는 상태이기 때문에, 새로운 아웃렛을 선언하여 자원을 낭비할 필요가 없는 것이다.


아웃렛 선언과 액션 구현.
각 슬라이더의 내용을 표현하는 다섯개의 아웃렛을 'fiveSliderViewController.h' 파일에 선언을 한다. 선언한 아웃렛에는 프로퍼티를 함께 선언해 주어야 한다는 사실을 기억하자. 그리고 슬라이더의 움직임을 표현하기 위한 액션 메소드를 선언해 주어야 한다.

@interface fiveSliderViewController : UIViewController {
    UILabel *sliderLabel1;
    UILabel *sliderLabel2;
    UILabel *sliderLabel3;
    UILabel *sliderLabel4;
    UILabel *sliderLabel5;
}

@property (nonatomic, retain) IBOutlet UILabel *sliderLabel1;
@property (nonatomic, retain) IBOutlet UILabel *sliderLabel2;
@property (nonatomic, retain) IBOutlet UILabel *sliderLabel3;
@property (nonatomic, retain) IBOutlet UILabel *sliderLabel4;
@property (nonatomic, retain) IBOutlet UILabel *sliderLabel5;
- (IBAction)sliderControl1: (id)sender;
- (IBAction)sliderControl2: (id)sender;
- (IBAction)sliderControl3: (id)sender;
- (IBAction)sliderControl4: (id)sender;
- (IBAction)sliderControl5: (id)sender;
@end



'fiveSliderViewController.h' 파일의 선언을 마치고 'fiveSliderViewController.m' 파일을 수정해야 한다. 중간에 초록색으로 표현된 주석문들을 삭제하고, 아웃렛을 선언한 객체들에 대해 @synthesize 를 선언하고, 앞서 선언한 액션 메소드의 실제적인 행동을 정의한다.

#import "fiveSliderViewController.h"

@implementation fiveSliderViewController
@synthesize sliderLabel1;
@synthesize sliderLabel2;
@synthesize sliderLabel3;
@synthesize sliderLabel4;
@synthesize sliderLabel5;

-(IBAction)sliderControl1: (id)sender {     // 'sliderControl1' 의 액션 메소드 구현
    UISlider *slider = (UISlider *)sender;
    int progressAsInt = (int)(slider.value + 0.5f);
    NSString *newText = [[NSString alloc] initWithFormat: @"%d", progressAsInt];
    sliderLabel1.text = newText;
    [newText release];
}

위의 소스에는 'sliderControl1' 에 대한 액션만 구현되어 있지만, 나머지 'sliderControl2 ~ 4' 에 대한 모든 액션이 구현되어 있어야 제대로 작동 하게 된다. '-(IBAction) sliderControl1: (id)sender { ... }' 의 부분을 복사, 붙여넣기한 후 'sliderControl1' 과 'sliderLabel1' 을 숫자만 바꾸어 주면 된다. 액션 메소드에서는 id 타입의 sender 라는 이름의 인자를 하나 가지게 된다. 이 sender는 여러개의 오브젝트에서 동일한 액션을 적용했을때, 각 오브젝트를 구분하는 역할을 하거나, 오브젝트에서 어떠한 값을 가지는지 전달하는 역할을 하게 된다. 'sliderControl' 액션 메소드에서는 슬라이더의 값을 전달하는 역할을 하고 있다. 액션 메소드 내에서는 id 타입으로 전달된 슬라이더의 값을 UISlider * 로 바꾸어준다. 이렇게하면 매번 sender 의 타입을 바꾸지 않아도 되는 장점이 있다. 그리고 슬라이더의 값에 0.5를 더해 반올림한 뒤 값을 int 타입으로 얻어내고, 이 값은 새로운 문자열로 생성하고, 레이블에 값을 전달한다. 레이블에 값을 전달하기 위해 사용된 NSString 타입의 newText 는 더이상 사용하지 않으므로 release 시킨다.


인터페이스 빌더로 화면 디자인 하기.
코드에 대한 부분이 마무리 되었다면 Resources 폴더의 'fiveSliderVierController.xib' 파일을 더블클릭하여 인터페이스 빌더를 실행한다. 구상했던데로 라벨들과, 슬라이더를 적절히 배치하여 모양을 만든다.



그림2. 인터페이스 디자인 만들기

슬라이더의 속성중에는 최고값과 최저값, 그리고 맨처음 애플리케이션이 실행될때의 표시 값을 설정할 수 있는데, 점수를 나타내는 것이기 때문에 '0 ~ 100' 으로 설정하고, 기본값은 '50' 으로 해 놓는다.


아웃렛과 액션 연결하기.
슬라이더의 값을 나타내는 라벨에 아웃렛을 연결하고, 각 슬라이더에 액션을 연결해 준다. 객체에 아웃렛을 연결하는 방법은 main 윈도우의 File's Owner 아이콘을 'ctrl' 버튼을 누른체로 클릭하여 아웃렛을 연결하고자 하는 객체로 마우스를 드래그 한다. 그러면 아웃렛이 선언된 객체들의 이름이 팝업으로 나타나는데, 알맞은 객체를 선택하면 된다.



그림3. 아웃렛 연결하기

아웃렛을 연결하는 또 하나의 방법은 'Connections' 윈도우를 이용하는 것이다. main 윈도우의 File's Owner 아이콘을 선택한후 'Connections' 윈도우를 띄운다. 가장 위를 보면 헤더 파일에 선언된 'Outlet' 의 목록을 볼 수 있는데, 연결하고자 하는 변수의 옆에 있는 원에 마우스를 가져가면 십자가 모양으로 바뀌는 것을 볼 수 있다. 이것을 끌어서 뷰 윈도우의 연결하고자 하는 객체에 가져다 놓으면 아웃렛이 연결 된다.



그림4. 액션 연결하기

액션을 연결하는 방법은 아웃렛을 연결하는 방법과 비슷하다. 뷰 윈도우에서 액션을 적용할 객체(슬라이더)를 선택하고, 'connections' 윈도우 를 띄운다. 슬라이더에 알맞는 액션은 'Value changed' 이다. 'Value changed' 의 오른쪽에 있는 원 부근에 마우스 커서를 가져가면 십자가 모양으로 바뀌는 것을 볼 수 있다. 이것을 쭉~ 끌어서 main 윈도우의 File's Owner 아이콘으로 가져간다. 이때 나타나는 팝업 메뉴에서 액션이 정의된 메소드를 선택한다. 잘못 연결하면 엉뚱한 숫자가 변할 수도 있다.


빌드하고 실뮬레이션 하기.
다시 Xcode 로 돌아가서 'Build and Run' 아이콘을 클릭하여 작성한 프로그램을 시뮬레이션 한다.



그림5. 'fiveSlider' 프로젝트 시뮬레이션

위 그림과 같이 슬라이더를 움직이면 옆의 숫자가 변하는 것을 볼 수 있을 것이다. 슬라이더는 비율이나, 정도를 수치로 표현할때 유용하게 쓸수 있는 라이브러리 객체이다.



출처 : http://blog.naver.com/PostView.nhn?blogId=seanhigher&logNo=60105524028
Posted by 오늘마감

댓글을 달아 주세요