Sunny's Dev

iOS 5 에 들어오면서 iBooks에서 page 넘기는 애니메이션 효과를 구현하는 API가 공개 되었다.
설마 iBooks 에서 page 넘김 효과를 모르시는 분들은 없겠지만, 혹시나 하는 노파심에^^ 그림을 첨부하자면,  아래 그림처럼 종이 페이지를 넘기는 것 같은 애니메이션 효과를 의미한다.

 
하여간, 이 페이지 넘김 효과를 구현하는데 기본이 되는 class가 UIPageViewController 이고, 같이 봐야할 Protocol 로 UIPageViewControllerDataSource, UIPageViewControllerDelegate 가 있다.  이름을 보면, UITableView와 비슷하다는 느낌인데, 바로 UITableView 처럼 동작을 한다.  UIPageViewControllerDataSource protocol을 보면 다음 두 함수를 구현 해야 한다.

• – pageViewController:viewControllerBeforeViewController:
• – pageViewController:viewControllerAfterViewController:
 

 두 함수의 리턴 값이 UIViewController * 형인데, 이름에서 보는 것 처럼, 현재 보고 있는 페이지의 이전, 다음페이지에 대한 UIViewController  (실제적으로는 당연히 UIViewController를 상속 받아 만든 class 의 객체)  의 포인터를 넘겨주면, 기본적인 구현은 따로 건드릴 필요가 없이 알아서 애니메이션 효과가 구현이 된다.

UIPageViewControllerDelegate는 두개의 함수가 정의 되어 있다.

• – pageViewController:didFinishAnimating:previousViewControllers:transitionCompleted:
• – pageViewController:spineLocationForInterfaceOrientation:
  

이름에서 보듯, UIPageViewControllerDelegate 는 애니메이션이 끝났을때, rotation 시 처리 용 함수라 단순히 데이터를 보여주는 본 글에서는 사용을 하지 않는다. (위와 같은 상황에서 처리할 내용이 없다면 사용하지 않아도 상관 없다.)

초간단 프로젝트를 하나 예제로 만들어 보자. UILabel 만 하나 덩그러니 있고, 페이지가 표시 되면서, 책 넘김 효과가 들어가는 예제.
XCode 실행후 File -> New -> Project 로 프로젝트를 하나 만든다. 메뉴를 실행하면 다음과 같이 뜨는데, (XCode 4.3.1 기준)

편의상 간단한 Single View Application은 선택하고,

필요한 값들을 채운다.  아직 까진 기존 XIB 형태가 익숙해서 여기서는 Story Board, Unit Test는 제외 했다.

이렇게 프로젝트를 만들면 기본 App Delegate와 ViewController 하나 만들어 진 상태로 (위와 같이 입력 했다면, TestViewController) 보여지게 된다. 바로 TestViewController에 UIPageViewController를 만들고, 간단한 Content를 보여주는 (앞에 이야기 한대로 페이지만 덩그러니 보여주는... ^^) View Controller를 페이지 넘길때 보여지는 대상으로 만들 예정이다. (왠지 글이 꼬이는... ㅠ.ㅠ )

ContentViewController를 만든다.
Project Navigator에서 TestPageController 에서 마우스 오른쪽 클릭 -> New File... 메뉴를 선택하고,

iOS Cocoa Touch 카테고리에서 Objective-C Class 템플릿 선택.

Class 이름, super class 선택. (여기서는 각각 ContentViewController, UIViewController를 상속)

그리고 만들어진 ContentViewController에 예고 한대로, UILabel 달랑 하나 올려 놓고... ^^
 

소스에 보여줄 Data 변수를 하나 만들고 (여기서는 간단하게 NSString ^^ 실제 앱이라면 이렇게 간단하지는 않겠지만...),  UILabel 변수 생성 후, Outlet 연결 한다. 우선 ContentViewController.h (Italic 체 font가 추가 된 부분)

#import <UIKit/UIKit.h>

@interface ContentViewController : UIViewController

{

    NSString* _mContentString;

    IBOutlet UILabel* _mContentLabel;

}

@property (strong, nonatomic) NSString* mContentString;

@property (strong, nonatomic) UILabel* mContentLabel;

@end

ContentViewController.m 은 편의상 일부분만 표시 하자면...

@implementation ContentViewController

@synthesize mContentString = _mContentString;

@synthesize mContentLabel = _mContentLabel;

... (중략) ...

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    self.mContentLabel.text = self.mContentString;

}

그리고 Outlet연결까지 하면, 

이제 가장 중요한, UIPageViewController 관련 작업이 남아 있다.

TestViewController.h (실제 app이라면 복잡하겠지만, 여기선 max, current page만 저장하도록... ^^)

#import <UIKit/UIKit.h>

@interface TestViewController : UIViewController <UIPageViewControllerDataSource>

{

    UIPageViewController* _mPageViewController;

    int _mCurrentPage;

    int _mMaxPage;

}

@property (strong, nonatomic) UIPageViewController* mPageViewController;

@property (nonatomic) int mCurrentPage;

@property (nonatomic) int mMaxPage;

@end

TestViewController.m 에서 PageViewController 설정 부분을 보면

- (void)viewDidLoad

{

    [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

    self.mCurrentPage = 0;

    self.mMaxPage = 10;

    

    // Page Option 설정.

    NSDictionary *options = 

    [NSDictionary dictionaryWithObject:

     [NSNumber numberWithInteger:UIPageViewControllerSpineLocationMin]

                                forKey: UIPageViewControllerOptionSpineLocationKey];

    

    // Page View Controller 생성.

    self.mPageViewController = [[UIPageViewController alloc] 

                              initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl

                              navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal

                               options: options];

    

    self.mPageViewController.dataSource = self;

    self.mPageViewController.view.frame = self.view.bounds;

    

    

    ContentViewController *initialViewController = 

    [self viewControllerAtIndex:self.mCurrentPage];

    NSArray *viewControllers =  

    [NSArray arrayWithObject:initialViewController];

    

    [self.mPageViewController setViewControllers:viewControllers  

                                     direction:UIPageViewControllerNavigationDirectionForward 

                                       animated:NO 

                                     completion:nil];

    

    [self addChildViewController:self.mPageViewController];

    [self.view addSubview:self.mPageViewController.view];

    [self.mPageViewController didMoveToParentViewController:self];

}

Delegate 와 Delegate와 관련된 함수들은 다음과 같다.

- (ContentViewController *)viewControllerAtIndex:(NSUInteger)index

{

    ContentViewController* contentViewController = [[ContentViewController alloc]initWithNibName:@"ContentViewController" bundle:nil];

    contentViewController.mContentString =[NSString stringWithFormat:@"Page %d",index];

    return contentViewController;

}

// UIPageViewController Delegate 함수들.

- (UIViewController *)pageViewController:

(UIPageViewController *)pageViewController viewControllerBeforeViewController:

(UIViewController *)viewController

{

    if (self.mCurrentPage == 0) {

        return nil;

    }

    self.mCurrentPage--;

    return [self viewControllerAtIndex:self.mCurrentPage];

}

- (UIViewController *)pageViewController:

(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController

{

    if (self.mCurrentPage >= self.mMaxPage -1) {

        return nil;

    }

    self.mCurrentPage++;

    return [self viewControllerAtIndex:self.mCurrentPage];

}