Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/demharusnam/SwiftUIDrag

A simple, customizable, and intuitive SwiftUI wrapper-view enabling dragging, floating, and/or collapsing for its content.
https://github.com/demharusnam/SwiftUIDrag

ios ios-app swift swiftui

Last synced: 2 months ago
JSON representation

A simple, customizable, and intuitive SwiftUI wrapper-view enabling dragging, floating, and/or collapsing for its content.

Host: GitHub
URL: https://github.com/demharusnam/SwiftUIDrag
Owner: demharusnam
License: mit
Created: 2020-09-28T23:38:31.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2024-01-11T18:12:15.000Z (about 1 year ago)
Last Synced: 2024-01-12T04:33:26.968Z (about 1 year ago)
Topics: ios, ios-app, swift, swiftui
Language: Swift
Homepage:
Size: 4.87 MB
Stars: 48
Watchers: 5
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome - SwiftUIDrag - A simple, customizable, and intuitive SwiftUI wrapper-view enabling dragging, floating, and/or collapsing for its content. (swiftui)
awesome - SwiftUIDrag - A simple, customizable, and intuitive SwiftUI wrapper-view enabling dragging, floating, and/or collapsing for its content. (swiftui)

README

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

![Floating TabView demo of SDView](README_Assets/tabview_preview.gif) ![VideoPlayer demo of SDView](README_Assets/video_preview.gif) ![Rectangle demo of SDView](README_Assets/rectangle_preview.gif)

## Table of Contents

- [Usage](#usage)

- [Key Features](#key-features)

    - [Alignment](#alignment)

    - [Floating](#floating)

    - [Collapse](#collapse)

    - [Visible Size](#visible-size)

    - [Content](#content)

- [Installation](#installation)

- [Author](#author)

- [License](#license)

## Usage 

```swift

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.

```swift

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:

```swift

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](https://github.com/demharusnam). 

Happy hacking!

## License

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