오브젝트C2010. 6. 22. 09:54
[Objective-C]Interface Builder 기본 사용

Interface Builder를 사용하여 간단한 HelloWorld프로그램을 제작해 보았다. 이제부터는 Iphone 시뮬레이터를 사용한다.

새로운 프로젝트 생성 창이다. 여기서 iPhone OS를 선택해주고, Application을 선택해주면 상단과 같은 목록이 뜨는데 Window-based Application을 선택해 준다. 종류별 간단한 설명을 하자면 다음과 같다.

* Navigation-Based : 내비게이션 컨트롤러를 사용하는 응용프로그램으로 대표적인 예는 주소록이다.

* OpenGL ES : 게임과 같은 OpenGL 그래픽 기반의 응용프로그램

* Tab Bar : 탭 바를 사용하는 응용프로그램. 아이팟 프로그램이 대표적

* Utility : 앞뒤면이 있는 응용프로그램. 예로 주식 프로그램

* View-Based : 뷰 기반 프로그램. 뷰에 그림을 그리고 윈도우에 뷰를 표시한다.

* Window-Based : 메인 아이폰 윈도우만 가지고 시작하는 프로그램. 이 메인 윈도우에서 어느 프로그램이든 시작할 수 있다.

Window-based Application을 선택해주고 프로그램 이름을 정해주면 다음과 같이 기본 세팅이 된다. 여기서 프로그램 이름을 example_1로 해 주었기 때문에 다음과 같이 설정되어 기본 세팅 된 화면이다.

example_1AppDelegate.h 의 코드에 내용을 추가한 모습이다. 추가 내용으로는 UILabel *label 을 추가하고 property에도 label을 추가한 모습이다.

이 Delegate 클래스는 버튼을 누르거나 슬라이더를 움직이는 식의 아이폰 윈도우에서 일어나는 액션에 응답하는 메소드 들이 작성된다. 인터페이스 빌더와 대응하여 각각의 컨트롤들에 대응하는 메소드들이 작성된다. 또한 아이폰 윈도우에 있는 컨트롤들의 값에 대응하는 변수도 포함하게 되는데 이를 아웃렛(Outlet)이라고 한다.

여기서 btnClick은 버튼 컨트롤이 클릭되었을때 대응하는 메소드가 된다. UILabel의 경우 버튼이 클릭 되었을 때 화면에 정보를 뿌려주기 위한 객체이다.

example_1AppDelegate.m의 실제 구현 모습이다. @property로 설정된 내용을 @synthesize해주어 접근자를 생성해 준다.

또한 btnClick의 실제 구현을 해주는데 단순히 label에 텍스트를 넣어주는 것이다. 이외의 것은 건들지 않았다.

이제 인터페이스를 구성할 차례이다. 좌측 탭에서 Resources로 가보면 .plist와 .xib파일이 보일텐데 xib파일은 인터페이스 빌더 파일이다. 더블클릭을 하게 되면 인터페이스 빌더가 실행된다.

보는바와 같이 인터페이스 빌더가 실행된 모습이다.

상당히 생소한 모습으로 실제 인터페이스 빌더는 처음 써보았다.

좌측 창의 모습인데 라이브러리에 보게되면 각종 사용하게 될 컨트롤러들이 보이고 있다.

좌측창에서 Label을 선택하여 드래그한 후 중앙의 실제 iPhone화면 구성 창에 드래그 해준다.

이렇게 드래그 앤 드랍방식으로 화면을 구성할 컨트롤들을 배치할 수 있다.

화면과 같이 Label자체의 크기역시 조절 할 수 있다. 적절한 크기로 만들어 배치해 준다.

이제 좌측 창에서 Round Rect Button을 선택해 준다.

역시 드래그 하여 적절한 위치에다 놓아주면 배치는 종료된다.

버튼을 더블클릭하면 내용을 바꿀 수 있는데 더블클릭하여 버튼에 표시될 내용을 적어준다. Label역시 가능하며 버튼 또한 Label처럼 사이즈 조절이 가능하다.

이제부터 중요한 작업으로 3번째 창을보면 프로젝트명 Delegate가 보일것이다. 여기서는 example1로 프로젝트명을 했기 때문에 Example1 App Delegate가 보일것이다. 버튼의 액션을 할당해 주기 위해서 버튼에 control버튼을 누르고 드래그하여 Delegate로 끌고가면 파란색 선이 나오게 된다.

버튼을 띠게 되면 아까 선언해 줬던 btnClick이란 메소드가 보일 것이다. 이는 Delegate 클래스에 메소드 1개만 선언해 주었기 때문에 이렇게 나오는데 여러개를 선언해 주었다면 해당 목록에서 원하는 메소드를 찾아 선택하면 된다. 이로서 버튼이 클릭되면 수행할 메소드 할당이 끝났다.

이제 반대로 변수로 선언해 준 label객체가 무엇인지 할당해 주어야 한다. 3번째 창에서 Delegate를 control 드래그 하면 역시 파란선이 나오며 드래그 되는데 아까 배치해 두었던 label에 놓아준다.

아까와 마찬가지고 선언해 두었던 컨트롤들의 목록이 뜨게 되는데 1개만 선언해 주었기 때문에 label을 선택해 준다.

최종적으로 ui의 모습이다.

이제 interface builder를 저장하고 xcode에서 실행시키면 된다. 본인은 interface builder를 저장하지 않아서 정상작동하지 않아 고민을 많이 했다...

아이폰 시뮬레이터의 모습이다. 이제 버튼을 눌러보자

Hello World!라고 지정해 두었던 문자가 Label에 찍히는 것을 볼 수 있다.



출처 : http://blog.naver.com/PostView.nhn?blogId=khagaa&logNo=30085139048

'오브젝트C' 카테고리의 다른 글

Objective-C의 기본 문법  (0) 2010.06.22
Objective-C의 특징  (0) 2010.06.22
[Objective-C]Interface Builder 기본 사용  (0) 2010.06.22
[Objective-C]번들  (0) 2010.06.22
[Objective-C]메세지 포워딩  (0) 2010.06.22
[Objective-C]존  (0) 2010.06.22
Posted by 오늘마감

댓글을 달아 주세요

XCODE2010. 6. 21. 09:28
[펌] Xcode 3 둘러보기(2) - Interface Builder
출처 - http://www.cocoadev.co.kr/168




이번 포스팅에서는 인터페이스 빌더 3.1을 둘러 보겠습니다. 역시나 이전 Xcode 둘러보기와 같이 두서없고 깊이 없이 둘러만 보겠습니다.



1. XIB 파일
처음 Xcoe3.1을 실행하고 당황스러운 부분은 더블클릭해서 인터페이스 빌더를 실행해야 할 nib 파일이 없어졌다는 것입니다.

그대신 Resources 그룹을 보면 MainMenu.xib가 새로 추가되어 있습니다. 이 MainMenu.xib를 더블클릭 하면 이전과 같이 인터페이스 빌더가 실행됩니다.


아래는 텍스트 에디터에서 열어본 *.xib 파일의 내용입니다.


요즘 많은 툴들에서 사용하는 XML 포맷으로 되어 있지만, 애플에서는 절대 직접 수정하지 말라고 권하고 있습니다. xib 파일은 기본 3,305 라인이기 때문에 그다지 수정할 생각은 들지 않습니다. xib 파일은 아마 윈도우의 rc 파일의 역활을 하는 것 같습니다.

nib 파일은 Xcode에서는 찾을 수 없지만(하위 호환을 위해서 NIB Files 그룹이 존재 하는 것 같습니다) 빌드 후에는 패키지내에 포함됩니다.


2. XIB 윈도우
2.5 버젼과는 달리 Instance, Classes, Images, Sounds, Nib등의 탭이 없어지고, 이전의 Instance에 해당되는 부분만 있습니다. Application과 Font Manager가 추가되었습니다.


3. 라이브러리 윈도우

이 전의 팔레트가 라이브러리 윈도우로 변경되었습니다. 이제 UI 컨트롤, 인스턴스를 추가하는 작업에 라이브러리 윈도우를 사용합니다. 이전과 같이 NIB 윈도우에서 Classes 탭을 이용하여 subclass를 추가할 수는 없는 것 같습니다. 하지만 인스턴스를 클래스(파일)로 만드는 것은 여전히 가능합니다. 아래가 라이브러리 윈도우 입니다.


Cocoa 어플리케이션에서 사용하는 오브젝트와 컨트롤들은 Cocoa 그룹 하단에 다시 세부로 분류되어 잘 정리 되어 있습니다. 지금은 용도를 알수 없는 아이템들이 많고 이전과 비교하여 추가된 부분이 많기 되었기 때문에 기회가 되면 따로 각 아이템의 용도를 공부한 후에 설명해야 될 것 같습니다.

아직 각 아이템들의 명칭을 잘 몰라서 라이브러리 윈도우에서 우클릭을 하면 나오는 보기 옵션에서 'View Icons And Lables'를 선택하여 이름도 같이 볼 수 있도록 선택해 놓았습니다.


4. AppController 인스턴스 생성
우선 AppController 인스턴스와 클래스 파일을 만들어 보겠습니다. 라이브러리 윈도우에서 Cocoa/Objecrts & Controllers(/Controllers) 에서 Object 아이템을 드래그해서 아래와 같이 xib 도큐멘트 윈도우로 가져다 놓습니다.
새로 만들어진 Object가 선택된 상태에서 Shift+Command+i를 클릭하여 인스펙트 윈도우를 오픈합니다. 아래와 같이 Identity 항목을 선택한 다음 Class에 AppController를 입력합니다. 그리고 Action과 Outlet 하단의 [+] 버튼을 클릭하여 아래와 같이 changeTextLabel과 textLabel, userInput을 각각 추가하였습니다.



5. Outlet, Action 연결
라 이브러리 윈도우에서 Label, TextField, Push Button을 윈도우로 드래그 해서 아래와 같이 배치하였습니다.
연결은 오브젝트를 컨트롤 키와 함께 클릭하여 연결될 오브젝트로 드래그 하는 이전과 동일한 방법도 가능합니다. 이전과 다른 점은 인스펙터의 연결창이 오픈되는 것이 아니라 아래와 같이 연결될 Action 또는 Outlet의 목록만 출력됩니다.

인 터페이스 빌더 3에서는 더욱 편리한 방법이 있습니다. xib 도큐먼트 윈도우에서 AppController에 마우스 우클릭을 하면 아래와 같이 연결 판넬이 오픈됩니다.


textLabel의 우측에 원모양의 아이콘을 드래그 하여 Label에 연결합니다. 동일한 방법으로 userInput을 텍스트필드에 연결하고 Received Action의 changeTextLabel을 Set 버튼에 연결합니다.
  

모두 연결된 모습입니다. 해당 항목 앞의 x 아이콘을 클릭하면 연결이 삭제됩니다.

인스펙트 윈도우의 연결 항목에서도 현재 상태를 확인할 수 있습니다. 또한 이곳에서도 해당 아이템 우측의 원모양 아이콘을 드래그하여 해당 오브젝트와 연결 또는 x를 클릭하여 삭제 할 수 있습니다.


6. 소스코드와 연결
1) 클래스 파일 생성
이제 AppController 인스턴스의 클래스 파일을 만들어 보겠습니다. AppController 인스턴스를 선택한 상태에서 인터페이스 빌더 메뉴의 File/Write Class Files...을 클릭합니다. 아래의 창이 뜨면 Save 버튼을 클릭하여 저장합니다.
생 성된 파일의 프로젝트에 포함시키기 위하여 체크를 하고 Add 버튼을 클릭합니다.
2) 슈퍼클래스 지정
Xcode에서 보면 AppController 클래스 파일을 확인할 수 있습니다. 인터페이스 빌더에서 위와 같이 생성한 클래스들은 헤더파일에서 슈퍼클래스를 지정해 주어야 합니다. 오랜지 색으로 되어 있는 부분을 NSObject로 변경하고 저장합니다.

#import <Cocoa/Cocoa.h>

@interface AppController : /* Specify a superclass (eg: NSObject or NSView) */ {
    IBOutlet NSTextField *textLabel;
    IBOutlet NSTextField *userInput;
}
- (IBAction)changeTextLabel:(id)sender;
@end

3) 코드와 동기화
이제 인스펙터에서 다시 확인하면 아래의 붉은색 사각형 부분과 같이 AppController.h라 바가 생겨 Xcode의 AppController 클래스와 연결되어 있음을 알려줍니다.


이전에는 소스코드에 변경사항이 생기면 Xcode에서 해당 클래스의 헤더파일을 드래그 하여 인터페이스 빌더의 nib 도큐먼트로 드랍 해서 변경사항을 적용시켜 주어야 했습니다. 하지만 이제는 Xcode에서 소스코드에 변경사항이 생기고 저장이 되면 인터페이스 빌더에 바로 반영이 되어 매우 편리합니다.

Xcode에서 미리 클래스 파일을 만들어 놓고 인터페이스 빌더에서 해당 클래스를 선택하는 것도 가능합니다.


AppContorller 의 인스펙터에서 새롭게 Outlet을 추가해 보았습니다.

위와 같이 AppController.h의 상단에 MainMenu.xib 바 밑에 추가되기 때문에, 헤더파일에 반영이 되지 않은 것을 쉽게 확인할 수 있습니다. 소스코드에서 아래와 같이 myOutlet1을 추가한 후에 저장해 보았습니다.

#import <Cocoa/Cocoa.h>

@interface AppController : NSObject {
    IBOutlet NSTextField *textLabel;
    IBOutlet NSTextField *userInput;
    IBOutlet NSTextField *myOutlet1;
}
- (IBAction)changeTextLabel:(id)sender;
@end

다시 인터페이스 빌더의 AppController의 인스펙터에서 확인하면 좌측과 같이 변경된 사항이 자동으로 반영되어 있습니다.




7. 기타
1) Effect
눈에 뛰는 것은 인스펙터에 'Effect' 항목이 추가되었다는 것입니다. 코어에니메이션을 이용하여 사용자 UI에 화려한 효과를 주는 것으로 보입니다. 아래는 효과를 선택하는 화면이며,  보시는 바와 같이 다양한 효과가 있습니다. 재미있는 것이 많을 것 같은데 몇가지만 확인해 보았습니다.


코어에니메이션을 사용하기 위해서는 Content View를 체크해야 합니다. Context Filters에서 Color Invert와 Gaussian Blur 필터를 추가해 보았습니다.


* Color Invert + Gaussian Blur 필터 적용

* Color Invert 필터 적용

2) 크기조절과 정렬
윈도우 확대시에 컨트롤들의 위치와 크기를 조절하는 부분을 움직이는 gif로 만들어 보았습니다. (실제로는 훨씬 부드럽습니다)

하 얀색으로 된 부분이 윈도우고 붉은색이 해당 콘트롤입니다. 윈도우 확대시 변화되는 모습을 시각적으로 보여 줍니다.


정렬 기능이 인스펙터에 추가되었습니다. Alignment 항목은 다른 오브젝트와 같이 선택되었을 때 적용이 가능합니다.

Placement는 가로 또는 세로로 정중앙에 위치하게 합니다.



Xcode와 마찬가지로 인터페이스 빌더 3.1에도 재미있고 신기한 기능들이 많이 추가 된 것 같습니다. 잠시 사용해 본 것이라 틀린 내용들이 있을 수 있습니다. 알려 주시면 수정하겠습니다.

이전 인터페이스 빌더를 보면 독특한 방식은 인상 깊었지만 무엇인지 약간 부족한 느낌을 받았습니다. 하지만 이번 3.1버젼은 비록 짧은 시간 일부분만 확인해 보았지만, 안정적이고 완성도가 많이 높아졌다는 느낌을 받았습니다.




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

댓글을 달아 주세요