XLPagerTabStrip 적용해보기

3 답변 글타래를 보이고 있습니다
  • 글쓴이
    • iJoom
      참가자
      • 글작성 : 8
      • 답글작성 : 1
      • XLPagerTabStrip pod 적용해보기
      • XLPagerTabStrip
      • 이쁘고 적용하기도 쉽고, 커스텀하기도 편함
      • api 작동원리를 이해하고, native언어로 구현해보는 것도 좋은 공부법

      다음과 같이 pod 설치

      pod 'XLPagerTabStrip', '~> 9.0'

      import XLPagerTabStrip

      Main 뷰컨과 ChildeViewController만든 후 import XLPagerTabStrip 해준다.

      • ViewController에  UIViewController를 지워버리고 다음과 같이 ButtonBarPager를 상속 및 적용한다.
      class ViewController: ButtonBarPagerTabStripViewController
      
      
      • StoryBoard에 CollectionView를 추가해주고 ButtonBarView Class를 상속시켜준다.
      • StoryBoard에 ScrollView를 원하는 사이즈에 맞게 추가해주고 AutoLayout을 잡아준다. (CollectionView도 마찬가지)

      스크린샷 2020-04-03 오후 4 24 48

      ChildViewController에 다음과 같이 코드 추가

      • IndicatorInfoProvider는 PagerTap에 나올 이름과 뷰컨을 재활용해서 화면에 보여줌
      • func indicatarInfo는 각 화면에 맞는 Label값을 인디케이터 이름으로 리턴
      import UIKit
      
      import XLPagerTabStrip
      
      class ChildViewController: UIViewController, IndicatorInfoProvider {
      
        var childNumber: String = ""
        @IBOutlet weak var childNameLabel: UILabel!
      
        override func viewDidLoad() {
      
          super.viewDidLoad()
      
          childNameLabel.text = childNumber
      
        }
      
        override func didReceiveMemoryWarning() {
      
          super.didReceiveMemoryWarning()
      
        }
      
        func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
      
          return IndicatorInfo(title: "\(childNumber)")
      
        }
      }
      
      

      • MainViewController에서 다음과 같이 Paging될 화면과 뷰컨 재활용으로 화면 표시
      • 꼭 viewControllers 함수를 오버라이딩해서 뷰컨 표시해줘야함, 그렇지 않으면 스레드에러 (Why?표시할 뷰컨 내용이 스크롤뷰에 나오지 않기 때문)
      • ChildViewController 의 내용은 메인뷰컨의 스크롤뷰에 적용되어 표시됨
      override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
      
        let child1 = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "ChildVC") as! ChildViewController
      
        child1.childNumber = "One"
      
        let child2 = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "ChildVC") as! ChildViewController
      
        child2.childNumber = "Two"
      
        return [child1, child2]
      
      }
      
      

      1


      • 실제 프로젝트에서의 사용

      2

      • 이 게시글은 야곰에 의해 4 years, 7 months 전에 수정됐습니다. 이유: 깨진 코드 수정
    • 멍단비
      참가자
      • 글작성 : 10
      • 답글작성 : 98

      고생하셨습니다~ 중간중간에   문자가있어서 약간? 깨지긴 하네요 ㅎㅎ 잘봤습니다.

    • 야곰
      키 마스터
      • 글작성 : 37
      • 답글작성 : 579

      깨진 코드를 수정했습니다. 코드가 깨진 이유를 보니 인라인 코드 (백틱 사이에 코드를 넣는 것, 요것이 인라인 코드형식) 형식을 여러줄에 사용하는 분들이 계시네요. 여러줄이 아니라 한 줄을 위 아래로 백틱을 넣는 경우도 있고요. 어떤 마크다운 에디터에서 저렇게 가능한지 모르겠지만 종종 볼 수 있어서 놀랍습니다. 여기서는 그게 안되어서 깨진거 같아요.

    • 민수 김
      참가자
      • 글작성 : 0
      • 답글작성 : 1

      안녕하세요,

      collectionview 를 추가하는 이유는 무엇일까요?

      그리고 저는 위 코드대로 했는데 상단 부분이 짤려서 나오는걸까요? ㅠㅠ 오토레이아웃을 잘못한걸까요?

3 답변 글타래를 보이고 있습니다
  • 답변은 로그인 후 가능합니다.

logo landscape small

사업자번호 : 743-81-02195
통신판매업 신고번호 : 제 2022-충북청주-1278 호
고객센터 : 카카오톡채널 @yagom