[UIKit] 위에서 올라오는 바텀시트(모달창) 만들기 (FloatingPanel 라이브러리)

라이브러리 사용하였다 

정보가 너무 없어서 구현하는 데 너무 힘들었다

 

 

라이브러리 주소

https://github.com/scenee/FloatingPanel#change-the-backdrop-alpha

GitHub - scenee/FloatingPanel: A clean and easy-to-use floating panel UI component for iOS

 

 

 

일단 뷰컨으로 바텀시트를 하나 만든다

뷰사이를 전체로 잡아주고 위에 스택뷰랑 밑에 스택뷰를 비율로 잡아주었다

 

import FloatingPanel

extension ViewController: FloatingPanelControllerDelegate{
    func setBottomSheet() {
        let fpc = FloatingPanelController()
        fpc.delegate = self
        
        //화면의 테두리? 화면 모양변경가능, 배경색이랑 코너각도 변경할 수 있음
        let appearance = SurfaceAppearance()
        appearance.cornerRadius = 10.0
        fpc.surfaceView.appearance = appearance

		//뷰컨 지정
        let bottomSheetViewController = self.storyboard?.instantiateViewController(identifier: "BottomSheetViewController") as! BottomSheetViewController
        fpc.contentMode = .fitToBounds
        
        fpc.layout = MyFloatingPanelLayout()
        //모달이 올라왔을 때 뒤에 배경을 클릭하면 모달이 사라지는 거
        fpc.backdropView.dismissalTapGestureRecognizer.isEnabled = true
        
        //밑에 세개가 위에 모달같이 생성하는 거!
        fpc.set(contentViewController: bottomSheetViewController)
        //이게 밑으로 내렸을때 모달이 없어지는 거!
        fpc.isRemovalInteractionEnabled = true
        
        self.present(fpc, animated: true, completion: nil)
    }
}

class MyFloatingPanelLayout: FloatingPanelLayout {
	//올라오는 위치 지정
    let position: FloatingPanelPosition = .bottom
    let initialState: FloatingPanelState = .half
    var anchors: [FloatingPanelState: FloatingPanelLayoutAnchoring] {
        return [
            .half: FloatingPanelLayoutAnchor(fractionalInset: 0.7, edge: .bottom, referenceGuide: .safeArea),
        ]
    }
    
    //올라왔을 때 위에 배경 투명도 조절
    func backdropAlpha(for state: FloatingPanelState) -> CGFloat {
        switch state {
        case .full, .half: return 0.7
        default: return 0.0
        }
    }
    
}

 

 

여기까지 결과

 

내리는 모션이 있을 때 바로 사라지는 거는 아직 구현 못함...

눌러서 내리다가 조금이라도 놓으면 틩~하고 올라감...