Buttom sheet( panmodal)

스토리보드를 기준으로 바텀시트를 직접 만들려고 햇는데 잘 안되서, 그냥 외부라이브러리 쓰기로 했다.

panmodal 이라는 오픈소스 라이브러리이다.

패키지 매니저를 통해서 해당 오픈소스를 다운받을수 있다.

1. 패키지 매니저를 통해서 다운

https://github.com/slackhq/PanModal.git

다운햇으면 사용할 부분에 당연하게도, import해주자.

2. 모달해줄 뷰컨트롤 만들기

뷰컨트롤러의 종류는 크게 3개가 있다.

1. 뷰 컨트롤러
2. 콜렉션뷰 컨트롤러
3. 테이블뷰 컨트롤러

해당 컨트롤러를 스토리보드에서 만들면된다.

나는 콜렉션뷰로 만들었다.

3. 콜렉션뷰 설정하기

기존의 콜랙션뷰와 동일하게 진행하면 되는데, 처음부터 콜렉션뷰 컨트롤러자체 내부에서 datasource와 delegate가 내장되어있기 때문에 따로, extension해줄필요는 없다.

3. 모달창 띄워주기

panModal에서는 라이브러리 자체 내부에서 presentPanModal() 를 제공한다.

해당 뷰컨의 값을 가져와야 하기 때문에 UIStoryboard로 해당 뷰컨을 가져와서 연결해준다.

let myItemVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: String(describing: MyItemCollectionViewController.self)) as! MyItemCollectionViewController
presentPanModal(myItemVC)

2. PanModal 설정해주기

팬모달창으로 사용할 뷰컨트롤러를 만들고, 거기에서 동일하게 그냥 화면을 구성해준다.

이후 해당 뷰에서 extension을 통해 PanModalPresentable이라는 프로토콜을 채택해준다.

여기에서 해당 모달창의 설정을 해주게 된다.

extension YourViewController: PanModalPresentable {
		var panScrollable: UIScrollView?{
        return self.collectionView
    }
    var shortFormHeight: PanModalHeight{
        return .contentHeight(300)
    }
    var longFormHeight: PanModalHeight{
        return .maxHeightWithTopInset(40)
    }
}

이러한 기능은 usage를 찾아보면된다.

link_preview