Bottom Sheet

Bottom Sheet

Sheet

Protocol ที่ใช้สำหรับ UIViewController ที่ต้องการเรียกใช้งาน Bottom Sheet

protocol Sheet: UIViewController {
    var sheetCoordinator: SheetCoordinator? { get set }
}

Properties

NameDescriptionType
sheetCoordinatorCoordinator สำหรับการเปิด Bottom SheetOptional(SheetCoordinator)

SheetParent

ประเภทของคลาส UIViewController ที่เรียกใช้งาน Bottom

typealias SheetParent = Sheet & UIViewController

ChildSheetViewController

เป็นคลาสที่ Inherit มาจาก UIViewController สำหรับ UIViewController ที่ใช้แสดงใน Bottom Sheet

Properties

NameDescriptionType
sheetCoordinatorCoordinator สำหรับการเปิด Bottom SheetOptional(SheetCoordinator)

SheetSize

ความสูงของ Bottom Sheet

enum SheetSize {
    case fixed(CGFloat)
    case halfScreen
    case fullScreen
}
NameDescription
fixedความสูงของ Bottom Sheet ที่สามารถกำหนดเองได้
halfScreenความสูงของ Bottom Sheet ที่ขนาดครึ่งหน้าจอ
fullScreenความสูงของ Bottom Sheet ที่ขนาดเต็มหน้าจอ

SheetCoordinator

เป็น Coordinator สำหรับการเปิด Bottom Sheet

Properties

NameDescriptionTypeDefault
parentViewControllerUIViewController ที่ต้องการเรียก Bottom SheetUIViewControllernull
childViewControllerUIViewController ที่ใช้แสดงใน Bottom SheetUIViewControllernull
containerViewView ที่เป็น Container ของ Bottom SheetUIViewUIView()
pullBarViewView ของ Bar ที่ใช้ในการดึง Bottom Sheet ขึ้นลงรวมถึงการกดเพื่อปิด Bottom SheetUIViewUIView()
overlayViewView ที่ Overlay อยู่ด้านหลังของ Bottom Sheet เมื่อ View ถูกแสดงอยู่จะไม่สามารถกระทำใดๆกับ UIViewController ที่เรียก Bottom Sheet ได้UIViewUIView()
overlayColorสีของ View ที่ Overlay อยู่ด้านหลังของ Bottom SheetUIColorUIColor(white: 0, alpha: 0.7)
showOverlayการกำหนดการแสดง overlayView (ถ้าต้องการกระทำใดๆกับ UIViewController ที่เรียก Bottom Sheet ให้ตั้งค่าเป็น false)Booleantrue
handleViewBar View ที่แสดงอยู่ใน pullBarView สำหรับการดึง Bottom SheetUIViewUIView()
handleColorสีของ Bar ViewUIColorUIColor(white: 0.868, alpha: 1)
handleSizeขนาดของ Bar ViewCGSizeCGSize(width: 50, height: 6)
handleTopEdgeInsetขอบด้านบนของ Bar ViewCGFloat9
handleBottomEdgeInsetขอบล่างบนของ Bar ViewCGFloat9
adjustForBottomSafeAreaการกำหนด Constraint ของ Container สำหรับ Safe Area ด้านล่างของ Bottom SheetBooleanfalse
blurBottomSafeAreaการ Blur บริเวณที่เป็น Safe Area ด้านล่างของ Bottom SheetBooleantrue
topCornersRadiusความโค้งมนของมุมด้านบนของ Bottom SheetCGFloat3
dismissOnBackgroundTapการกำหนดให้สามารถปิด Bottom Sheet ได้ด้วยการกดที่ overlayViewBooleantrue
dismissOnPanการกำหนดให้สามารถปิด Bottom Sheet ได้ด้วยการดึง pullBarView ลงBooleantrue
shouldRecognizePanGestureWithUIControlsการกำหนดให้สามารถดึง pullBarView ได้ด้วย UIControlBooleanfalse
willDismissCallback เมื่อ Bottom Sheet กำลังจะปิดลงOptional(Completion)null
didDismissCallback เมื่อ Bottom Sheet ปิดลงเรียบร้อยแล้วOptional(Completion)null

Method Overview

NameDescriptionReturn
init()การ Initial Coordinator สำหรับ UIViewController ที่ต้องการเรียก Bottom Sheetvoid
setSizes()การตั้งค่าความสูงของ Bottom Sheet สามารถตั้งได้หลายระดับvoid
resize()การปรับความสูงของ Bottom Sheetvoid
show()การแสดง Bottom Sheetvoid
closeSheet()การปิด Bottom Sheetvoid
handleScrollView()การตั้งค่าให้ Bottom Sheet ผูกกับ UIScrollView เพื่อให้ UIScrollView ไหลตามความสูงของ Bottom Sheetvoid

Method Details

init(parentViewController: UIViewController)

การ Initial Coordinator สำหรับ UIViewController ที่ต้องการเรียก Bottom Sheet

Parameters

NameDescriptionType
parentViewControllerUIViewController ที่ต้องการเรียก Bottom SheetUIViewController
func setSizes(_ sizes: [SheetSize], animated: Bool = true)

การตั้งค่าความสูงของ Bottom Sheet สามารถตั้งได้หลายระดับ

Parameters

NameDescriptionType
sizesความสูงของ Bottom Sheet ที่สามารถแสดงได้Array(SheetSize)
animatedAnimation สำหรับการปรับความสูงโดยจะปรับมาที่ความสูงแรกของ Array ที่เรียงลำดับจากสั้นไปยาวBoolean
func resize(to size: SheetSize, animated: Bool = true)

การปรับความสูงของ Bottom Sheet

Parameters

NameDescriptionType
toความสูงของ Bottom Sheet ที่ต้องการแสดงSheetSize
animatedAnimation สำหรับการปรับความสูงBoolean
func show(_ viewController: UIViewController, sizes: [SheetSize] = [], completion: ((Bool) -> Void)? = nil)

การแสดง Bottom Sheet ถ้าหากมี Bottom Sheet อยู่แล้ว จะทำการปิด Bottom Sheet เดิมก่อนแล้วจึงแสดง Bottom Sheet ใหม่

Parameters

NameDescriptionType
viewControllerUIViewController ที่ต้องการแสดงใน Bottom SheetUIViewController
sizesความสูงของ Bottom Sheet ที่สามารถแสดงได้Array(SheetSize)
completionCallback เมื่อการแสดง Bottom Sheet สำเร็จCompletion
func closeSheet(completion: (() -> Void)? = nil)

การปิด Bottom Sheet

Parameters

NameDescriptionType
completionCallback เมื่อการปิด Bottom Sheet สำเร็จCompletion
func handleScrollView(_ scrollView: UIScrollView)

การตั้งค่าให้ Bottom Sheet ผูกกับ UIScrollView เพื่อให้ UIScrollView ไหลตามความสูงของ Bottom Sheet

Parameters

NameDescriptionType
scrollViewUIScrollView ที่อยู่ใน UIViewController ที่แสดงใน Bottom SheetUIScrollView

Example

<em>// UIViewController ที่ต้องการเรียก Bottom Sheet</em>
class ParentViewController: UIViewController, Sheet {
    var sheetCoordinator: SheetCoordinator?

    override func viewDidLoad() {
        super.viewDidLoad()

        <em>// Setup SheetCoordinator</em>
        if let navigationController = self.navigationController {
            <em>// ถ้า Controller ที่ต้องการเรียก Bottom Sheet เป็น UINavigationController</em>
            sheetCoordinator = SheetCoordinator(parentViewController: navigationController)
        } else {
            <em>// ถ้า Controller ที่ต้องการเรียก Bottom Sheet เป็น UIViewController</em>
            sheetCoordinator = SheetCoordinator(parentViewController: self)
        }

        ...
    }

    func showBottomSheet() {
        let storyboard = UIStoryboard(name: "YourStoryboard", bundle: nil)
        let controller = storyboard.instantiateViewController(withIdentifier: "ChildViewController") as! ChildViewController

        guard let sheetCoordinator = sheetCoordinator else { return }

        sheetCoordinator.showOverlay = true
        sheetCoordinator.topCornersRadius = 15

        <em>// Show Bottom Sheet</em>
        sheetCoordinator.show(controller, sizes: [.fixed(300), .halfScreen, .fullScreen], completion: { complete in
            print("Status show: \(complete)")
        })

        <em>// Callback willDismiss</em>
        sheetCoordinator.willDismiss = { () in
            print("Will dismiss!!")
        }

        <em>// Callback didDismiss</em>
        sheetCoordinator.didDismiss = { () in
            print("Dismiss!!")
        }
    }
}

<em>// UIViewController ที่ต้องการแสดงใน Bottom Sheet</em>
class ChildViewController: ChildSheetViewController {

    @IBOutlet weak var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        setupScrollView()
    }

    func setupScrollView() {
        self.sheetCoordinator?.handleScrollView(scrollView)
    }
}