[UIKit] UIPageControl을 사용해서 UIView 전환하기 (feat. 다양한 방식의 사고를 해보다)

📱 내가 담당한 뷰

나는 아래와 같은 뷰를 담당했고, 해당 뷰는 스크롤이 독특한 방식으로 적용된다. 어떤 방식이냐면, 그 아래 화면처럼, 일정 스크롤이 되면 쇽! 자동으로 넘어가야했다.

이렇게 넘어가야했다.

design by. 안은지 (Berry)

내가 구현해야할 화면은, 이 두 화면이고, 아래로 내리면, 오른쪽화면이, 위로 올리면 왼쪽화면이 나와야했다. 해당 뷰를 만들기 위해서 다양한 방식에 대해서 고민했다.

어떻게 구현할 수 있을까?

다양한 방식을 생각했다. (사실 정말 간단한 방식이 있었지만, 해당 방식을 접해보지 못했던 나는 여러가지 갈래 길에서 헤맸던 것 같다.)

 

1️⃣ 첫번째 생각 - PageControl 이라는 녀석을 사용해보자

왼쪽의 이미지가 내가 처음에 생각했던 구성이다. 두개의 UIView를 PageControl 기능을 사용해서 쇽쇽 넘겨주는 것이다.

근데, 팀원에게 물어보니까, “해당 팀원은 PageControl 기술은 UICollectionView내부에서만 작동되는 기능이 아닌가?” 싶어서 이렇게 하게 되면, 오른쪽 그림처럼, 커다란 UICollectionView가 한번 더 생기고, 그 안에 UIView와 UICollectionview 등등 뷰가 굉장히 무거워졌다.

이렇게 하게되면 치명적인 단점이 생기기 떄문에 해당 방식을 사용하지 못할 것 같았다.

해당 두가지 이유때문이었다.

Network 작업을 시작하면서 API연동을 시작하면 데이터의 전달에 문제가 생길것이라는 말에 너무 공감했다. 맞아.. 쉽지 않겠다… 대체 몇번 reload를 해줘야하는거야…. 안돼안돼…

 

2️⃣ 그래서 생각한 두 번째 방법, 일정수준 scrollView가 움직이면, 위로 휙! 올려버리기

해당 방식처럼 구현하기 위해서는, 사용자가 scrollView를 얼만큼 움직였는지 좌표값을 찍다가, 일정 수준의 좌표값을 넘어가면 contentview2 (혹은 scrollview의 맨아래)으로 구현하는 것이다.

해당 방식을 고려해두고 또,, 다른방식이 생각났다.

 

3️⃣ 제스쳐 인식을 통해서 뷰 전환해주기

그냥 우리가 일반적으로 사용하는 위로 올리는 제스쳐를 사용해서 뷰전환을 해주는 방법이다. 애니메이션으로 스르르륵 하면서 스크롤 아래 있는 두번째 뷰가 올라오게 구현하는 방식이다… 흠.. 상상했을떄 아주 어색할 것 같았다.

2️⃣와 3️⃣의 방식을 비교했을때, 더 나은 방식은 2️⃣번 방식 같았다. 이유는 아래와 같다.

• ScrollView를 사용하기 때문에 스크롤이 자연스럽고, PageControl을 사용하는 것과 가장 비슷하게 구현할 수 있다.
• 제스쳐로 화면을 이동시키는 것은, 일반적으로 스크롤할때 하는 액션이 아니므로, UX가 구려질 위험이 있다.

그래서 이렇게 2️⃣번으로 채택했다. (했었,,,다…)

 

✅ 그래서 어떤 방식을 채택했나요?

위에서 말한 이유를 기반으로 2️⃣번으로 구현하려고 하였으나, PageControl에 대해서 궁금해진 나는 더 구글링을 해보기로 했다.

그러던 와중, PageControl은 UICollectionView 내부에서 paging 기술이 사용되는 것이 아니라, UIPageControl은 UIScrollView에서도 주로 사용한다고 하는 것이다!

그니까, 자세히 알아보면, ,, 아래와 같은 인스타그램 사진 넘기는 기능을 구현한다 치자.

CollectionView 내부에서 paging 구현해주기

해당 이미지들을 모두 CollectionView 내부에 넣어주고 그 안에서 paging 기능을 구현해주는 방식이다. 원래,, 이미지를 넘길때 이 방식을 많이 사용한다고 한다.

이미지를 넘기는 방식에도 두가지가 있는데, 그 두가지 방식은 아래와 같다.

💡 코드 참고 - https://eunjin3786.tistory.com/203

 

scrollViewWillEndDragging 메서드 이용해서 구현하기

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard let layout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    
    let cellWidthIncludingSpacing = layout.itemSize.width + layout.minimumLineSpacing
    let estimatedIndex = scrollView.contentOffset.x / cellWidthIncludingSpacing
    let index: Int
    if velocity.x > 0 {
        index = Int(ceil(estimatedIndex))
    } else if velocity.x < 0 {
        index = Int(floor(estimatedIndex))
    } else {
        index = Int(round(estimatedIndex))
    }
    
    targetContentOffset.pointee = CGPoint(x: CGFloat(index) * cellWidthIncludingSpacing, y: 0)
}

 

Custom Layout 구현하기

class CustomCollectionViewFlowLayou: UICollectionViewFlowLayout {

    private var previousOffset: CGFloat = 0
    private var currentPage: Int = 0

    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        guard let collectionView = collectionView else {
            return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        }

        let itemsCount = collectionView.numberOfItems(inSection: 0)

        // Imitating paging behaviour
        // Check previous offset and scroll direction
        if previousOffset > collectionView.contentOffset.x && velocity.x < 0 {
            currentPage = max(currentPage - 1, 0)
        } else if previousOffset < collectionView.contentOffset.x && velocity.x > 0 {
            currentPage = min(currentPage + 1, itemsCount - 1)
        }

        // Update offset by using item size + spacing
        let updatedOffset = (itemSize.width + minimumInteritemSpacing) * CGFloat(currentPage)
        previousOffset = updatedOffset

        return CGPoint(x: updatedOffset, y: proposedContentOffset.y)
    }
}

이렇게 구현한다고 한다. 생각보다 좀 복잡.. 하다. 왜냐면 Swift 초보인 나에게 CollectionView도 조금 복잡하니까!!

찾아보다 보니, 이런 사진 넘기는 방식에도 UIScrollView를 사용한 방식도 있었다.

 

✅ UIScrollView에서 UIPageControl을 사용하자!

💡 참고 - https://fomaios.tistory.com/entry/Swift-스크롤뷰로-이미지-페이지처럼-넘기기Image-Paging-with-UIScrollView

해당 블로그를 보면, UIScrollVIew를 사용해서 PageControl 기능을 구현하는 방식이 나온다. 이 방식은, 내가 첫번째로 생각했던 방식과 비슷 아니!! 똑같다!!

이방식!!

✅ 그래서 나는, 해당 방식을 우선적으로 채택해보기로 했다. 스크롤을 인식해서 뷰를 넘기는 방식도 조금 부자연스럽다고 생각했었는데, 내장되어있는 UIPageControl 을 사용해서 구현할 수 있다면 더 자연스러운 화면 이동이 가능할 것 같았다!

 

구현

1. 우선 뷰에서 필요한 프로퍼티들을 모두 만들어주었다.

private let pageControl: UIPageControl = {
  let pagecontrol = UIPageControl()
  pagecontrol.isHidden = true
  return pagecontrol
}()
private lazy var scrollview: UIScrollView = {
  let scrollview = UIScrollView()
  scrollview.contentSize = CGSize(width: UIScreen.main.bounds.width,
                                  height: UIScreen.main.bounds.height * CGFloat(self.imagenames.count))
  scrollview.showsHorizontalScrollIndicator = false
  scrollview.showsVerticalScrollIndicator = false
  scrollview.isScrollEnabled = true
  scrollview.isPagingEnabled = true
  scrollview.bounces = false
  return scrollview
}()
private let uiview1: UIView = {
  let view = UIView()
  view.backgroundColor =  .red
  return view
}()
private let uiview2: UIView = {
  let view = UIView()
  view.backgroundColor = .blue
  return view
}()
private lazy var contentviews: [UIView] = [self.uiview1, self.uiview2]

• 나는 두 페이지만 만들어 줄 것이기 때문에, pagecontrol이 보일 필요가 없다. 그래서 isHidden에 true를 넣어주었다.
  • pageControl 이란 progress bar? 같은 것이다. (아래 점점점 사진)

• scrollView에서는 contentSize를 뷰 두개 합친 값으로 만들어주었다. (위아래 스크롤 할 수 있도록 height를 두배로 늘려주었다.)
• scrollview에서 scroll indicator는 모두 숨겨주었다.
• isScrollEnabled 와 isPagingEnabled 를 모두 true로 해주어야 paging 스크롤이 가능하다.
• 그리고 나는 스크롤이 된 마지막 화면에서 bounce가 필요없기에 bounces를 false로 주었다.
• 마지막으로 내가 pageControl할 uiview두 개를 contnetviews 배열에다가 넣어주었다. lazy var로 선언한 이유는, uiview가 모두 생성되고 나서 해당 배열이 생성되어야하기 때문에 lazy를 사용해주었다.

1. 내가 원하는 uiview 수 만큼 addsubview해주기

private func addContentScrollView() {
    for i in 0..<2 {
        let view = contentviews[i]
        view.frame = UIScreen.main.bounds
        view.frame.origin.y = UIScreen.main.bounds.height * CGFloat(i)
        scrollview.addSubview(view)
    }
}

내가 원하는 뷰들 수 만큼 addsubview를 해준다. 나는 두개만 필요하기 때문에 2를 넣어주었다. addsubview해주는 뷰들의 크기는 화면 전체를 감쌀수 있는 크기로 넣어주었다. 그리고 해당 뷰가 이제 넘어갈 y좌표의 시작점을 지정해주어야하는데, 그 시작점은 height에 index를 곱해서 구할 수 있다.

2. 페이지 컨트롤 갯수 구해주기

private func setPageControl() {
    pageControl.numberOfPages = 2
}

 

이렇게 구현하면, 아래와 같이 내가 원하는 화면을 구현할 수 있다.

 

😉 마무리

하나의 뷰를 만들기 전에 가장 많은 고민을 했던 경험이었다. 총 네가지의 경우를 생각해내면서, 어떻게 구현해나갈지 고민하는 시간을 가지니까, UIKit에 대한 이해도 더 깊게 되는 느낌이었다. ”CollectionView 내부의 Paging기술을 사용해볼까?”, “그냥 UIView에 Paging 개념을 넣을 수는 없을까?” 등 다양한 생각을 하고, 해당 뷰를 직접 그려보면서 뷰를 바라보는 시각을 길렀던것같다.

비록 내가 생각한 방식중에 가장 처음에 생각한 방식으로 채택되었고, 구현은 생각보다 엄청 간단했지만, 이렇게 많은 생각을 해봤던 것에 대해서는 후회되지 않았다. 조금 더 내가 왜 이렇게 개발했는지에 대해서 고민하는 시간이 되었달까?

그리고 팀원이 UICollectionView 내부의 Paging 기술을 사용해야한다고 알려주었었는데, 그렇지 않았고 내가 처음 !! 막연하게 생각했던 방식이 맞았었다. 이 방식도 가능하다고 팀원에게 얼른 알려주고싶다! 그 팀원에게 많은 도움을 받았었는데, 이번 기회로 나도 작지만, 한가지라도 더 알려줄 수 있는 시간이 될 수 있을 것 같아서 기뻤다. 더 성장하자!

---

참고 자료

https://fomaios.tistory.com/entry/Swift-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%B7%B0%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%B2%98%EB%9F%BC-%EB%84%98%EA%B8%B0%EA%B8%B0Image-Paging-with-UIScrollView

[iOS/UI] Swift 스크롤뷰로 이미지 페이지처럼 넘기기(Image Paging with UIScrollView)

https://ios-development.tistory.com/397

[iOS - swift] PageControl, UIScrollView, 안내화면

https://eunjin3786.tistory.com/203

[UICollectionView] Paging / Carousel / Snap Collectionview with header, footer