Tech & Book Story

어제 포스팅한 Page control 구현 내용에 한 가지를 덧붙여 보도록 할 것이다.

기존에 생성한 project는 마우스로 화면을 클릭한 채로 좌/우로 드래그를 하면 화면이 스크롤이 되었다.
여기에 마우스로 드래그를 하지 않고 화면상의 page control object를 버튼처럼 클릭을 해도 원하는 방향으로 페이지가 스크롤이 되도록 IBAction event를 추가해보자.

우선 어제 생성한 project를 열고 project 네비게이터에서 PageControlViewController.h 파일을 열어 아래와 같이 page control object를 클릭했을 때 호출될 changePage:라는 IBAction 이벤트 메소드를 선언한다.

다음은 PageControlViewController.m 파일에 위에서 선언해준 changePage: 메소드를 아래와 같이 구현해준다.

마지막으로 PageControlViewController.xib 파일을 열어 File's Owner를 선택하면 오른쪽 inspector 창에 IBAction으로 선언한 changePage: 메소드가 나타날 것이다.
이 메소드를 page control object와 연결해 준다.

이제 다시 실행을 해보자.

시뮬레이터의 화면을 마우스를 사용해 좌우로 드래그를 하거나 화면상의 page control object를 클릭하면 화면이 원하는 방향으로 스크롤이 되며 아래쪽 Page Control의 흰색 도트도 페이지와 함께 이동하여 현재 페이지를 표시해 주는 것을 확인할 수 있을 것이다.

아이폰 화면을 보면 여러 페이지에 걸쳐 앱 아이콘들이 놓여있고 손가락 드래그로 좌/우 페이지를 전환한다.
이때 화면 하단에는 현재 몇 번째 페이지를 보여주고 있는지 흰색 도트로 표시가 되어 있다.
이 흰색 도트는 페이지가 좌/우로 변경될 때마다 함께 이동하며 항상 현재가 몇 번째 페이지인지를 확인할 수 있게 해준다.
이 기능이 바로 Page control 기능이다.
이번엔 Scroll View에 Page control을 추가해 기능을 구현해본다.

SingView Application Template으로 PageControl이라는 이름의 Project를 생성한다.
왼쪽 project 네비게이터에서 PageControlViewController.xib를 선택하고 Inspector 메뉴의 아래쪽에 있는 Objects 리스트에서 Scroll View를 클릭후 드래그하여 에디트화면상의 View 위에 올려놓고, 그 위에 Page Control을 드래그하여 올린다.

Page Control을 Scrol View위에 올리면 위의 그림과 같이 Scrol View의 하위 object로 들어가게 되기 때문에 Page Control을 추가할때는 Scrol View의 크기를 조금 줄여서 View의 빈 공간에 Page Control을 놓은 후...

Scrol View의 크기를 원래대로 늘려주면 된다.

다음은 project 네비게이터에서 PageControlViewController.h 파일을 열어 아래와 같이 scrollView 객체와 pageControl객체를 xib파일에서 추가해 둔 Scroll View 및 Page Control과 연결할 수 있도록 IBOulet 키워드를 사용해 property 선언해 준다.

PageControlViewController.m 파일에는 위에서 property 선언해준 scrollView, pageControl 객체를 synthesize해준다.

다시 project 네비게이터에서 PageControlViewController.xib를 열고 File's Owner를 선택 후 위에서 IBOulet으로 선언해준 scrollView와 pageControl 항목을 각각 연결해 준다.

마지막으로 Object 항목의 Scroll View를 선택하여 아래와 같이 delegate를 File's Owner로 연결해 준다.

이 연결을 하지 않을 경우 최종 결과물에서 페이지 전환은 되나 page control의 흰색 도트가 움직이지 않는 결과를 보게 된다.

여기까지 기본적인 준비는 다 되었고, 실제로 화면에 표시할 이미지를 준비해서 project에 포함시킨다.

아래와 같이 car1, car2, car3, car4.jpg 이름으로 아이폰 배경화면 4개를 준비해 project에 추가해 보았다.

이제 이미지를 scrollView 위에 띄우고 Page Control 도트가 페이지의 이동과 함께 연동하도록 코드를 추가한다. 

아래와 같이 PageControlViewController.m 파일의 viewDidLoad 메소드에 방금 추가한 이미지 파일을 imageView로 생성하여 addSubView로 scrollView를 붙여준다.

아이폰 시뮬레이터 화면의 해상도를 320 x 480 픽셀로하여 준비된 4장의 총 크기는 (320 * 4) x 480 이다.

여기에 화면 상단의 Status Bar가 차지하는 height 20 픽셀을 빼도록 한다. 따라서 1280 x 460 이 되었다.

20 픽셀을 빼지 않고 height를 480으로 생성할 경우 상하 스크롤까지 되기 때문에 보기에 그다지 좋지가 않다.

여기에 Page control의 총 페이지 수(준비한 이미지가 4개 이므로 4페이지)와 실행초기의 현재 페이지 위치(0부터 시작)를 설정해주는 코드를 아래와 같이 추가한다.

마지막으로 scroll view가 스크롤이 된 직후 불려지는 scrollViewDidScroll: 메소드를 추가하여 실제 pageControl의 page표시를 갱신하는 코드를 추가한다.

아래 코드와 같이 좌우로 현재 Page의 50%를 넘어가는 만큼 스크롤이 발생할 경우 좌측 또는 우측 페이지로 전환이 되도록 구현한 후 pageControl의 현재 페이지를 새로 변경된 페이지로 갱신하면 화면상의 흰색 도트가 함께 이동이 된다.

이제 실행을 해보자.

음... 좀 이상하다.

원하는 결과는 페이지 단위로 딱딱 끊어지며 화면 전환이 이루어져야 하는데 이건 뭐... 그냥 일반 스크롤뷰의 움직임에 pageControl만 추가가 된 느낌이다.

이를 수정해보자.

 PageControlViewController.xib 파일을 열고 Scroll View object를 선택한 후 오른쪽 Attribute Inspector에서 Scroll View의 Scrollers 속성을 다음과 같이 수정한다.

- Shows Horizontal Scrollers 와 Shows Vertical Scrollers 속성을 해제한다. (스크롤바가 없는 것이 더 깔끔하다)

- Scrolling Enabled 와 Paging Enabled 속성을 선택한다.

다시 한번 실행을 시켜보자.

시뮬레이터의 화면을 마우스를 사용해 좌우로 드래그를 해보면 이미지가 화면 단위로 스크롤이 되며 아래쪽 Page Control의 흰색 도트도 페이지와 함께 이동하며 현재 페이지를 표시해 주는 것을 확인할 수 있을 것이다.

Scroll View를 간단하게 테스트 해보기 위해 아이폰의 화면보다 더 큰 해상도의 이미지를 준비해서 화면에 띄운 후 상하/좌우 스크롤을 통해 전체 이미지를 볼 수 있도록 해보자.

SingView Application Template으로 ScrollView라는 이름의 Project를 생성한다.
왼쪽 project 네비게이터에서 ScrollViewController.xib를 선택하고 Inspector 메뉴의 아래쪽에 있는 Objects 리스트에서 Scroll View를 클릭후 에디트화면상의 View 위에 올려놓으면 된다.

다음은 project 네비게이터에서 ScrollViewController.h 파일을 열어 아래와 같이 scrollView 객체를 xib파일에서 추가해 둔 Scroll View와 연결할 수 있도록 IBOulet 키워드를 사용해 property선언해 준다.

ScrollViewController.m 파일에는 위에서 property 선언해준 scrollView 인스턴스를 synthesize해준다.

다시 project 네비게이터에서 ScrollViewController.xib를 선택하고 옆의 File's Owner를 선택하면 나타나는 오른쪽 Inspector창에서 6번째 Connections Inspector를 선택하면 Outlets 항목에 위에서 property 선언해준 scrollView항목이 나타나는데 그 옆의 원을 클릭하고 왼쪽의 Objects - Scroll View 항목으로(또는 UIScrollView 화면으로) 드래그해 연결한다.

여기까지 기본적인 준비는 다 되었고, 실제로 화면에 표시할 이미지를 준비해서 project에 포함시킨다.

이미지는 가급적이면 큰 것을 준비해야 상하/좌우 스크롤을 해보며 동작을 충분히 확인할 수 있을 것이다.

테스트로 근사한 자동차 사진 하나 추가해 보았는데 음.... 타보고 싶어지는 군...

이제 마지막으로 이미지를 scrollView 위에 띄우기만 하면 된다.

아래와 같이 ScrollViewController.m 파일의 viewDidLoad 메소드에 추가한 이미지 파일을 imageView로 생성해 놓은 후 scrollView의 사이즈를 imageView로 설정한 다음 addSubView로 scrollView를 붙여주면 끝.

이제 실행을 해보자.

시뮬레이터의 화면크기보다 더 큰 이미지를 띄웠기 때문에 좌상단의 일부분만 우선 표시가 된 것이고 마우스를 사용해 상하/좌우로 드래그를 해보면 이미지가 따라서 스크롤이 되며 전체 이미지를 확인할 수 있을 것이다.

이전 포스팅에서는 UIViewController를 추가하고 그 위에 Coding으로 NavigationController를 생성해서 붙였었다.
이번에는 UIViewController 추가없이 Interface Builder를 사용해 Window 위에 곧바로 NavigationController를 생성해보자.

Empty Application Template으로 Project를 생성하면 기본적으로 AppDelegate.m 파일의 아래와 같은 코드에 의해 Window가 하나 생성되어져 있지만 XIB 파일은 만들어지지 않는다.

 
이번에는 Interface Builder를 사용할 것이기 때문에 작업할 XIB 파일이 필요하다.
Project는 이전과 마찬가지로 Empty Application Template을 선택하여 생성한 후 아래와 같이 XIB 파일을 추가한다.
먼저 User Interface를 선택하고... Application을 선택한다.

Device Family는 물론 iPhone으로 선택...

MainWindow.xib라는 이름으로 만들어보자.

왼쪽 project 네비게이터에서 project를 선택하고 오른쪽 중간에 Main Interface 항목을 확인해 보면 방금 만든 MainWindow가 생겼을 것이다. 이를 선택한다.

왼 쪽 project 네비게이터에서 MainWindow.xib를 선택하고 옆의 Objects에서 App Delegate를 선택하면 나타나는 오른쪽 Inspector창에서 세번째 Identity Inspector를 선택 후 Class를 "ProjectName"AppDelegate를 찾아 선택한다.

다음은 아래처럼 Inspector 메뉴의 아래쪽에 있는 Objects 리스트에서 Navigation Controller를 클릭후 에디트화면으로 끌어다 놓는다.
이때 기존에 화면상에 있던 윈도우 안쪽으로는 놓을 수 없으니 빈 공간에 아무곳에나 놓는다.

다음은 project 네비게이터에서 NavigationTestAppDelegate.h 파일을 열어 아래 내용을

아래와 같이 IBOutlet 키워드를 추가하여 수정해준다.

NavigationTestAppDelegate.m 파일에는 위에서 property 선언해준 navigationController 인스턴스를 synthesize해준다.

다시 project 네비게이터에서 MainWindow.xib를 선택하고 옆의 Objects에서 App Delegate를 선택하면 나타나는 오른쪽 Inspector창에서 6번째 Connections Inspector를 선택하면 Outlets 항목에 위에서 property 선언해준 window와 navigationController가 나타난다.

navigationController 옆의 원을 클릭하고 왼쪽의 Objects - Navigation Controller 항목으로 드래그해 연결하고

window는 옆의 원을 클릭 후 왼쪽의 Objects - Window 항목으로 드래그하여 연결한다.

다음은 project 네비게이터에서 NavigationTestAppDelegate.m 파일을 다시 열어 navigationController를 window에 붙여주어 실행되면 화면에 표시되도록 하는 코드를 추가한다.

여기까지 하고 실행을 해보자.

예상과 달리 화면에는 NavigationBar가 나타나지 않는다.

놀라지 말고 시뮬레이터의 홈버튼을 눌러 프로그램을 종료했다가 홈화면에서 프로그램 아이콘을 클릭해 다시 실행해보자

어떤가??? 정상적으로 NavigationBar가 나타날 것이다.

여기에서 한 가지 확인하고 넘어갈 것이 있다.

처음에 Empty Application Template으로 project를 생성했을 때 AppDelegate.h 파일에 아래와 같이  window를 생성해주는 코드가 포함되어 있는것을 기억할 것이다.

또, 우리가 XIB 파일을 생성했을 때 ( MainWindow.xib를 확인해 볼것 ) App Delegate와 함께 기본적으로 Window가 하나 생성되어 있는 것을 알 수 있다.

따라서 현재 생성되어 있는 window는 2개가 된다.

최초 어플리케이션이 실행되면 AppDelegate.h 파일에서 생성된 window가 초기화되어 화면에 표시되기 때문에 나타나는 현상이며, 대부분의 일반적인 네이티브앱 개발 시 window는 하나만 필요하다.

우리는 MainWindow.xib를 생성할 때 만들어진 window를 사용할 것이기 때문에 AppDelegate.h에서 만들어진 window는 조금도 필요하지 않다.

즉, AppDelegate.h 파일속의 window 생성 및 초기화 코드는 불필요한 코드로 걍 삭제해버리거나 주석처리를 해버리면 된다. 아래와 같이 주석처리를 하자.

다시 실행을 해보자.

어떤가??? 이번엔 최초 실행될 때부터 정상적으로  NavigationBar가 표시되는 것을 확인할 수 있을 것이다.

이후에 ViewController를 추가하여 화면전환을 하는 내용은 이전의 포스트를 참고하면 쉽게 구현이 될 것이다.

이전 포스팅에서 NavigationController를 사용해 Main View와 Sub View간의 화면 전환을 할 때
Main View -> Sub View 로 View가 전환되면서 Sub View의 Navigation Bar 좌측에 이전 View의 Title인 "Main View"라는 이름으로 Back button이 자동생성 된 것을 확인했다.
경우에 따라서는 자동으로 생성되는 이전 View의 title 대신 back button에 다른 이름을 부여하고 싶을 수도 있다.
예를들어 "Back" 또는 "Home" 등으로 변경하고 싶을 경우 어떻게 하면 될까???

우선 Main View -> Sub View 로 View 전환이 일어났고, 변경하고 싶은 Back button은 Sub View의 Navigation bar에 있다.
그럼 변경작업을 Sub View에서 하면 될까???
아니다.
Back Button의 속성등은 이전  View에서 작업을 해야한다.
즉, Main View 코드에서 Back button에 대한 속성을 설정하면 전환된 View (여기서는 Sub View)에 반영되어 생성된다.

MainViewController.m 파일을 열고 loadSubView 메소드 안에 아래와 같이 UIBarButtonItem 객체를 생성, 초기화한 후에 NavigationItem의 backBarButtonItem에 넣어주는 코드를 추가한다.
아래 예는 "Home" 이라는 title로 설정을 해 보았다.
 

다시 실행을 해보자.
초기 Main View 중앙에 있는 "Go to SubView" 버튼을 누르면 아래처럼 "Home" 이라는 이름을 가진 Back button으로 변경된 것을 확인할 수 있다.

여기서 한 가지 궁금하지만 풀지 못한 의문이 있다.

반드시 위에서와 같이 UIBarButtonItem 객체를 생성해서 변경을 해야 하는 것인가?

위의 코드 대신 아래처럼 간단하게 해결할 수 있을 것 같은데 아래 명령은 전혀 먹히지가 않는다.

이유가 무엇인지 도저히 모르겠다...

혹시 아는 분이 계시다면 살짝 귀띔이라도 해주시기를.....

Xcode 에서 기본으로 제공되는 템플릿 중에는 Navigation controller가 구현되어 있는 것이 있지만 템플릿을 사용하지 않고 직접 한번 간단하게 만들어 보는 것도 기본 개념을 잡기에 좋을 것 같다.

우선 Xcode 4.3 기준으로 아래처럼 Empty Application 으로 NavigationTest라는 이름의 project를 생성한다.

다음은 만들어진 Project에 아래처럼 파일을 추가한다.
먼저 Objective-C class를 선택하고...

UIViewController의 Subclass로  MainViewController Class를 생성한다. 이때 XIB도 포함하도록 한다.

NavigationTestAppDelegate.h 파일에 navigationController 객체를 property 선언해주고

NavigationTestAppDelegate.m 파일에서는 navigationController 객체를 synthesize 해준다.

추가로 MainViewController와 navigationController를 아래와 같이 초기화하고, navigationController를 rootViewController로 설정한다.

여기까지 하고 실행을 해보자.

MainViewController.xib 에는 아무런 object도 올리지 않았지만 View 상단에 Navigation Bar가 생긴것을 볼 수 있다.

이제 네비게이션 컨트롤러가 제대로 동작하고 있는지 확인해 보기 위해 SubViewController를 추가해서 MainView와 SubView 사이의 화면전환을 해보자.

먼저 Objective-C class를 선택하고...이번엔 UITableViewController의 Subclass로  SubViewController Class를 생성한다. 마찬가지로 XIB를 포함하여 생성한다.

우선 MainView에 Button을 올려 놓고, 그 버튼을 누르면 SubView로 넘어가도록 해보자.

MainViewController.h 파일에 Button이 눌렸을 때 반응할 Action으로 loadSubView 메소드를 선언하고

MainViewController.xib 파일을 열어 View의 중앙에 Round Rect Button 하나를 추가하고, 버튼을 IBAction으로 선언했던 loadSubView 메소드와 연결한다.

MainViewController.m 파일에는 아래와 같이 SubViewController.h 헤더파일을 import하고 loadSubView 메소드를 구현해보자.

SubViewController를 초기화한 후 NavigationController의 pushViewController 메소드를 사용해 subViewController를 스택에 푸시하여 화면에 띄워주도록 한다.

또, MainViewController의 View가 화면에 표시될 때 Navigation Bar에 "Main View" 라는 title이 표시되도록 해보자.

Navigation Bar에 title을 설정하기 위해서 self.navigationItem.title = @"Main View"; 를 추가한다.

SubViewController.m 파일에는 SubViewController의 View가 화면에 표시될 때 Navigation Bar에 "Sub View" 라는 title이 표시되도록 아래와 같이 viewDidLoad라는 초기화 메소드에 코드를 추가한다.

실행해보자.

코드를 추가한 대로 Navigation Bar에 "Main View" 라는 title이 표시되었다.

Go to SubView 버튼을 눌러보자.

원하던대로 추가했던 SubView가 title과 함께 정상적으로 표시되었다.

SubViewController의 Navigation Bar에는 우리가 추가하지 않았던 Main View라는 버튼이 추가되어 있는것이 확인된다.

이는 Navigation Controller에서 자동으로 생성된 버튼이며, 이전으로 돌아가는 기능을 가진 Back button이다.

Back button을 눌러보면 바로 이전의 MainViewController로 돌아가는 것을 확인할 수 있을 것이다.

여기서 한 가지 소소한 내용 하나를 짚고 넘어가자.

MainViewController.xib 를 선택해 화면 구성을 확인해 보면 Navigation Bar가 없이 버튼만 중앙에 있을 것이다.

하지만 실행을 시켜보면 우리가 IB로 추가하지 않고 코드로 생성한 Navigation Bar가 View의 상단에 표시가 되면서 화면 중앙에 위치해야 할 버튼이 Navigation Bar의 height만큼 아래로 밀려버려 원하지 않는 곳에 표시되는 것을 볼 수 있다.

이렇게 View에 각종 object들을 배치할 때 위치를 잡기에 불편함이 발생하는 것을 방지하기 위해 다음과 같이 해보자.

오른쪽 상단의 Attibutes Inspector를 선택한 후 Top Bar에서 Navigation Bar를 선택하면 아래와 같이 View에 Navigation Bar가 표시된다.

이는  실제로 Navigation Bar를 추가하는 것이 아니고, Xcode에게 View의 Top Bar로 Navigation Bar가 올려질 것이라는 것을 알려주는 것이다.

이 상태로 추가할 각종 object의 위치를 잡게되면 실제 실행했을 경우와 동일한 화면을 볼 수 있게된다.

iPhone / iPad 용 어플리케이션을 개발하기 위해서는 우선 Apple에서 제공하는 Xcode 라는 개발툴이 필요하다.
Apple에서는 iOS 버전이 올라가면서 새로운 기능이 추가될 때마다 그에 맞춰 Xcode 프로그램 또한 버전업을 하고 있으며, 항상 최신의 Xcode 버전에서 개발작업을 진행하는 것을 권장하고 있기 때문에 가급적이면 최신 버전을 설치한다.

현재는 지난주에 새롭게 버전업된 Xcode 4.3버전을 Mac app store 에서 무료로 다운받아 설치할 수 있다.

설치가 완료됐으면 이제 Xcode를 실행해 보도록 하자.
아래 화면과 같은 창이 열리면 왼쪽의 "Create a new Xcode project" 를 클릭해서 새 프로젝트 생성을 시작한다.

아래와 같이 새 창이 열리는데 여기에서는 어떤 형태의 템플릿으로 생성할 것인지를 선택할 수 있다.
왼쪽 트리의 iOS section에서 Application을 선택한 후 오른쪽에 표시된 템플릿 중 하나를 선택한다.
첫 테스트용 템플릿으로 Single View Application을 선택하자.

다음은 project 이름을 설정하고 추가로 제공되는 옵션을 사용할 것인지 선택하는 창이 나타난다.

아래와 같이 입력해 보자.

- Project Name : HelloWorld

- Company Identifier : edu.self

- Class Prifix : HelloWorld  ( 참고 : class prifix에 설정된 문자열이 class 생성 시 class이름 앞에 붙는다 )

Device Family 는 iPhone을 선택하고 Use Storyboards와 Use Automatic Reference Counting 옵션을 선택하자.

Next 버튼을 클릭하면 새로 생성할 프로젝트를 저장할 곳을 지정할 수 있는 창이 나타난다.

Project Folder를 선택한 후 Create 버튼을 클릭하면 지금까지 설정한 내용으로 신규 프로젝트의 생성이 완료되고, 아래 화면과 같이 Project Workspace 창이 나타난다.

Workspace 툴바의 Scheme pop-up에서 HelloWorld > iPhone 5.0 Simulator를 선택하고 Run 버튼을 클릭하자.

Run 버튼을 클릭하면 자동적으로 Build 후 실행이 된다. ( Command + R 단축키를 사용해도 된다 )

아무런 코드도 입력하지 않았지만 처음 project를 생성할 때 Single View Application이라는 템플릿을 사용해서 생성했기 때문에 Xcode에서는 Single View를 가진 Application의 구성에 필요한 기본 코드들을 자동으로 생성해 주어 위와 같이 아무 내용도 갖고 있지 않은 흰색 바탕의 View 하나를 표시하는 어플리케이션이 실행되는 것이다.

Single View Application 템플릿 이외의 다른 템플릿들을 사용해서도 프로젝트를 생성한 후 실행을 해보고 각각의 템플릿이 어떠한 차이가 있는지 또 어떠한 특징을 가지고 있는지 확인해 보는 것도 좋을 것이다...

Macbook 에 RAM 업글에 이어 오늘은 OS를 기존 10.6.x Snow Leopard 에서 10.7.x Lion 으로 업글 했습니다.
OS 업글 후 제일 처음으로 한 일이 Xcode 와 iBooks Author 프로그램 다운로드 였네요.
사실 그 두가지 프로그램을 사용하기 위해서 OS 를 업글 한거니까 당연한 거겠죠.

보이는 것 처럼 버전이 기존 10.6.8 에서 10.7.3 으로 업그레이드가 깔끔하게 잘 되었습니다.
특별히 달라진 것을 체감하기는 어려운데 눈에 확~~~ 띄는 것이 하나 있군요.
바로 아이폰/아이패드 처럼 바탕화면에 어플리케이션들을 늘어놓고 사용할 수 있는 화면이 추가 되었습니다.

마치 아이패드를 사용하는 것 처럼 비슷한 기분을 느끼기에 충분하네요.
아직 이전 버전을 사용하시는 분들은 주저말고 넘어 오셔도 괜찮을 듯...
이걸로 오늘 작업은 마.무.리.