본문 바로가기

Application Programming Interface/Cocoa

Xcode Interface Builder를 사용하여 사용자 정의 컨트롤 만들기

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Interface Builder를 사용하여 사용자 정의 컨트롤 만들기

- by Tapito


 Visual Studio에서 C#, Basic, C++/CLI 등의 닷넷 언어로 어플리케이션을 작성할 때는 Panel에 원하는 컨트롤 들을 배치하여 사용자 정의 컨트롤 클래스를 만들 수 있습니다. Xcode에서도 이와 유사하게 각종 View 들을 배치하여 사용자 정의 View를 만들수 있습니다.

 

1. 프로젝트 생성

 편의상 iPhone용 앱을 만드는 프로젝트를 기준으로 합니다. OS X용 프로그램 개발 프로젝트에서도 동일한 과정이 적용됩니다. 아래와 같이 Single View Application 프로젝트를 하나 생성하도록 하겠습니다. (Xcode 6.1.1 기준)

 

2. 사용자 정의 컨트롤을 작성할 레이아웃 파일 생성

 [File]→[New]→[File...]을 클릭합니다.

 [iOS]→[User Interface]→[View]을 선택하여 새 View를 생성합니다.

 

3. 사용자 레아이웃 작성

아래와 같이 자유롭게 레이아웃을 작성합니다.

 

4. 코드 작성하기

4.1 클래스 생성

 작성한 레이아웃을 화면으로 불러오기 위해서 코드를 작성하겠습니다. [File]→[New]→[File...]을 클릭합니다.

 작성한 레이아웃을 화면으로 불러오기 위해서 코드를 작성하겠습니다. [iOS]→[Source]→[Cocoa Touch Class]를 선택하여 새 클래스를 생성합니다.

 

4.2 헤더 파일에 Outlet 선언하기

 레이아웃에 추가한 View 들에 대한 Outlet을 선언합니다. 이 때 주의할 것은 레이아웃 자체에 대한 Outlet인 UIView * view 도 선언해야 한다는 것입니다. 여기서는 아래와 같이 작성하겠습니다.

/* MyView.h */
#import <UIKit/UIKit.h>

@interface MyView: UIView

@property (strong, nonatomic) IBOutlet UIView * view;
@property (strong, nonatomic) IBOutlet UILabel * labelTitle;
@property (strong, nonatomic) IBOutlet UIButton * button;
@property (strong, nonatomic) IBOutlet UISegmentedControl * segmentedControl;

@end

 

4.3 소스 파일에 레이아웃을 로드하는 코드 작성하기

 NSBundle은 윈도우 프로그래밍에서 말하는 리소스와 비슷합니다. 이 클래스의 인스턴스가 init로 초기화될 때 [NSBundle mainBundle]을 통해 이전 단계에서 작성한 레이아웃(MyView.xib)을 불러와 이 클래스와 연결시키는 내용입니다.

/* MyView.m */
#import "MyView.h"

@implementation MyView

- (id) init
{
self = [super init];
if (self != nil)
{
[self loadLayout];
}
return self;
}

- (id) initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self != nil)
{
[self loadLayout];
}
return self;
}

- (id) initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self != nil)
{
[self loadLayout];
}
return self;
}

- (void) loadLayout
{
// loadNibNamed:@"불러올 xib파일명" owner:자기자신이 소유 options:여기서는 별도로 설정할 것 없음
[[NSBundle mainBundle] loadNibNamed:@"MyView" owner:self options:nil];
// self.view에 번들에서 가져온 레이아웃이 담겨질텐데 이를 자기 자신의 SubView로 설정하여 실제로 화면에 보이기
[self addSubView:[self view]];
}

@end

 

5. 레이아웃과 코드의 연결

 레이아웃과 코드를 각각 작성했으므로 Interface Builder에서 이들을 연결합니다. 작성한 레이아웃인 MyView.xib를 열고 File's Owner에서 이 레이아웃과 관련된 클래스를 이전 단계에서 작성한 클래스인 MyView로 설정합니다.

 

다음, File's Owner에 마우스 오른쪽 클릭을 하면 헤더 파일에서 선언한 Outlet들이 나타납니다. Outlet 이름 옆에 있는 작은 동그라미를 클릭하여 레이아웃에 있는 각각의 View들에게 끌어다 놓는 것으로 View와 Outlet을 서로 연결합니다.

 

6. 사용자 정의 View 사용하기

 사용자 정의 View가 완성되었습니다. 이를 화면에서 사용해보겠습니다. Main.storyboard 또는 화면으로 사용하는 xib 파일을 열면 삽입 가능한 View 중에서 그냥 비어있는 View가 있습니다. 이를 화면 속으로 드래그해여 추가합니다.

 

 추가한 View를 선택하고 이 View를 소유할 클래스가 이전 단게에서 작성한 MyView 클래스임을 지정합니다.

 

 완성된 화면입니다.