[iOS - swift] FloatingPanel, bottom sheet

FloatingPanel이란?

• ViewController위에 또다른 ViewController가 떠있으며 올릴 수 있는 형태

사용 방법

• FloatingPanel 프레임워크 이용
• ViewController 준비: 배경 VC1와 그 위에 띄울 VC2

• 종속성

pod 'FloatingPanel'

• fpc(FloatingPanelController) 초기화

class ViewController: {
    var fpc: FloatingPanelController!
    var contentsVC: ContentsVC! // 띄울 VC
    
    override func viewDidLoad() {
        super.viewDidLoad()
        serupView()
    }
    
    private func setupView() {
        contentsVC = storyboard?.instantiateViewController(identifier: "ContentsVC", creatpor: { (coder) -> ContentsVC? in
            return ContentsVC(coder: coder)
        })
        fpc = FloatingPanelController()
        fpc.changePanelStyle() // panel 스타일 변경 (대신 bar UI가 사라지므로 따로 넣어주어야함)
        fpc.delegate = self
        fpc.set(contentViewController: contentsVC) // floating panel에 삽입할 것
        fpc.track(scrollView: contentsVC.tbl)
        fpc.addPanel(toParent: self) // fpc를 관리하는 UIViewController
        fpc.layout = MyFloatingPanelLayout()
        fpc.invalidateLayout() // if needed
    }
}

extension FloatingPanelController {
    func changePanelStyle() {
        let appearance = SurfaceAppearance()
        let shadow = SurfaceAppearance.Shadow()
        shadow.color = UIColor.black
        shadow.offset = CGSize(width: 0, height: -4.0)
        shadow.opacity = 0.15
        shadow.radius = 2
        appearance.shadows = [shadow]
        appearance.cornerRadius = 15.0
        appearance.backgroundColor = .clear
        appearance.borderColor = .clear
        appearance.borderWidth = 0

        surfaceView.grabberHandle.isHidden = true
        surfaceView.appearance = appearance

    }
}

• delegate

extension ViewController: FloatingPanelControllerDelegate {
    func floatingPanelDidChangePosition(_ fpc: FloatingPanelController) {
        if fpc.state == .full {

        } else {

        }
    }
}

• Floating길이조절은 FloatingPanelLayout클래스를 상속받은 클래스로 생성하여 fpc초기화시 지정
  - (위에서 fpc.layout = MyFloatingPanelLayout()) 부분

class MyFloatingPanelLayout: FloatingPanelLayout {

    var position: FloatingPanelPosition {
        return .bottom
    }

    var initialState: FloatingPanelState {
        return .half
    }

    var anchors: [FloatingPanelState: FloatingPanelLayoutAnchoring] { // 가능한 floating panel: 현재 full, half만 가능하게 설정
        return [
            .full: FloatingPanelLayoutAnchor(absoluteInset: 16.0, edge: .top, referenceGuide: .safeArea),
            .half: FloatingPanelLayoutAnchor(absoluteInset: 292, edge: .bottom, referenceGuide: .safeArea),
        ]
    }
}

 

* source code: github.com/JK0369/floatingPanel-ex