Different shapes on pure SwiftUI
👨🏻💻 Feel free to subscribe to channel SwiftUI dev in telegram.
- iOS 13.0 or macOS 10.15
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: ShapesAll 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:
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:
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:
Use such way:
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:
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:
- inside-waved variant:
- no wave, classical variant:
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:
Use such way:
Text("Diamond")
.padding(.horizontal, 24)
.padding(.vertical, 16)
.background(
Diamond()
.stroke(.blue, lineWidth: 2)
)or via modifier:
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)- 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.
Shapes package is released under an MIT license.