[Crecker,iOS] Swift ViewPager 구성

안드로이드에는 기본적으로 ViewPager가 있다. 

https://github.com/xmartlabs/XLPagerTabStrip

하지만, 이와 같은 형태는 iOS에 없다. 그래서 구현을 해주거나, gif와 같이 XLPagerTabStrip Library를 사용하거나,

HIG에 맞게 사용하는 방법이 있다 - Segmented Control

 

그런데 보니까 Crecker에 구현해야 하는 기능들을 거의 마무리해가고 있는데,

이상한 놈을 하나 만났다.

앱잼중이라면 중간에 선을 빼는게 어떻겠냐 하겠지만 지금은 앱잼중이 아니기도 하고

뭔가 할 수 있겠다는 (?) 그런게 있었나보다. 

그런데 하다보니 그렇지 않았다.

 

이유 : 

1) 신청 - 배정 - 검토 - 완료 사이에 선

2) 밑에 밑줄 저거 왜 평행 사변형...?

 

이러한 이유로 보통 저런 뷰를 커스텀할때 사용하는 Segmented Control을 사용하다가 포기했다.

대신 ,CollectionView를 Size에 맞게 넣어주기로 했다.

왜냐면 CollectionViewCell은 Cell 내 Custom이 비교적 쉬우니까.

 

출처 : 1) https://www.youtube.com/watch?v=rRhJGnSmEKQ&t=738s

          2) https://www.youtube.com/watch?v=XgRbj4YeG9I

 

아 그런데 예제코드도 잘 안된다. 하지만 일단 침착하고

유튜브랑 같이 했는데도 안되는 이유는 버전이 다르기 때문이다.

결론적으로 다시 말하면 SceneDelegate 때문인데, SceneDelegate를 지우고 >> (https://life-shelter.tistory.com/316)

버전을 낮추면 예제코드를 따라 할 수 있다. 

 

그렇지만 나의 의견인데, 이렇게 하면 회사에서 혼날것 같다. 아닌가..이렇게 해야되는건가...

일단 취할것을 취해서 자기 프로젝트에 적용을 하기로.

 

본질은 이거다. CollectionView를 만들기. 그러니까, 혹시나 유입될 여러분들도 본질을 잃지 마십쇼.

나는 중간에 코드 뜯다가 본질을 조금 잃었다.

 

MenuBar를 하나 만들어요. 이놈이 바로 CollectionView.

class MenuBar: UIView, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    
    lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = UIColor.rgb(red: 230, green: 32, blue: 31)
        cv.dataSource = self
        cv.delegate = self
        return cv
    }()
    
    let cellId = "cellId"
    let imageNames = ["home", "trending", "subscriptions", "account"]
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        collectionView.register(MenuCell.self, forCellWithReuseIdentifier: cellId)
        
        addSubview(collectionView)
        addConstraintsWithFormat("H:|[v0]|", views: collectionView)
        addConstraintsWithFormat("V:|[v0]|", views: collectionView)
        
        let selectedIndexPath = IndexPath(item: 0, section: 0)
        collectionView.selectItem(at: selectedIndexPath, animated: false, scrollPosition: .bottom)
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 4
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! MenuCell
        
        cell.imageView.image = UIImage(named: imageNames[indexPath.item])?.withRenderingMode(.alwaysTemplate)
        cell.tintColor = UIColor.rgb(red: 91, green: 14, blue: 13)
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: frame.width / 4, height: frame.height)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

그리고 ViewController에서 

   let menuBar: MenuBar = {
        let mb = MenuBar()
        return mb
    }()
    
    private func setupMenuBar() {
        view.addSubview(menuBar)
        view.addConstraintsWithFormat("H:|[v0]|", views: menuBar)
        view.addConstraintsWithFormat("V:|[v0(50)]", views: menuBar)
    }
    

그리고 ViewDidLoad() 내에

setupMenuBar()

를 선언해주면 되는 구조이다. 세부 코드는 깃헙에 업로드!