라벨과 슬라이더를 이용해 간단한 아이폰 어플 만들기

지난 스탠포드 강의 1강에서 보여줬던 슬라이더를 이용한 예제를 함께 만들어보도록 합시다.

우리가 만들 어플리케이션은 바로 이것입니다.

슬라이더를 좌우로 움직이면 라벨의 텍스트가 0에서 100까지 변화하게 됩니다.



어렵지 않으니 차근차근 따라해보도록 하지요.

xcode를 실행해서 File -> New Project를 선택합니다.

프로젝트를 선택하는 화면이 나타나는데 여기서는 Window-based Application을 선택합니다.

왜냐고 물으신다면... 예제가 그렇습니다. 강사님이 그렇게 하십니다;;

이제 프로젝트의 이름을 정합시다. 전 뭐 slida 라는 이름으로 정했습니다.

프로젝트가 생성이 되었습니다.

xcode의 왼쪽의 트리메뉴를 보면 slida 프로젝트가 생성된 것을 볼 수 있습니다.

폴더를 하나씩 열어볼까요.

Frameworks 폴더에는 우리가 아이폰 어플리케이션 개발에 필요한

UIKit을 비롯한 프레임워크가 있고

여기서 일단 중요한건 Resources 폴더입니다.

MainWindow.xib 파일이 어플리케이션의 인터페이스를 담고 있는 파일입니다.

그리고 slida-Info.plist 파일은 어플리케이션 정보를 담고 있는 파일인데 지금은 건드릴일 없으니 일단 패스.


자 이제 MainWindow.xib 파일을 더블클릭하여 실행합니다.

인터페이스빌더가 실행되면서 해당 파일이 열립니다.

백지상태의 아이폰 어플리케이션 화면이 나타나는 군요.

인터페이스 빌더에서 Tools -> Library를 선택하면 컴포넌트들을 볼수 있는 창이 나타납니다.

그리고 이 창에서 Label과 Slider를 드래그앤 드롭해서 화면으로 옮겨 놓습니다.

그리고 적당한 위치로 배치합니다.

Label을 더블클릭하면 텍스트를 변경할 수 있습니다.

0으로 변경해봅니다.

그리고 Tools -> Inspector를 열고 슬라이더를 클릭하면

슬라이더의 속성을 설정하는 화면이 보입니다.

value의 minimum을 0으로 maximum을 100으로 설정하고

initial 을 0으로 설정합니다.

슬라이더가 제일 왼쪽에 있을때가 0이고 제일 오른쪽에 있을때가 100, 그리고 초기상태의 값이 0이라는 뜻입니다.



자 이제 화면 구성은 모두 끝이 났네요.

이제 코딩을 위한 준비를 해봅시다.

library에 보면 Object라는 요소가 있습니다. 육면체의 모양인데요.

이것을 MainWindow.xib창에다 드래그앤드롭해서 넣습니다.

그리고 Tools -> Identity Inspector 를 선택하고 방금 드래그앤드롭한 object를 선택하면

위의 창과 같은 inspector 화면이 나타납니다. 잘 안보이면 클릭하셔서 보세요.

자 이제 여기에 몇가지 부분을 수정해보겠습니다.

지금하는 이 과정이 인터페이스빌더를 통해 object를 만드는 것입니다.


제일 상단의 Class에 이 object의 이름을 정합니다.

저는 controller로 정하겠습니다.


자 그리고 아래에 Class Outlets 항목이 있는데

여기에 2가지 항목을 추가해 넣을것입니다.

+버튼을 누르면 새 항목을 추가할 수 있습니다.

Outlets에 라벨과, 슬라이더를 등록할것입니다.

왼쪽의 Outlet에 label 을 적고 오른쪽 type에 UILabel을 넣습니다.

그리고 + 버튼을 누르고 Outlet에 slider, type에 UISlider를 넣겠습니다.


쉽게 이해하자면 UILabel 의 인스턴스를 label변수에 넣고

UISlider의 인스턴스를 slider 변수에 담는 것입니다.



자 그리고 이제 action을 추가할 차례입니다.

한마디로 메소드를 정의하는건데요.

action에 changeLabel 을 넣습니다.



자 이제 선언은 끝났고 연결을 해주는 작업이 남았는데

이 작업은 화면은 어떻게 캡쳐를 해야할지 몰라서 글로서 대신합니다.



위의 과정이 끝나고 MainWindow.xib에 추가해넣은 object를 클릭한다음

컨트롤을 누르고 마우스를 이동하면 파란색 선이 나타납니다.

이 선을 어플리케이션 UI의 슬라이더에 가져다 대고 마우스를 떼면

slider라는 방금전 지정한 outlet명이 나타납니다.

이것을 클릭해주세요.


그리고 다시 object를 클릭하고 컨트롤을 누른채 선을 UI의 라벨로 가져다 대고 마우스를 떼면

label 표시가 나옵니다. 이것을 다시 클릭하세요.



자 이번엔 반대로

슬라이더를 클릭하고 슬라이더를 컨트롤 누른채로 마우스를 이동하면 똑같이 파란선이 나타납니다.

이것을 object로 가져간다음에 마우스를 떼면

아까 지정한 action인 changeLabel 이 나타납니다.

이것을 선택해주면 인터페이스 빌더에서 할일은 모두 마쳤습니다.


글로 설명해서 쉽게 이해가 가실런지 모르겠네요.




자 이제 우리가 인터페이스빌더로 만든 object를 코드로 만들차례입니다.

File -> Write Class Files 를 선택하고

저장할 경로를 선택합니다. 같은 프로젝트 경로를 그냥 선택하시면 됩니다.

확인을 누르면 위와같이 추가할 것이냐는 창이 나타나는데 프로젝트에 체크박스를 표시해준 후에 add 버튼을 누릅니다.


자 이제 다시 xcode로 돌아가면

아까전에 만든 object가 내가 지정한 클래스명으로 m파일과 h파일이 생성되어있는것을 볼 수 있습니다.

write class files의 결과지요.


이제 이 파일에 약간의 수정만 남았습니다.



먼저 controller.h 파일을 수정합니다.


#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@interface controller : NSObject /* Specify a superclass (eg: NSObject or NSView) */ {
    IBOutlet UILabel *label;
    IBOutlet UISlider *slider;
}
- (IBAction)changeLabel;
@end


@interface controller 이렇게 코딩되어있고 그 옆에

/* Specify a superclass (eg: NSObject or NSView) */

이렇게 주석처리가 되어있습니다.

수퍼클래스를 명시하라고 되어있네요.

@interface controller : NSObject

그래서 : NSObject를 추가로 명시해주면

NSObject를 수퍼클래스로 지정하게 됩니다.

이것을 빠뜨리면 빌드시 에러가 납니다.





자 그다음에는 controller.m 파일을 열어봅니다.


#import "controller.h"

@implementation controller
- (IBAction)changeLabel {
    int    value = slider.value;
    label.text = [NSString stringWithFormat:@"%d", value];
}
@end



그리고 changeLabel 액션에 위와 같이 코딩해 넣습니다.

slider의 value를 int형의 value라는 변수에 저장한 다음에

이것을 label의 text 속성에 넣는 간단한 코딩입니다.


코딩을 마치고 실행해보겠습니다.

xcode의 Build and Go를 클릭하거나 command + R 을 누르면 시뮬레이터가 작동합니다.

오~ 슬라이더를 움직이면 그 옆의 라벨이 0부터 100까지 변화하는것을 볼 수 있네요.



첫 코딩을 마쳤습니다. 이와함께 제 1강도 마친셈입니다.

최대한 쉽게 화면마다 캡쳐해서 올렸는데

이 포스팅을 보고계신분들은 당연히 저보다 더 쉽게 하셨겠죠?



휴 이제 1강 숙제를 해볼차례네요.

다음포스팅에서는 assignmentA를 진행해보겠습니다.

코딩은 필요 없고 간단히 이미지뷰와 라벨을 이용한 예제를 만드는 과제 입니다.


그럼 다시만나요~~