UIScrollView와 UIPage Control로 공식 트위터 앱의view를 만들어 봤어요.

개요

최근에는 Swift로 애플리케이션을 제작할 계획이었으나 마침내 실행에 옮겼다.그럼 제작된 앱의 메인 화면은 어떻게 하나요?이렇게 되면 테이블로view를 전환하면 되지 않을까 싶어요. 그러면 공식 트위터처럼 교환 장치로 전환하면 멋있을 것 같아서 하기로 했어요.

ScrollView

먼저 ScrollView를 정의한 후 Moromoro를 설정합니다.

class ViewController: UIViewController, UIScrollViewDelegate {

    let BETWEEN_WIDTH = CGFloat(5)
    let NUMPAGES = 3
    var barColor = UIColor(red: CGFloat(0.18), green: CGFloat(0.80), blue: CGFloat(0.44), alpha: CGFloat(1.0))
    var pageControl = UIPageControl()
    @IBOutlet weak var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.navigationController?.navigationBar.barTintColor = barColor
        self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()
        self.navigationController?.navigationBar.titleTextAttributes = 
            [NSForegroundColorAttributeName: UIColor.whiteColor()]

        scrollView.contentSize = CGSizeMake((self.view.frame.size.width + BETWEEN_WIDTH * 2)
             * CGFloat(NUMPAGES), self.view.frame.size.height)

        scrollView.pagingEnabled = true // ページするオプションを有効にするための設定
        scrollView.scrollEnabled = true
        scrollView.directionalLockEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = true
        scrollView.bounces = true
        scrollView.scrollsToTop = false
        scrollView.delegate = self

PageControl

위의 ScrollView도 현재 페이지를 표시하기 위해 PageControl을 설정한 페이지와 유사합니다.

        self.navigationItem.titleView = pageControl

다음 설정을 통해 페이지를 전환할 때 PageControl도 변경합니다

    func scrollViewDidScroll(scrollview: UIScrollView) {
        var pageWidth : CGFloat = self.scrollView.frame.size.width
        var fractionalPage : Double = Double(self.scrollView.contentOffset.x / pageWidth)
        var page : NSInteger = lround(fractionalPage)
        self.pageControl.currentPage = page;
    }

navigationBar에 페이지 컨트롤을 설정하고 싶어서 위의 느낌으로 만들었어요.

ScrollView에 View 추가

        var redView = UIView(frame: CGRect(x: BETWEEN_WIDTH, y: 0, 
            width: self.view.frame.size.width, height: self.view.frame.size.height))
        redView.backgroundColor = UIColor.redColor()
        scrollView.addSubview(redView)

        var blueView = UIView(frame: CGRect(x: self.view.frame.size.width + BETWEEN_WIDTH * 3, y: 0, 
            width: self.view.frame.size.width, height: self.view.frame.size.height))
        blueView.backgroundColor = UIColor.blueColor()
        scrollView.addSubview(blueView)

        var yellowView = 
            UIView(frame: CGRect(x: ((self.view.frame.size.width + BETWEEN_WIDTH * 3) * 2) - BETWEEN_WIDTH, 
            y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
        yellowView.backgroundColor = UIColor.yellowColor()
        scrollView.addSubview(yellowView)

        self.view.addSubview(scrollView)
    }

배치

이렇게 하면 스크롤 상자와View가 대응하지 않아서view와view 사이에 공간을 비워야 하기 때문에 설정이 필요합니다.Objective-C라면 코드로 쉽게 완성할 수 있을 것 같지만 swift 말과는 느낌이 조금 다르다.어쩔 수 없이 스토리보드에서만 설정해야 돼.
먼저 ScrollView의 크기를 아이폰6 등 다양한 화면으로 설정했다.

그런 다음 ScrollView의 화면 크기를 설정합니다.아래와 같다.

이 이미지의 ScrollView입니다.프레임을 적절하게 설정할 필요가 있었지만 진행하지 못했지만 스토리보드에서 다음과 같이 설정할 수 있다.

그리고 Constrain to margins 항목에 대한 검사를 취소하는 것도 잊지 마십시오.왼쪽과 오른쪽의 너비 설정을 적당히 변경하세요.

실행 결과

이런 느낌으로 각view 사이에 공백을 설정합니다:)

참조 링크

UIScrollView - 스크롤 클립 공백: http://cocoadays.blogspot.jp/2010/09/uiscrollview.html