SwiftUIDrag [NO LONGER MAINTAINED]

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.

Table of Contents

• Usage
• Key Features
  • Alignment
  • Floating
  • Collapse
  • Visible Size
  • Content
• Installation
• Author
• License

Usage

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.

Key Features

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.
}

Alignment

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

Floating

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

Collapse

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

Visible Size

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.

Content

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

Installation

SwiftUIDrag can be installed via Swift Package Manager (SPM) in Xcode:

1. Navigate to the SPM (File > Swift Packages > Add Package Dependency...)
2. 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.

Author

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!

License

SwiftUIDrag is available under the MIT license. See LICENSE for more information.