Half screen and full screen bottom sheet with material components for iOS (swift)

debbiedowner picture debbiedowner · Jul 12, 2018 · Viewed 7k times · Source

I'm using material components for iOS for making a draggable bottom sheet, that starts half screen (preview mode), and you can drag to full screen. But I don't know how, and the documentation is not very complete. https://material.io/develop/ios/components/bottom-sheet/

I present my DetailViewController within the MDCBottomSheetController:

let graphDetailViewController = UIStoryboard.detail().instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController     
let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: graphDetailViewController)
bottomSheet.preferredContentSize = CGSize(width: self.view.frame.size.width, height: self.view.frame.size.height / 2)
    present(bottomSheet, animated: true, completion: nil)

With this code, my vc is appearing half screen, but it's not possible to drag it up to full screen.

Is anyone experiences with material components (bottom sheet) for iOS and could help me?

Thanks a lot!

Answer

Cody Weaver picture Cody Weaver · Oct 15, 2018

Everything is right except you set the preferredContentSize to be 1/2 the screen height.

 bottomSheet.preferredContentSize = CGSize(width: self.view.frame.size.width, height: self.view.frame.size.height / 2)

Is the line causing your error. That line is telling the bottom sheet that there is no more content to scroll. You can delete it. If you want to have your contentViewController be a scroll view you may want to use the trackingScrollView property.