shapes
Shapes
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: YourProjectNameoptions: deploymentTarget: iOS: 13.0packages: Shapes: url: https://github.com/c-villain/Shapes from: 0.1.0targets: 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:
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)
Communication
- If you like this repository, please do :star: 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.
Описание
Different shapes on pure SwiftUI
Языки
Swift