설치된 Xcode를 실행하면 아래와 같은 화면이 뜹니다.

여기에서 Create a new Xcode Project를 클릭하면 다음과 같은 화면이 뜹니다.

 

 

저의 환경에서는 6종류의 Application을 만들 수 있는 Project Template이 있군요.

그럼 이제 6종류의 Templates에 대하여 살펴 보기로 하지요.

 

A) Navigation-based Application

This temple provides a starting point for an application that uses a navigation controller. It provides a iser interface configured with a navigation controller to display a list items.

네비게이션 컨트롤러를 기반으로 하는 어플, 계층 구조로 더 깊은 단계로 들어갔다가 나올 수 있는 형태의 어플을 만들 수 있다.

Navigation-based Application 템플릿은 아래 그림의 타이틀 모양과 같은 네비게이션 바를 표시할 때 사용한다. 주로 타이틀과 좌우에 간단한 버튼을 표기할 때 사용한다.




템플릿을 선택한 다음 자동으로 생성된 코드를 그냥 빌드 해보면 위의 오른쪽 그림과 같은 형태가 나온다.

Xcode 에서 빌드하기

Xcode 에서 빌드는 아래와 같이 상단의 아이콘을 클릭하거나 단축키 +를 ㄹ누르면 된다.





위의 왼쪽 그림과 같이 setting 형태의 버튼과 타이틀을 넣는 방법은 여러 가지가 있다. 먼저 Xcode SDK의 UI 구성툴인 Interface Builder(IB)를 이용하는 방법을 살펴보자. Xcode 에디터에서 코드를 수정하는 것이 조금은 필요하다. 위 그림에서 처럼 소스 브라우저 창에서 MainWindow.xib 라는 파일을 더블 클릭하면 인터페이스 빌더가 실행된다. *.xib 파일은 IB에서 사용하는 UI의 프로젝트 파일에 해당된다. IB는 크게 4개의 메인폼을 가지고 있다. 아래 그림 첫번째는 IB에서 사용된 각종 콘트롤들을 아이콘 형태로 보여주는 View 윈도우이며(아래그림1), 해당 View의 설정을 위한 UI 디자인창이 있다.(아래그림2) 그리고, Attribute를 설정하는 창과(아래그림3) 각종 라이브러리와 오브젝트들을 모아 놓은 Library 창이 있다. 여기서 Navigation Controller를 선택하고, Navigation item Attribute의 'Title' 항목과 'Back Button'항목을 아래 세번째 그림처럼 설정해준다. 여기서 설정한 내용은 실시간으로 UI 디자인창에 반영된다. 단, Back Button은 코드를 수정하면 볼 수 있다.







이렇게 만들어진 내용을 IB에서 'File | Save'메뉴로 저장하고 나와서 다시 빌드하면 'Wi-Fi Networks'라는 타이틀이 보일것이다. 그리고, 'Settings' 라는 아이템을 추가 하려면 RootViewController.m 파일에서 주석처리 되어 있는 함수를 아래와 같이 수정하면 된다. 각각의 프로퍼티를 변경해서 iPhone에서 사용되는 각종 Navigation 버튼을 구현할 수 있다.


- (void)viewDidLoad { 

[super viewDidLoad]; 

self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

}



다음은 Controller란 무엇인가를 알 수 있는 간단한 그림입니다.

 

 

다음은 Navigation Controller가 사용되는 간단한 어플입니다.

 


 

B) OpenGL ES Application

This template provides a starting point for an application that uses an OpenGL ES-baces view. It provides a view into which you render your OpenGL ES scene, and a timer to allow you to animate the view.

게임 등을 게발하기 위해서 3D엔진인 OpenGL ES를 사용할 수 있다. (자세한 것은 다음에 만들어 보면서..)

 iPhone OS는 게임등과 같이 화면 전환이 빠르게 요구되는 어플리케이션들을 위해서 그래픽 라이브러리로 OpenGL ES(Open Graphic Library Embedded System)라는 라이브러리를 기본적으로 지원한다.

OpenGL ES는 Khronos Group(http://www.khronos.org/opengles/)에서

제공하는 Open GL의 임베디드 버전이다. 2D와 3D 데이터를 표현하기 위한 C언어 베이스의 크로스 플랫폼 인터페이스이다. 이 템플릿을 추가하면 기존에 화면(View)을 그리기 위해 사용했던 CoreGraphics.framework 대신에 아래 그림과 같은 2개의 framework이 추가 된다.




역시 아무런 조작이 없이 Xcode 에서 'Build and Run' 버튼으로 동작시켜 보면 아래 그림과 같은 애니메이션 어플리케이션이 실행된다.(박스가 상하로 움직이는 것을 볼 수 있다.)




아래 그림은 Open GL/ES템플릿을 선택했을 경우 프로젝트 화면이다. Navigation 템플릿과달리 여러 가지 리소스들이 포함된 것을 볼 수 있다.





Open GL에 관해서 몇 개의 참조 사이트를 소개하도록 하겠다.

http://developer.apple.com/iphone/library/documentation/3DDrawing/Conceptual/OpenGLES_

ProgrammingGuide/Introduction/Introduction.html

: 이곳은 Apple 에서 공식적으로 제공하는 OpenGL/ES 프로그래밍 가이드를 소개하는 페이지이다. iPhone OS 에서 OpenGL ES를 활용한 프로그램과 프레임 버퍼를 이용하는 방법, Vertex Data, Texture Data 등을 활용하여 만든 예제, 퍼포먼스 가이드라인, Texturetool 을 사용하는 방법들을 설명해 준다.

또한 아래와 같은 사이트를 참조하라고 소개하고 있다. OpenGL ES API Registry(http://www.khronos.org/registry/gles/)

OpenGL ES 2.0 Reference Pages (http://www.khronos.org/opengles/sdk/docs/man/)

OpenGL ES Framework Reference 함수 설명 사이트 (http://developer.apple.com/iphone/library/documentation/OpenGLES/Reference/OpenGLES_

Framework/index.html#//apple_ref/doc/uid/TP40007628

)

iPhone용 OpenGL ES 강좌 사이트(영문; http://web.me.com/smaurice/AppleCoder/iPhone_OpenGL/iPhone_OpenGL.html)

Khoronos group 에서 제공하는 OpenGL ES SDK 메뉴얼 사이트(http://www.khronos.org/opengles/sdk/docs/man/)





C) Tab Bar Application

This template provides a starting point for an application that uses a tabbar. It provides a iser interface configured with a tab bar for the first tab bar item.

Tab Bar를 사용하는 어플을 만드는 곳입니다.

Tab Bar는 Application 뷰의 하단에 위치해서 뷰를 전환하는 역할을 하는 버튼들을 모아놓는 곳이다. Navigation Bar와 유사하다. iPhone OS의 기본프로그램에도 많이 쓰여 지고 있다. 아래 그림은 Tab Bar의 여러 가지 유형의 보여주고 있다.

 





아래 그림은 템플릿을 사용한 프로젝트를 만들고 바로 빌드한 모습니다. 2개의 뷰를 Tab Bar를 사용해서 보여주고 있다.




템플릿을 활용하여 위와 같이 2개의 뷰를 전환하는 예제에서는 각각의 뷰가 필요하다. IB에서 탭이 늘어날 때마다 아래와 같이 Tab Bar Controller Attributes 에서 + 를 클릭한 후 탭과 별도의 뷰를 하나씩 늘려가면 된다.





 


D) Utility Application

This template provides a starting point for a utility application that a main view and a flipside view. It sets up an info button to flip the main view to the flipside, and a navigation bar with a Done item to flip back to the main view.

날씨나 증권같이 위젯 형태의 어플을 만들 수 있는 곳. 단순히 보여주기만 할 뿐, 사용자 입력을 받을 필요가 거의 없는 곳에서 사용하면 적합하다고 하는데 다른 템플보다 이쁘군요.

이 템플릿은 info 버튼이 포함된 Main view와 네비게이션 바를 가진 flipside 형태로 전환되는 뷰를 가진 어플리케이션을 만들때 사용되는 템플릿이다. iPhone 어플리케이션에서 설정 화면등을 구성할 때 자주 사용된다. 아무런 수정도 하지 않고 템플릿을 로드하고 'Build and Run' 했을때 아래와 같은 화면을 볼 수 있다.



이 템플릿은 IB로 디자인하기 위해서 FlipsideView.xib, MainView.xib, MainWindow.xib와 같은 2개의 뷰와 1개의 MainWindow를 가진 리소스를 제공한다. 각각의 View에 해당되는 소스와 ViewController 소스가 템플릿으로 제공되어 진다. 그리고, 이들 뷰간의 동작들을 담당하기 위해서 appDelegate가 역시 템플릿으로 제공된다. (아래 그림참조) 이 템플릿은 MainView에 원하는 Application을 동작시키고 설정 항목등을 FlipsideView에 위치시킬때 사용하면 좋을 것이다.





 

E) View-based Application

This template provides a starting point for an application that uses a single view. It provides a biew controller to manage the view, and a nib file that contains the view.

하나의 뷰가 추가된 어플

이 템플릿은 싱글 뷰를 가진 어플리케이션을 만들 경우 사용되는 템플릿이다. 사실 싱글 뷰로 어플리케이션을 만드는 경우는 거의 없을 것이다. 하지만, 뷰를 조작하기 위한 view controller를 제공해 주고 IB를 위한 간단한 nib 파일을 제공해 준다. 이 템플릿의 장점은 뷰가 많은 Application을 제작할 때 일일이 신경 쓰지 않고도 간단히 원하는 view와 view controller를 가진 UI를 빨리

생성해 주어서 작업능률을 올릴 수 있다는 것이다.






F) Window-based Application

This template provids a starting point for any application. It provides just an application delegate and a window.

가장 기본적인 형태도 뷰도 없다. 따라서 스스로 뷰를 추가하여야 한다.

이 템플릿은 하나의 MainWindow와 AppDelegate 만을 제공해 주는 가장 기본적인 템플릿이다. 개인적으로 IB를 사용하여 UI작업을 할 때 가장 자주 사용하는 템플릿이다. 이 템플릿 위에 뷰와 Object 들을 배치시키고 어플리케이션을 만들 수 있다. 버튼을 누르면 팝업창이 뜨는 간단한 어플리케이션을 예제로 만들어 보겠다.


1) 아래 그림과 같이 MainWindow.xib를 클릭해서 IB를 시작한다.




2) 아래 그림과 같이 IB의 Library 창에서 View Object를 Window 창으로 드래그한다. 그 후에 이 뷰를 메인뷰로 사용할 것이기 때문에 Class명을 myView로 수정한다.






3) 이제 Image View Object와 Round Rect Button Object를 가져와서 그림과 같이 배치한다. Object를 뷰에 올리는 방법은 이전 단계에서 했던 것과 마찬가지로 드래그하면 된다. 그리고, image View Attributes 창에서 aimage.png 라는 그림 파일을 불러온다. 이 그림 파일은 처음에 프로젝트를 만든 후에 Finder로 부터 Project tree로 드래그해서 추가해 놓은 것이다.(필자는 Resources 디렉토리에 두었다.)








4) 이제는 myView에 만들어진 Object들의 IBOutlet을 만들고 event 코드를 작성할 차례이다. IBOutlet은 IB를 사용해서 Object를 포함하는 View를 만들었을 경우 각각의 Object를 control 하기 위해서 만들어 준다.

최종 동작은 '누르세요'라는 버튼을 클릭했을 때 info 베너가 동작하도록 하는 것이다.

IB에서 myView 에 해당되는 소스파일을 프로젝트로 넣기 위해서 저장을 하도록 한다. IB의 메뉴에서 'File | Write Class Files' 를 선택한다. 이 때 myView.h myView.m 파일을 프로젝트에 추가할 것인지를 창이 뜬다. 체크 버튼을 체크해 주고 해당 파일을 프로젝트에 'Add' 해 준다.




5) 프로젝트에 IB에서 만든 UI 소스가 포함되고 나서, 먼저 myView.h 파일의 내용을 아래와 같이 고쳐준다.

#import #import

@interface myView : UIView { IBOutlet UIButton *pBtn; //pBtn을 눌렀을때 showInfo가 동작 IBOutlet UIImage *pImg

} -(IBAction)showInfo;

@end

또, 실제 alert 메시지창을 보여주는 함수 내용은 myView.m에서 작성한다.

#import "myView.h"

@implementation myView -(IBAction)showInfo { UIAlertView *baseAlert = [[UIAlertView alloc] initWithTitle:nil


message:@"showInfo 가 실행되었\n 습니다." delegate:self cancelButtonTitle:nil otherButtonTitles:@"확인",nil];show];release];

}

@end




6) '누르세요' 버튼을 터치다운 했을 경우 showInfo() 라는 함수가 실행되도록 만들기 위해서 IB에서 먼저 해주어야 할일이 있다. 아래 그림처럼 버튼 Object에서 마우스 오른쪽 클릭을 한 후에( 원버튼 마우스의 경우; Ctrl+윈쪽클릭) 'Touch Down' 이벤트를 드래그해서 myView로 가져가면 아래 그림과 같이 showInfo 함수를 선택할 수 있도록 활성화 된다.





7) 이제 저장하고 Xcode에서 빌드하면 showInfo()가 아래 그림과 같이 동작하게 된다. 이런식으로 각각의 Object 들과 터치 이벤트등을 연결할 수 있다.







이상으로 6개의 Project Template를 살펴보았습니다.

그럼 자신이 만들고자 하는 어플과 가장 유사한 템플릿을 선택하여 프로젝트를 시작하면 되겠지요!



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