iOS Swift 라이브러리 바텀 시트 (MDC Sheets: bottom)

안녕하세요 Gons 입니다.

오늘은 Material Design Components 바텀 시트를 사용해보겠습니다.

머티리얼 디자인은 2014년에 구글에서 만든건데 iOS 컴포넌트들도 있습니다.

github 말고 material.io/ 이 사이트에서 확인하면 됩니다.

 

 

 

 

이겁니다.

MDC Sheets: bottom

시작하겠습니다.

 

 

 

 

 

 

https://material.io/components/sheets-bottom/ios

↑↑ 오늘 사용할 라이브러리 주소입니다.

 

 

 

 

 

라이브러리를 설치해주세요.

pod 'MaterialComponents/BottomSheet'

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

 

 

라이브러리를 추가 해주세요.

import MaterialComponents.MaterialBottomSheet

※ 여기서 import 에 MaterialComponents 가 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

 

 

바텀 시트 열리게 할 버튼과 바텀 시트로 쓰일 뷰컨트롤러를 만들어주세요.

 

 

 

 

 

버튼 클릭 액션을 아울렛으로 연결해주고요

    @IBAction func btnClicked(_ sender: UIButton) {
        print("바텀 시트 오픈 버튼 클릭")
    }

 

 

 

 

원하는 뷰를 만들어서 넣어주면 됩니다.

        // 바텀 시트로 쓰일 뷰컨트롤러 생성
        let vc = storyboard?.instantiateViewController(withIdentifier: "ViewController3") as! ViewController3
        
        // MDC 바텀 시트로 설정
        let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: vc)
        
        // 보여주기
        present(bottomSheet, animated: true, completion: nil)

 

바로 실행해보겠습니다.

MDCBottomSheetController

잘 나오네요.

간단하죠?

 

 

 

 

이제 설정을 조금 바꿔보겠습니다.

기본값으로 드래그 해서 닫을 수 있는데 아래 코드를 쓰면 막을 수 있습니다.

        // 아래로 드래그해도 안닫히게 하기
        bottomSheet.dismissOnDraggingDownSheet = false

bottomSheet.dismissOnDraggingDownSheet = false

 

 

 

 

 

 

보여지는 정도를 조절할 수 있습니다.

        // 높이
        bottomSheet.mdc_bottomSheetPresentationController?.preferredSheetHeight = 200

preferredSheetHeight

 

 

 

 

 

 

 

 

뒤에 흐려지는 배경색이나 투명정도를 바꿀 수 있습니다.

        // 뒤에 배경 컬러 (노랑,투명50%)
        bottomSheet.scrimColor = UIColor.systemYellow.withAlphaComponent(0.5)

scrimColor

 

 

 

 

델리게이트도 받아볼게요.

bottomSheet.delegate = self

 

 

바텀 시트 닫혔을 때 이벤트를 받을 수 있고, 드래그할 때 y 위치를 받을 수 있습니다.

extension ViewController2: MDCBottomSheetControllerDelegate {
    func bottomSheetControllerDidDismissBottomSheet(_ controller: MDCBottomSheetController) {
        print("바트 시트 닫힘")
    }
    
    func bottomSheetControllerDidChangeYOffset(_ controller: MDCBottomSheetController, yOffset: CGFloat) {
        // 바텀 시트 위치
        print(yOffset)
    }
}

 

 

MDCBottomSheetControllerDelegate

 

 

 

 

 

마지막으로 바텀시트에서 음식 골랐을 때 닫히게 해보겠습니다.

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        //바텀 시트 닫기
        dismiss(animated: true, completion: nil)
    }

present 로 띄운 것이기 때문에 그냥 self.dismiss 해주면 됩니다.

self.dismiss

 

 

 

 

 

복잡하지 않고 좋네요.

글이 긴 것 같지만

바텀 시트 만드는거는

let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: vc)

이거 한줄 밖에 되지 않습니다.

바텀 시트말고도 MDC에 유용한 컴포넌트들이 많이 있습니다.

사용법도 한두줄로 쉽게 되어있어서, 간편하게 쓰기 좋을 것 같아요.

글 읽어주셔서 감사합니다.

끝.

Xcode iOS Swift