SwiftUI Livestream: Bottom Sheet UI with Gestures

SwiftUI Livestream: Bottom Sheet UI with Gestures

2.4万 次观看 · 2022-01-28 UI 设计
The Bottom Sheet is a popular new UI pattern for interactive content and detailed confirmation. This is a more interesting version of the modal with context of the content underneath. Many apps such as the Apple Maps and Uber use this pattern and there are many variations like the Share sheet, Music player and new iOS modals.

Source files: https://youtu.be/0No9HCgbYMA

Topics Discussed
* Intro to the Bottom Card UI
* Code Basic UI
* Drag Gesture
* On Release
* Snap Position with Offset
* Full Screen, Half and Minimized

Resources
📱 Bottom Sheet (Advanced): https://swiftwithmajid.com/2019/12/11/building-bottom-sheet-in-swiftui/
🎨 Apple Design Resources: https://developer.apple.com/design/resources/
🎨 Figma design tool: https://www.figma.com
📱 SF Symbols: https://developer.apple.com/sf-symbols
📱 Dynamic Type: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography
🍔 Illustrations: https://shape.so
🤳 Phone Mockups: http://angle.sh

Learn UI Design
🖌 UI Design quick apps in Figma: https://designcode.io/quick-apps-figma
🖌 UI Design for developers: https://designcode.io/ui-design
🌈 Design system in Figma: https://designcode.io/figma
🎨 Figma Handbook: https://designcode.io/figma-handbook
📱 iOS Design Handbook: https://designcode.io/ios-design-handbook

Learn SwiftUI
📱 Build an app for iOS 15: https://designcode.io/swiftui-ios15
📱 Build quick apps with SwiftUI: https://designcode.io/quick-apps-swiftui
🛠 SwiftUI Handbook: https://designcode.io/swiftui-handbook

DesignCode
🐦 Twitter: https://twitter.com/designcodeio
📸 Instagram: https://www.instagram.com/mengto

#swiftui #iosdev