shapes

Форк
0

2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
README.md

Shapes

Latest release

contact: @lexkraev Telegram Group

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

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

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.