Bottom Sheet
Sheet
Protocol ที่ใช้สำหรับ UIViewController ที่ต้องการเรียกใช้งาน Bottom Sheet
protocol Sheet: UIViewController {
var sheetCoordinator: SheetCoordinator? { get set }
}Properties
| Name | Description | Type |
|---|---|---|
| sheetCoordinator | Coordinator สำหรับการเปิด Bottom Sheet | Optional(SheetCoordinator) |
SheetParent
ประเภทของคลาส UIViewController ที่เรียกใช้งาน Bottom
typealias SheetParent = Sheet & UIViewControllerChildSheetViewController
เป็นคลาสที่ Inherit มาจาก UIViewController สำหรับ UIViewController ที่ใช้แสดงใน Bottom Sheet
Properties
| Name | Description | Type |
|---|---|---|
| sheetCoordinator | Coordinator สำหรับการเปิด Bottom Sheet | Optional(SheetCoordinator) |
SheetSize
ความสูงของ Bottom Sheet
enum SheetSize {
case fixed(CGFloat)
case halfScreen
case fullScreen
}| Name | Description |
|---|---|
| fixed | ความสูงของ Bottom Sheet ที่สามารถกำหนดเองได้ |
| halfScreen | ความสูงของ Bottom Sheet ที่ขนาดครึ่งหน้าจอ |
| fullScreen | ความสูงของ Bottom Sheet ที่ขนาดเต็มหน้าจอ |
SheetCoordinator
เป็น Coordinator สำหรับการเปิด Bottom Sheet
Properties
| Name | Description | Type | Default |
|---|---|---|---|
| parentViewController | UIViewController ที่ต้องการเรียก Bottom Sheet | UIViewController | null |
| childViewController | UIViewController ที่ใช้แสดงใน Bottom Sheet | UIViewController | null |
| containerView | View ที่เป็น Container ของ Bottom Sheet | UIView | UIView() |
| pullBarView | View ของ Bar ที่ใช้ในการดึง Bottom Sheet ขึ้นลงรวมถึงการกดเพื่อปิด Bottom Sheet | UIView | UIView() |
| overlayView | View ที่ Overlay อยู่ด้านหลังของ Bottom Sheet เมื่อ View ถูกแสดงอยู่จะไม่สามารถกระทำใดๆกับ UIViewController ที่เรียก Bottom Sheet ได้ | UIView | UIView() |
| overlayColor | สีของ View ที่ Overlay อยู่ด้านหลังของ Bottom Sheet | UIColor | UIColor(white: 0, alpha: 0.7) |
| showOverlay | การกำหนดการแสดง overlayView (ถ้าต้องการกระทำใดๆกับ UIViewController ที่เรียก Bottom Sheet ให้ตั้งค่าเป็น false) | Boolean | true |
| handleView | Bar View ที่แสดงอยู่ใน pullBarView สำหรับการดึง Bottom Sheet | UIView | UIView() |
| handleColor | สีของ Bar View | UIColor | UIColor(white: 0.868, alpha: 1) |
| handleSize | ขนาดของ Bar View | CGSize | CGSize(width: 50, height: 6) |
| handleTopEdgeInset | ขอบด้านบนของ Bar View | CGFloat | 9 |
| handleBottomEdgeInset | ขอบล่างบนของ Bar View | CGFloat | 9 |
| adjustForBottomSafeArea | การกำหนด Constraint ของ Container สำหรับ Safe Area ด้านล่างของ Bottom Sheet | Boolean | false |
| blurBottomSafeArea | การ Blur บริเวณที่เป็น Safe Area ด้านล่างของ Bottom Sheet | Boolean | true |
| topCornersRadius | ความโค้งมนของมุมด้านบนของ Bottom Sheet | CGFloat | 3 |
| dismissOnBackgroundTap | การกำหนดให้สามารถปิด Bottom Sheet ได้ด้วยการกดที่ overlayView | Boolean | true |
| dismissOnPan | การกำหนดให้สามารถปิด Bottom Sheet ได้ด้วยการดึง pullBarView ลง | Boolean | true |
| shouldRecognizePanGestureWithUIControls | การกำหนดให้สามารถดึง pullBarView ได้ด้วย UIControl | Boolean | false |
| willDismiss | Callback เมื่อ Bottom Sheet กำลังจะปิดลง | Optional(Completion) | null |
| didDismiss | Callback เมื่อ Bottom Sheet ปิดลงเรียบร้อยแล้ว | Optional(Completion) | null |
Method Overview
| Name | Description | Return |
|---|---|---|
| init() | การ Initial Coordinator สำหรับ UIViewController ที่ต้องการเรียก Bottom Sheet | void |
| setSizes() | การตั้งค่าความสูงของ Bottom Sheet สามารถตั้งได้หลายระดับ | void |
| resize() | การปรับความสูงของ Bottom Sheet | void |
| show() | การแสดง Bottom Sheet | void |
| closeSheet() | การปิด Bottom Sheet | void |
| handleScrollView() | การตั้งค่าให้ Bottom Sheet ผูกกับ UIScrollView เพื่อให้ UIScrollView ไหลตามความสูงของ Bottom Sheet | void |
Method Details
init(parentViewController: UIViewController)การ Initial Coordinator สำหรับ UIViewController ที่ต้องการเรียก Bottom Sheet
Parameters
| Name | Description | Type |
|---|---|---|
| parentViewController | UIViewController ที่ต้องการเรียก Bottom Sheet | UIViewController |
func setSizes(_ sizes: [SheetSize], animated: Bool = true)การตั้งค่าความสูงของ Bottom Sheet สามารถตั้งได้หลายระดับ
Parameters
| Name | Description | Type |
|---|---|---|
| sizes | ความสูงของ Bottom Sheet ที่สามารถแสดงได้ | Array(SheetSize) |
| animated | Animation สำหรับการปรับความสูงโดยจะปรับมาที่ความสูงแรกของ Array ที่เรียงลำดับจากสั้นไปยาว | Boolean |
func resize(to size: SheetSize, animated: Bool = true)การปรับความสูงของ Bottom Sheet
Parameters
| Name | Description | Type |
|---|---|---|
| to | ความสูงของ Bottom Sheet ที่ต้องการแสดง | SheetSize |
| animated | Animation สำหรับการปรับความสูง | Boolean |
func show(_ viewController: UIViewController, sizes: [SheetSize] = [], completion: ((Bool) -> Void)? = nil)การแสดง Bottom Sheet ถ้าหากมี Bottom Sheet อยู่แล้ว จะทำการปิด Bottom Sheet เดิมก่อนแล้วจึงแสดง Bottom Sheet ใหม่
Parameters
| Name | Description | Type |
|---|---|---|
| viewController | UIViewController ที่ต้องการแสดงใน Bottom Sheet | UIViewController |
| sizes | ความสูงของ Bottom Sheet ที่สามารถแสดงได้ | Array(SheetSize) |
| completion | Callback เมื่อการแสดง Bottom Sheet สำเร็จ | Completion |
func closeSheet(completion: (() -> Void)? = nil)การปิด Bottom Sheet
Parameters
| Name | Description | Type |
|---|---|---|
| completion | Callback เมื่อการปิด Bottom Sheet สำเร็จ | Completion |
func handleScrollView(_ scrollView: UIScrollView)การตั้งค่าให้ Bottom Sheet ผูกกับ UIScrollView เพื่อให้ UIScrollView ไหลตามความสูงของ Bottom Sheet
Parameters
| Name | Description | Type |
|---|---|---|
| scrollView | UIScrollView ที่อยู่ใน UIViewController ที่แสดงใน Bottom Sheet | UIScrollView |
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)
}
}