A simple, customizable, and intuitive wrapper-view enabling dragging, floating, and/or collapsing for its content. Written entirely in SwiftUI, SwiftUIDrag is inspired by iOS 14's Picture-in-Picture feature.
SDView(floating: .leading, collapse: .trailing) { geo, state in
RoundedRectangle(cornerRadius: 25)
.fill(Color.blue)
.frame(width: geo.size.width / 2, height: geo.size.height / 4)
.overlay(
HStack {
Image(systemName: "chevron.left")
.foregroundColor(.white)
.frame(width: 10, height: 20)
.opacity(state.isCollapsed && state.isTrailing ? 1 : 0)
.padding(.leading)
Spacer()
}
)
}This code enables the capabilities seen in the blue rectangle demo above.
Below is the default initializer which requires you to enter only one parameter: the content to inherit the SDView drag, floating, and/or collapse properties. The remaining parameters all have default values that can be left as is or can be customized for your use-case.
SDView(
alignment: Alignment = .center,
floating: SDFloatingOptions = [],
collapse: SDCollapseOptions = .horizontal,
visibleSize: CGSize = CGSize(width: 60, height: 60),
@ViewBuilder content: @escaping (GeometryProxy, SDContentState) -> Content
)The quickest way to get started is with the default paramters as such:
SDView { _, _ in
// your content.
}The alignment parameter allows you to position your content based on SwiftUI's Alignment struct. By default, it is set to center which positions your content in the center of SDView. Thus, you get access to the following options:
| Options |
|---|
topLeading |
top |
topTrailing |
leading |
center |
trailing |
bottomLeading |
bottom |
bottomTrailing |
The floating parameter enables you to float your content on the edges of the SDView. By default, it is set to [] which disables floating. Customization is at the heart of this package, thus you get access to the following options:
| Option | Description |
|---|---|
[] |
disables floating |
topLeading |
enables floating content on the top-leading side of SDView |
topTrailing |
enables floating content on the top-trailing side of SDView |
bottomLeading |
enables floating on the bottom-leading side of SDView |
bottomTrailing |
enables floating on the bottom-trailing side of SDView |
top |
enables floating content on either the top-leading or top-trailing sides of SDView |
bottom |
enables floating content on either the bottom-leading or bottom-trailing sides of SDView |
leading |
enables floating content on either the top-leading or bottom-leading sides of SDView |
trailing |
enables floating content on either the top-trailing or bottom-trailing sides of SDView |
all |
enables floating content on either the top-leading, top-trailing, bottom-leading, bottom-trailing sides of SDView |
The collapse parameter enables you to collapse your content into the sides of the SDView with a set visibleSize. By default, it is set to horizontal which only enables collapsing on the leading and trailing sides. Customization is at the heart of this package, thus you get access to the following options:
| Option | Description |
|---|---|
[] |
disables collapsing |
top |
enables collapsing content on the top side of SDView |
bottom |
enables collapsing content on the bottom side of SDView |
leading |
enables collapsing on the leading side of SDView |
trailing |
enables collapsing on the trailing side of SDView |
horizontal |
enables collapsing content on either the leading or trailing sides of SDView |
vertical |
enables collapsing content on either the top or bottom sides of SDView |
all |
enables collapsing content on either the top, bottom, leading, trailing sides of SDView |
The visibleSize parameter determines how much width or height of your content should be visible upon collapse. By default it is set to 60 for both.
The content parameter is @escaping- and @ViewBuilder-wrapped which enables escaping into curly braces for you to easily describe your content in. Additionally, you get two callback parameters: GeometryProxy and SDContentState.
The GeometryProxy enables you to customize any framing, positioning, and/or sizing based on the SDView.
The SDContentState parameter indicates the state of your content. Once again, customization is at the heart of this package, so you get the following state options:
| Option | Description |
|---|---|
top |
content is collapsed on the top side of SDView |
bottom |
content is collapsed on bottom side of SDView |
leading |
content is collapsed on leading side of SDView |
trailing |
content is collapsed on trailing side of SDView |
topLeading |
content is floating on top-leading side of SDView |
topTrailing |
content is floating on top-trailing side of SDView |
bottomLeading |
content is floating on the bottom-leading side of SDView |
bottomTrailing |
content is floating on the bottom-trailing side of SDView |
expanded |
content is neither collapse nor floating on any side of SDView |
To take it a step further, you also get access to Bool variables that allow for swift verification of the content state:
| Option | Description |
|---|---|
isTop |
content is either collapsed or floating on the top side of SDView |
isBottom |
content is either collapsed or floating on the bottom side of SDView |
isLeading |
content is either collapsed or floating on the leading side of SDView |
isTrailing |
content is either collapsed or floating on the trailing side of SDView |
isCollapsed |
content is collapsed in SDView |
isFloating |
content is floating in SDView |
isExpanded |
content is expanded |
SwiftUIDrag can be installed via Swift Package Manager (SPM) in Xcode:
- Navigate to the SPM (File > Swift Packages > Add Package Dependency...)
- Either enter the URL (https://github.com/demharusnam/SwiftUIDrag) or the name of the package in the search bar. If you opted for the latter, select the displayed package with myself (demharusnam) as the owner.
My name is Mansur. At the time of publishing SwiftUIDrag, I am an undergraduate computer engineering student from Toronto, Canada. I love Swift, SwiftUI, and creating software.
If you have any questions regarding SwiftUIDrag, please feel free to contact me.
Happy hacking!
SwiftUIDrag is available under the MIT license. See LICENSE for more information.