앱 개발 시작하는데.. 머리가 아프다.. 이리저리 돌아댕기다가
좋은 자료가 있어 퍼왔는데...-_-a 저작권이런거 괜찮겠지;; ㄷㄷ
아래의 주소에 영어로 적혀 있는걸 어떤분이 한글로 번역한 자료가 있어서 낼름 샤샥...
위의 주소의 자료를
http://blog.daum.net/jiin_k/24 <-- 이렇게 해석해서 올려놓으신분... 능력자시다.. ㅎㄷㄷ
============================================================================================================
스토리 보드는 여러분이 유저 인터페이스를 빌딩할 때 많은 시간을 줄여주는 멋진 기능입니다. 백문이 불여일견이라고 설명보다는 그림을 보여드리겠습니다. 이번 튜토리얼에 작성될 스토리보드는 다음과 같습니다.
아직 여러분은 이 앱이 어떤 것인지 정확히는 모르겠지만 어떤 식으로 장면들이 연관 되어 있는지 한눈에 볼 수 있을 겁니다. 이것이 스토리보드의 장점이죠.
여러분의 앱이 많은 장면을 가지고 있을때, 그리고 그것들간의 페이지 이동에 관련된 많은 중복 코드를 스토리보드는 줄여줍니다. 각각의 분리된 xib 파일들을 이용하는 대신에 하나의 스토리보드에 뷰컨트롤러들과 그들의 관계를 보여주죠.
스토리 보드는 기존의 nib 파일들에 비해 다음과 같은 장점들이 있습니다.
- 스토리보드는 여러분 앱의 개괄적인 컨셉을 한눈에 볼 수 있게 합니다.
- 'segue' 라 불리는 뷰간의 트랜지션을 컨트롤+드래깅과 같은 GUI로 작성하여 코드를 줄여줍니다.
- prototypeCell, staticCell 을 통해 테이블 뷰의 코드를 줄여줍니다.
물론 모든 것은 완벽할 수 없기에 스토리 보드 역시 한계점이 있습니다. 기본적으로 큰 모니터가 필요할 뿐더러 IB는 할 수 있지만 스토리보드는 못하는 것도 있습니다.
모든 것을 그래픽이 아닌 코드로 구현하고자 하는 사람에게 스토리보드는 맞지 않습니다. 저의 경우 UI 관련해서 코드는 최소한으로 작성하고 싶어하므로 스토리보드는 저에게 안성맞춤이죠.
여전히 nib 파일을 사용할 수는 있습니다. 그리고 nib 과 스토리보드를 혼용할 수도 있습니다.
그럼 지금부터 스토리보드를 가지고 무엇을 할 수 있는지 살펴보겠습니다.
<시작하기>
싱글뷰 프로젝트를 만듭니다. Use Storyboard 를 꼭 클릭합니다.
프로젝트를 만들고 나면 이런 화면이 보이겠죠?
생성된 프로젝트에는 AppDelegate 와 ViewController, 그리고 MainStoryboard.storyboard 파일이 있을겁니다. MainWindow.xib 를 포함한 .xib 파일이 전혀 없습니다.
스토리보드를 한번 볼까요? 스토리보드를 클릭해 봅시다.
스토리보드는 인터페이스 빌더와 비슷합니다.
오른쪽 아래에 있는 Object Library로부터 새로운 컨트롤들을 드래그해서 레이아웃을 디자인 할 수 있습니다.
차이점은 스토리보드엔 하나의 뷰 컨트롤러만 담는게 아니라 모든 것을 담는 차이죠.
이것들의 공식적인 스토리보드의 명칭은 "scene" 이라고 하는데 이는 뷰 컨트롤러랑 차이가 없습니다.
에디터가 어떤식으로 작동하는지 느껴보기 위해 빈 뷰 컨트롤러에 컨트롤을 넣어보겠습니다.
왼쪽에 있는 사이드바에는 Document Outline이 있습니다.
인터페이스 빌덩에서 위의 영역은 하나의 nib 파일의 구성요소들만 있었지만 스토리보드 에디터에는 모든 뷰 컨트롤러와 그 구성요소들이 나타납니다. 현재는 하나의 뷰 컨트롤러 밖에 없지만 하나씩 추가해 갈겁니다.
씬 아래엔 "Dock" 이라 불리는 Document Outline 의 미니어처 버전이 있습니다.
Dock 은 씬의 최상위 레벨 객체를 보여줍니다. 매 씬들은 최소한 First Responder Object와 View Controller Object를 가지고 있지만 잠재적으로 다른 최상위 객체들을 가질 수도 있습니다. 그것은 이후에 살펴보기로 하겠습니다. Dock 은 커넥션을 만들 때 용이합니다. 만약 어떤 것을 뷰 컨트롤러에 연결하고 싶다면 단순히 그 아이콘을 Dock 으로 드래그해주면 됩니다.
NOTE : 여러분은 아마 First Responder 를 별로 사용하지 않을 것입니다. 이것은 중개인 역할을 하는 객체로써 firstreponse status 를 가지는 어떤 객체든지 참조하게 됩니다. 이것은 기존 인터페이스 빌더에도 존재하던 것인데 거의 사용하지 않았을 것입니다. 한 예로, 버튼에다 First Responder에 Touch Up Inside 이벤트를 걸 수 있습니다. 만약 어떤 시점에 텍스트필드에 인풋의 초점이 맞춰져 있을 때 그 버튼을 눌러 텍스트필드를 만들고 텍스트를 복사할 수 있습니다.
이제 시뮬레이터를 실행 시키면 에디터에 디자인한 그대로 이렇게 뜰 것입니다.
여러분이 만약 nib 기반 앱을 작성을 해보셨다면 항상 MainWindow.xib 파일이 있었을텐데요. 이 파일은 앱App Delegate 와 하나 이상의 뷰 컨트롤러를 참조하는 최상위 UIWindow 객체가 있었을겁니다. 하지만 스토리보드를 사용한다면 더 이상 이 파일은 사용되지 않습니다.
그럼, 스토리보드는 어떻게 로드되는 걸까요?
application delegate 를 보도록 하겠습니다. AppDelegate.h 를 열어보면 이렇게 되어 있을 겁니다.
#import! <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window;@end |
스토리보드를 사용하면 application delegate는 UIResponder 를 상속하고 (기존에는 NSObject를 상속했으나) UIWindow property (이전에는 IBOutlet) 를 가지고 있습니다.
AppDelegate.m 을 보면 아무것도 없고 모든 메소드는 공란일 것입니다. 심지어 application:didFinishLaunchingWithOptions: 메소드마저 단순히 YES 만을 리턴합니다. 이전엔 메인뷰컨트롤러의 뷰를 window에 달거나 window의 rootViewController property 를 세팅해주었겠지만 이제는 그런 것들이 일어나지 않습니다.
그것의 비밀은 Info.pList 파일에 있습니다. (앱이름)-Info.pList 를 보면 이것이 보일 겁니다.
nib 기반의 프로젝트에서는 NSMainNibFile, 또는 "Main nib file bas name" 이라는 키 이름을 갖는 것이 Info.pList 에 있었는데요. 그것은 UIApplication 으로 하여금 MainWindow.xib 를 불러와 앱에 연결시켜주는 것이였죠. 이제 Info.pList 에는 더 이상 그 항목이 없습니다.
대신에, 스토리보드 앱은 UIMainStoryboardFile 또는 "Main storyboard file base name" 이라는 키값을 가지고 있는 항목이 있어 앱 시작시 불러올 스토리보드의 이름을 적는 항목이 있습니다. 이 세팅이 되어 있으면 UIApplication 은 MainStoryboard.storyboard 파일을 불러오고 자동으로 첫 뷰 컨트롤러를 초기화하여 그것의 뷰를 UIWindow 의 객체로 둡니다. 프로그래밍이 따로 필요가 없죠.
이것 역시 Target Summary 화면에서 볼 수 있습니다.
여기에서 스토리보드로 부터 시작할 것인지 nib 파일로 시작할 것인지를 결정할 수 있습니다.
완벽을 기하기 위해 main.m 파일을 열어보겠습니다.
#import! <UIKit/UIKit.h> #import! "AppDelegate.h" int main(int argc, char *argv[]) { @autoreleasepool { return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); }} |
이전엔 UIApplicationMain()의 마지막 변수가 nil 이었지만 이제는 NSStringFromClass([AppDelegate class]) 인걸 확인할 수 있습니다.
이와 같은 차이점은 app delegate 가 스토리보드에 포함되지 않는 것을 의미합니다. 더 이상 app delegate 가 nib 으로부터 로드되지 않으므로, 우리는 UIApplicationMain에게 app delegate 의 클래스를 구체적으로 말해주어야 그것을 찾을 수 있겠죠.
<탭바 컨트롤러>
스토리보드에서 탭바를 만드는 방법은 매우 간단합니다.
스토리보드로 가서 Object Library로부터 탭바 컨트롤러를 스토리보드의 캔버스로 드래그 합니다.
스토리보드에서의 탭바 컨트롤러는 두개의 뷰 컨트롤러를 각각의 탭에 기본으로 달고 나옵니다. 탭바 컨트롤러는 하나 이상의 뷰 컨트롤러를 가지고 있기 때문에 container 뷰 컨트롤러라고도 하지요. 같은 것으로 Navigation Controller 와 Split View Controller 가 있습니다.
iOS5 의 새로운 멋진 기능 중 하나가 이러한 container 컨트롤러를 직접 만들어 사용할 수 있다는 것입니다. 이것은 나중에 살펴보기로 하죠.
컨테이너에서의 관계는 스토리보드의 에디터에서 다음과 같이 화살표로 표현됩니다.
first view controller 에다 label 을 드래그해서 넣고 "First Tab" 이라고 이름을 붙여줍시다. second view controller 에도 label 을 드래그해 넣고 "Second Tab" 이라고 이름을 붙여줍니다. 이렇게 하면 두 뷰 간의 차이점을 명확히 알 수 있겠죠.
NOTE : Zoom out 시에는 "씬" 안에 드래그해서 넣을 수 없습니다. 정상적인 줌 상태로 돌아가야 합니다.
탭바 컨트롤러를 선택해서 Attributes Inspector 를 선택합니다. Initial View Controller 에 체크를 합니다.
캔버스를 보면 탭바 컨트롤러 왼쪽에 시작 화살표가 생긴 것을 확인할 수 있습니다.
이것은 앱이 구동되면 UIApplication 가 탭바 컨트롤러를 메인 스크린으로 잡게 해줍니다.
스토리보드는 항상 이러한 이니셜 뷰 컨트롤러를 하나씩 가져야 합니다.
다시 시뮬레이터를 돌려보겠습니다. 이제 탭바를 기준으로 두개의 뷰 컨트롤러를 왔다갔다 할 수 있습니다.
탭바에 얼마든지 뷰 컨트롤러를 추가할 수 있습니다. 참고로 다섯개 이상의 탭을 붙일 경우 자동으로 More... 탭이 생깁니다.
<테이블 뷰 컨트롤러>
위의 과정의 탭바에 달린 두 컨트롤러는 모두 UIViewController입니다. 이제 첫번째 탭의 뷰 컨트롤러를 UITableViewController 로 교체해보겠습니다.
첫번째 뷰 컨트롤러를 선택하고 지웁니다. Object Library 로부터 새로 Table View Controller 를 캔버스로 드래그해서 지운 뷰 컨트롤러가 있던 자리에 놓습니다.
그리고 NavigationController 를 가지고 옵니다. 그러면 캔버스에 새로운 뷰 컨트롤러가 하나 생깁니다.
네비게이션 컨트롤러 역시 컨테이너 뷰 컨트롤러 중 하나이기 때문에 (마치 탭바 컨트롤러처럼) 테이블뷰 컨트롤러를 가르키는 화살표를 가질 수 있습니다. 도큐먼트에도 표시가 되어 있을겁니다.
이렇게하면 테이블뷰 컨트롤러에도 네비게이션바가 생긴다는 점을 눈여겨 볼 수 있습니다.
스토리보드 에디터는 네비게이션 컨트롤러와 테이블뷰컨트롤러를 연결하면 테이블뷰에 자동으로 네비게이션바를 추가하게 되는데 이는 씬이 네비게이션 컨트롤러의 프레임 안에 출력되기 때문입니다.
여기서 출력되는 네비게이션바는 실제 네비게이션 바가 아닌 가상의 네비게이션 바입니다.
테이블뷰의 인스펙터의 속성을 보면 상단에 simulated metrics 를 볼 수 있는데요,
"Inferred" 는 스토리보드의 디폴트 값이며 그것은 네비게이션컨트롤러 안에선 네비게이션 바가 보이며 탭바 컨트롤러 안에선 탭바가 보이는 것을 의미합니다.
이것을 오버라이드 하고 싶으면 그렇게 하면 되지만 그것은 여러분이 스크린을 디자인하는 것만 도와줄 뿐이라는 것을 명심하십시오.
가상일 뿐인 이 메트릭스들은 런타임시에는 사용되지 않으며 런타임시 어떻게 보일 것이라는 디자인 가이드일 뿐입니다.
이제 네비게이션 뷰 컨트롤러를 탭바와 연결시켜줍시다. 컨트롤+드래그 해서 탭바 컨트롤러를 네비게이션 컨트롤러에 연결합니다.
드래그를 놓으면 작은 팝업 메뉴가 나타납니다.
Relationship - viewController 옵션을 선택합니다. 이렇게 하면 새로운 화살표가 두 씬간에 생길 겁니다.
이제 탭바 컨트롤러는 탭 마다 씬을 가지게 되었습니다. 화살표의 타입에는 또 다른른 종류가 있지만 그것에 대해서는 나중에 알아보겠습니다.
각 탭의 순서는 마음대로 바꿀 수 있습니다.
앱을 돌려보겠습니다. 첫번째 탭이 네비게이션 컨트롤러 안에 테이블뷰를 가지고 있으면 성공한 겁니다.
댓글 없음:
댓글 쓰기