swift - BottomSheet

아래서 깔끔하게 튀어나오는(?) 바텀시트를 만들어 봅시다~!~!

 

우선 pod file에 pod 'MaterialComponents/BottomSheet'와 pod 'PanModal' 추가 후 pod install 

 

그 다음 Main 스토리보드로 이동합니다!

 

BottomSheet를 띄우기 위한 버튼을 하나 추가할게요

 

그 다음 TableView Controller를 추가해 주세요!

 

오른쪽 Attributes Inspector 에서 Content를 Static Cells로 바꿔주세요

 

그러면 이렇게 Cell이 추가되는데, 1개만 빼고 다 삭제해줄게요 (한 개 만들어 놓고 복붙할 예정 ㅋㅋ)

 

BottomSheet에 보여질 내용을 만들어 줍니당

 

Cell들을 복붙하고 내용을 수정! 그럼 대충 이런 형태가 나와유

 

이제 방금 만든 TableView Controller의 클래스를 만들어 줍니다!

 

클래스 생성 후 TableView Controller와 클래스를 연결해 주세요

그리고 present 할 때 사용할 Storyboard ID도 넣어 주시구요 

 

// MyTableViewController.swift

import UIKit
import PanModal

class MyTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }
}

extension MyTableViewController: PanModalPresentable {
    
    var panScrollable: UIScrollView? {
        return tableView
    }
    
    // 접혔을 때
    var shortFormHeight: PanModalHeight {
        // 높이를 250으로 설정
        return .contentHeight(250)
    }
    
    // 펼쳐졌을 때
    var longFormHeight: PanModalHeight {
        // Top 부터 120 만큼 떨어지게 설정
        return .maxHeightWithTopInset(120)
    }
    
    // true 값을 리턴하면 화면 화면 최상단까지 스크롤 불가
    var anchorModalToLongForm: Bool {
        return true
    }
}

PanModal을 import 해주시고 다음과 같이 코드를 작성해 주세요!

오픈소스 페이지에 들어가보면 PanModalPresentable 을 extension 해야 한다고 합니다.

 

만약 테이블뷰가 아니라 UIVIew를 사용하고 있다면 panScrollable: UIScrollView? 부분에 nil을 리턴하면 됩니당

 

또한 접혔을 때, 펴졌을 때의 높이를 설정할 수 있어요!

 

작성이 끝나면 마지막으로 ViewController에서 테이블뷰를 띄우는 코드를 작성합시다.

 

// ViewController.swift

import UIKit
import PanModal

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func presentBottomSheet(_ sender: Any) {
        let vc = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(identifier: "MyTableViewController") as! MyTableViewController
        
        presentPanModal(vc)
    }
    
}

짠 

 

완전 간단하쥬?

 

identifier에 아까 설정한 Storyboard ID를 넣으면 됩니다 ㅎㅎ

 

<그 외 설정들>

// MyTableViewController.swift

import UIKit
import PanModal

class MyTableViewController: UITableViewController {
    ...
}

extension MyTableViewController: PanModalPresentable {
    
    ...
    
    // 드래그로 내려도 화면이 사라지지 않음
    var allowsDragToDismiss: Bool {
        return false
    }
    
    // BottomSheet 호출 시 백그라운드 색상 지정
    var panModalBackgroundColor: UIColor {
        return UIColor.blue.withAlphaComponent(0.5)
    }
}