IOS) NastedScrollView를 만들어 보자

안녕하세요 후르륵짭짭 입니다!

정말 오랜만에 IOS 글을 작성하게 됐습니다.

그 동안 취업 준비와 Vapor에 대해서 공부 했어서 IOS 공부를 좀 덜 했습니다.

 

** NastedScrollView란?? **

NastedScrollView는 ScrollView안에 또 ScrollView가 있는 형태를 말 합니다.

이렇게 우리가 흔히 볼수 있는 형태를 말합니다.

 

** 구현하기 **

일단 전체 화면에 ScrollView를 만들어 줍니다! 

그리고 아래 처럼 StackView안에 ContainerView를 만들어 줍니다.

ContainerView는 새로운 ViewController를 담을 수 있는 것 입니다.

예전에 PageViewController 생성에 대해 설명한 적이 있는데, 그 부분을 참고 해주셔도 될 것 같습니다.

hururuek-chapchap.tistory.com/68?category=909178

IOS) PageViewController로 화면전환을 만들어보자!

 

위에 처럼 UI를 구성했으면 ContainerView 내부에 CollectionView를 생성 해줍니다. 

CollectionView를 생성했으면 당연히 클래스도 생성해줘야겠죠?

위에 처럼 해줍니다!!

그리고 위에 처럼 코드를 생성 해줬다면 이제 CollectionView와 ViewController와 아울렛을 연결 시켜줍니다.

(새롭게 알게 된 사실은! ViewController도 재사용이 된다는 것 입니다. )

 

이렇게 하면 이제 NastedScrollView가 완료가 됩니다! 

너무 급하게 넘어간 것이 있는데,,, 이 부분은 죄송합니다.

(ScrollView와 CollectionView의 흔한 내용이라서 대충 넘어간 부분 죄송합니다. 댓글을 달아주시면 더 깊에 알려드리겠습니다.)

 

** ContainView와 Segue의 관계 **

일반적으로 Segue는 사용자가 지정했을 때, 작동합니다.

하지만 ContainView 같은 경우에는 ViewController에서 viewDidLayoutSubviews() 시점에서 자동으로 연결 됩니다!

왜냐하면 ContainerView도 하나의 ViewController이기 때문에 바로 연결 해서 보여줘야하기 때문입니다.

따라서 ContainerView와 ViewController가 연결되어 있다면 자동으로 Segue가 작동 된다고 생각하시면 됩니다.

 

//ViewController

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
                
        if segue.identifier == "one"{
            print("one connected with ViewController")
            guard let vc = segue.destination as? SampleViewController else {return}
            
            vc.viewModel.updateType(type: .one)
            
        }
        else if segue.identifier == "two"{
            
            print("two connected with ViewController")
            
            guard let vc = segue.destination as? SampleViewController else {return}
            
            vc.viewModel.updateType(type: .two)
            
        }

    }
    
//결과
one connected with ViewController
two connected with ViewController

따라서 위에 처럼 prepare로 segue의 호출을 본다면 2번 호출 되었고 결과도 두번 나왔습니다.

 

소스 코드 :

(ViewModel를 좀더 효울적으로 작성한 코드들이 있습니다!)

github.com/HururuekChapChap/Xcode_TestProj/tree/master/NastedScrollView/NastedScrollView

 

참고 사이트 :

AutoLayout 공부 사이트

zeddios.tistory.com/380

iOS ) Auto Layout

 

CollectionView에서 contentView의 색을 변경하는 방법 :

stackoverflow.com/questions/27674317/changing-cell-background-color-in-uicollectionview-in-swift

Changing cell background color in UICollectionView in Swift