woong's

IOS Xcode Swift PageViewController 사용하기 본문

Develop/IOS

IOS Xcode Swift PageViewController 사용하기

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

IOS Xcode Swift PageViewController 사용하기


안드로이드에서는 ViewPager 라고 좌우의 화면이나 위젯을 미리 로드해 스와이프시 자연스럽게

화면이 구성되어 넘어 가도록 하는 위젯이 있습니다. 아이폰을 개발하면서 아이폰에도 이런것이 있지 않을까

싶어서 찾아보니 pageViewController 라는 위젯이 있었습니다. 간단하게 사용법을 정리해 보려 합니다.




화면은 위와 같이 구성을 했습니다. 화면은 ViewController , PageViewController , ContentViewController 이렇게 세개의 화면이 있습니다.

ContentViewController < PageViewController 안에 구성 되며 ContentViewController 화면이 여러개가 구성 됩니다.

PageViewController < ViewController 안에 구성 됩니다 . 이런 구조로 만들어 지게 되겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
import UIKit
 
class ContentViewController: UIViewController {
    
 
    @IBOutlet var labelTitle: UILabel!
    @IBOutlet var imgageView: UIImageView!
    
    var pageIndex : Int!
    var titleText : String!
    var imageFile : String!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.imgageView.image = UIImage(named: self.imageFile)
        self.labelTitle.text = self.titleText
    }
    
}
 
cs


ContentViewController 를 구성후에 스토리보드에서 연결 작업을 진행 합니다.




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
 
import UIKit
 
class ViewController: UIViewController , UIPageViewControllerDataSource {
 
    var pageViewController : UIPageViewController!
    var pageTitles : NSArray!
    var pageImages : NSArray!
    
    override func viewDidLoad() {
        super.viewDidLoad()
 
        self.pageTitles = NSArray(objects: "첫번째 페이지" , "두번째 페이지""세번째 페이지" , "네번째 페이지""다섯번째 페이지")
        self.pageImages = NSArray(objects: "img01" , "img02" , "img03" , "img04" , "img05")
        
        self.pageViewController = self.storyboard?.instantiateViewControllerWithIdentifier("PageViewController") as! UIPageViewController
        
        self.pageViewController.dataSource = self
        
        let startVC = self.viewControllerAtIndex(0) as ContentViewController
        let viewControllers = NSArray(object: startVC)
        
        self.pageViewController.setViewControllers(viewControllers as? [UIViewController] , direction: .Forward, animated: true, completion: nil)
        self.pageViewController.view.frame = CGRectMake(0,30,self.view.frame.width, self.view.frame.height - 100)
        
        self.addChildViewController(self.pageViewController)
        self.view.addSubview(self.pageViewController.view)
        
    }
    
    
    /**
    * viewPageController 구성 함수
    */
    func viewControllerAtIndex (index : Int) -> ContentViewController {
        
        let vc : ContentViewController = self.storyboard?.instantiateViewControllerWithIdentifier("ContentViewController") as! ContentViewController
        
        vc.pageIndex = index
        vc.imageFile = self.pageImages[index] as! String
        vc.titleText = self.pageTitles[index] as! String
        
        print(">>> : " ,vc.titleText)
        
        return vc
    }
    
    
    
    /**
    * 이전 ViewPageController 구성
    */
    func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
        
        let vc = viewController as! ContentViewController
        var index = vc.pageIndex as Int
 
        if( index == 0 || index == NSNotFound) {
            return nil
        }
        
        index--
        
        return self.viewControllerAtIndex(index)
    }
    
    
    /**
    * 이후 ViewPageController 구성
    */
    func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
        
        let vc = viewController as! ContentViewController
        
        var index = vc.pageIndex as Int
        
        if( index == NSNotFound) {
            return nil
        }
        
        index++
        
        if (index == self.pageTitles.count) {
            return nil
        }
        
        return self.viewControllerAtIndex(index)
    }
    
    
    /**
    * 인디케이터의 총 갯수
    */
    func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
        return self.pageTitles.count
    }
    
    
    /**
    * 인디케이터의 시작 포지션
    */
    func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {
        return 0
    }
 
}
 
 
 
cs


코드를 설명 드리겠습니다. viewDidLoad 에서 ContentViewController 에 들어갈 데이터를 정의하고 스토리 보드에 있는

pageViewController 를 불러와 화면을 정의하고 처음나타날 ContentViewController를 설정 ViewController에 추가하는 작업을 진행 했습니다.

위와같이 하면 처음의 화면이 나타나게 되고 스와이프시 viewControllerBeforeViewControllerviewControllerAfterViewController 로 함수가 호출 됩니다.

함수가 호출되면서 이전과 , 이후의 화면을 미리 로드하는것을 볼수 있습니다. 최하단의 함수는 인디케이터를 구성하기 위한 함수 입니다.

위와같이 구성하면 아래와 같은 화면을 볼수 있습니다. 위 코드로 모든코드를 대체할수 없기에 샘플코드를 첨부하도록 하겠습니다.


Swift PageViewController Sample







Comments