woong's

IOS Xcode ObjectC PageViewController 사용하기 본문

Develop/IOS

IOS Xcode ObjectC PageViewController 사용하기

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

IOS Xcode ObjectC PageViewController 사용하기


IOS Xcode Swift PageViewController 사용하기

이전 포스트에서 swift로 사용하는 방법에 대해서 알아보았습니다. objectC 로 시도해 보면선 실제로

프로젝트에서 사용해볼만한 메인화면정도를 만들어 보려 합니다. 모바일 UI/UX를 보면 메뉴에 카테고리가

있고 좌우로 스와이프해서 서브 화면을 넘기는 화면을 많이 사용하는것 같습니다. 그와 비슷한 화면을 만들어

보려 합니다.


1. 스토리 보드 화면 구성




메인화면은 위와 같습니다. 검정부분은 카테고리 영역 , 아래는 스와이프를 통해 넘길수 있는 영역입니다.

이포스트는 pageViewController 를 작성하기 위한 포스트 이기때문에 카테고리영역등 불필요한 부분은

따로 작성하지 않을 예정 입니다. pageViewController 에 focus를 두어 작성해 보겠습니다.


위와 같이 메인화면을 구성후 스와이프 영역에 들어갈 viewController를 생성합니다.





xib로 화면을 구성하였으며, 화면내부에는 글자로 표시하여 어떤화면인지 확인할수 있게 해두었습니다.

클래스 안에는 코드가 없습니다. 지금은 별볼일 없는 화면이지만 이런 화면이 틀이 갖추어지고 내부가

채워 지면 큰 역할을 하게 되는것 같습니다.


pageViewController 의 인덱스를 관리 하기위해서 데이터 비교를 통해서 인덱스를 관리 합니다.

예를 들어 first , Second , Third 의 카테고리가 세개가 있으면 이화면이 몇번째 인덱스인지를 알기위해서

화면에 데이터를 넘겨 주어 나중에 인덱스를 알기 위해서 비교를 합니다. 그러기 위해서 pageViewController

에 들어갈 화면을 관리할수 있는 Controller를 작성해야 합니다.


1
2
3
4
5
6
7
8
9
 
#import <UIKit/UIKit.h>
 
@interface PageViewController : UIViewController
 
@property (strong , nonatomic) NSString *name;
 
@end
 
cs


위와 같이 하나 통일해서 사용할수있는 클래스를 만들었습니다.

이제 본격적으로 ViewController를 작성할 차례 입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
#import <UIKit/UIKit.h>
#import "FirstViewController.h"
#import "SecondViewController.h"
#import "ThirdViewController.h"
 
@interface ViewController : UIViewController <UIPageViewControllerDataSource> {
    
    NSArray *categotyList;
    UIPageViewController *pageViewController;
    
    FirstViewController *firstViewController;
    SecondViewController *secondViewController;
    ThirdViewController *thirdViewController;
    
}
 
@property (strong, nonatomic) IBOutlet UIView *viewPager;
 
@end
 
cs


헤더를 작성 하였습니다. 

categoryList 는 카테고리 메뉴를 저장 할수 있는 List 입니다.

pageViewController 를 화면을 연결한 변수를 작성하였고 , pageViewController 에 들어갈

First , Second , Third 화면을 작성하였습니다.


하단의 viewPager View는 스토리보드 하단의 회색영역입니다. 스와이프 화면을 연결 하였습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
#import "ViewController.h"
 
 
@interface ViewController ()
 
@end
 
@implementation ViewController
 
 
 
- (void)viewDidLoad {
    [super viewDidLoad];
 
    //데이터 초기화
    [self initData];
}
 
 
/**
 * 데이터 초기화
 */
- (void) initData {
 
    categotyList = [NSArray arrayWithObjects: @"morning",@"Morning",@"Afternoon", nil];
    
    //PageViewController 초기화
    [self initPageViewController];
}
 
 
/**
 * PageViewController 초기화
 */
- (void) initPageViewController {
    
    //pageViewController 생성
    pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:
                          UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
    pageViewController.dataSource = self;
    
    //pageViewController 에 첫번째 화면 초기화
    UIViewController *startingViewController = [self viewControllerAtIndex:0];
    NSArray *viewControllers = @[startingViewController];
    [pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
    
    //pageViewController 사이즈 조정
    pageViewController.view.frame = self.viewPager.bounds;
    
    //pageViewController 화면 viewController 초기화
    [self addChildViewController: pageViewController];
    [self.viewPager addSubview:pageViewController.view];
    [pageViewController didMoveToParentViewController:self];
    
}
 
 
/**
 * 해당 인덱스 추출
 */
- (NSUInteger)indexOfViewController:(PageViewController *)viewController {
    return [categotyList indexOfObject:viewController.name];
}
 
 
/**
 * 해당 인덱스의 화면 반환
 */
- (UIViewController *) viewControllerAtIndex:(NSUInteger)index {
    
    if (([categotyList count] == 0|| (index >= [categotyList count])) {
        return nil;
    }
    
    PageViewController *controller;
    
    if(index == 0) {
        controller = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
    } else if (index == 1) {
        controller = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
    } else {
        controller = [[ThirdViewController alloc] initWithNibName:@"ThirdViewController" bundle:nil];
    }
    
    controller.name = [categotyList objectAtIndex:index];
    
    return controller;
}
 
 
/**
 * 이전 페이지 로드
 */
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController {
    
    
    NSUInteger index = [self indexOfViewController:(PageViewController *)viewController];
    index--;
    
    return [self viewControllerAtIndex:index];
}
 
 
/**
 * 다음 페이지 로드
 */
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {
    
    NSUInteger index = [self indexOfViewController:(PageViewController *)viewController];
    index++;
    
    return [self viewControllerAtIndex:index];
}
 
 
@end
 
 
 
cs


initPageViewController 함수를 보면 PageViewController 를생성하고 안들 들어갈 viewController 를 불러와서 넣어주고

회색영역에 넣어주는 형태 입니다. 


indexOfViewController 화면은 해당 인덱스의 화면을 반환해주는 함수 입니다.


pageViewControllerDataSource를 상속 받으면 하단의 Before , After 함수 이벤트를 이용 할수 있습니다.

첫번째 화면에서 스와이프를 하면 이벤트가 들어오게 됩니다.

이벤트가 들어오면 viewController 에서 에서 데이터를 통해서 인덱스를 반환하게 됩니다. 반환된 인덱스의 화면을 넣어주어

스와이프 효과를 나타내게 됩니다.


ObjectC PageViewController Sample






Comments