Shapes

corner radius

Different shapes on pure SwiftUI

👨🏻‍💻 Feel free to subscribe to channel SwiftUI dev in telegram.

Requirements

iOS 13.0 or macOS 10.15

Installation

Swift Package Manager

To integrate Shapes into your project using SwiftPM add the following to your Package.swift:

dependencies: [
    .package(url: "https://github.com/c-villain/Shapes", from: "0.1.0"),
],

or via XcodeGen insert into your project.yml:

name: YourProjectName
options:
  deploymentTarget:
    iOS: 13.0
packages:
  Shapes:
    url: https://github.com/c-villain/Shapes
    from: 0.1.0
targets:
  YourTarget:
    type: application
    ...
    dependencies:
       - package: Shapes

Quick start

All examples you can find in demo project inside package.

There are different custom shapes provided by Shapes.

👇🏻 Tap on its name to see description and example of using.

CornerRadius

RoundedRectangle shape and .cornerRadius modifier is used to round specific corners:

corner radius

Use such way:

RoundedRectangle(topLeft: 0, 
                topRight: 16, 
                bottomLeft: 16,
                bottomRight: 16)

If you have radiuses on one side that larger than half of height or half of width:

corner radius

then use chain of modifiers:

Text("Corner radius modifier")
                .foregroundColor(.black)
                .padding(16)
                .background (
                    Color.purple
                        .cornerRadius(200, corners: .topLeft)
                        .cornerRadius(200, corners: .bottomLeft)
                )

Bubble

Bubble shape and .bubble modifier is used to draw messages or tips:

Bubble

Use such way:

Bubble

VStack {
    Text("Hi!")
        .padding(.horizontal, 12)
        .padding(.vertical, 8)
        .background(
            Bubble.init(type: .send,
                        cornerRadius: 20,
                        tail: (width: 6, height: 15))
            .stroke(.gray, lineWidth: 2)
        )
        .frame(maxWidth: .infinity,
               alignment: .trailing)

    Text("Wassup!")
        .padding(.horizontal, 12)
        .padding(.vertical, 8)

        .background(
            Bubble.init(type: .received,
                        cornerRadius: 20,
                        tail: (width: 6, height: 15))
            .stroke(.gray, lineWidth: 2)
        )
        .frame(maxWidth: .infinity,
               alignment: .leading)
}
.padding(20)

or via modifier:

Bubble

VStack(spacing: 20) {
    Text("Custom bubble ✌🏻 \nLeading")
        .foregroundColor(.white)
        .padding(16)
        .bubble(.received,
                withStroke: .clear,
                lineWidth: 2,
                fill: .black.opacity(0.7))
        .frame(maxWidth: .infinity, alignment: .leading)
        
    Text("Custom bubble ✌🏻\nTrailing")
        .foregroundColor(.white)
        .padding(16)
        .bubble(.send,
                withStroke: .clear,
                lineWidth: 2,
                fill: LinearGradient(
                    gradient: Gradient(colors: [.blue.opacity(0.9), .blue.opacity(0.6)]),
                    startPoint: .leading,
                    endPoint: .trailing
                ))
        .frame(maxWidth: .infinity, alignment: .trailing)
}

Wave

Wave shape and .waved modifier is used to draw animated wave:

upside-waved variant:

UpsideWave

inside-waved variant:

InsideWave

no wave, classical variant:

NoWave

Use such way:

HStack {
    ...
    /* Buttons */
    ...
}
.background(
    Color.black.opacity(0.8)
        .waved(corner: cornerRadius,
               height: waveHeight,
               startX: waveX,
               length: waveLength)
)

Diamond

Diamond shape and .diamond modifier is used to draw rhombuses or quadrangles:

Diamond

Use such way:

Bubble

Text("Diamond")
    .padding(.horizontal, 24)
    .padding(.vertical, 16)
    .background(
        Diamond()
            .stroke(.blue, lineWidth: 2)
    )

or via modifier:

Bubble

Text("Diamond modifier")
    .foregroundColor(.black)
    .padding(24)
    .diamond(top: .init(x: 40, y: 0),
             bottom: .init(x: 0, y: 0),
             withStroke: .black,
             lineWidth: 2.0,
             fill: .yellow)

Communication

If you like this repository, please do to make this useful for others.
If you found a bug, open an issue or submit a fix via a pull request.
If you have a feature request, open an issue or submit a implementation via a pull request or hit me up on lexkraev@gmail.com or telegram.
If you want to contribute, submit a pull request onto the master branch.

License

Shapes package is released under an MIT license.