SwiftUIDrag

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:

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:

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:

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:

To take it a step further, you also get access to Bool variables that allow for swift verification of the content state:

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.