ButtonUp, ButtonDown ๐ฆ
็จไพ็ถไฝ Tab Bar Button ๅฝ่ตท่ๆไธ็ๅ ฉๅ็ๆ ๏ผ้ๅ ฉๅๅชๆฏๅฎ็ด็ View ่ๅทฒ๏ผ้ไธ่ฝ็็ๆใ
import SwiftUI
import ViewModifiers
public struct ButtonUp: View {
// button properties
let size: CGFloat // icon size
let icon: String // icon name (SF Symbol)
// public init
public init(icon: String, size: CGFloat = 32){
self.icon = icon
self.size = size
}
// button body
public var body: some View {
ZStack {
// 1. ็จๆผธๅฑค็บๅบ็ด๏ผ้ฎๅจๅ็คบไธ้ข
Neu.buttonUpIconBackground
.frame(width: size, height: size) // ้ๅๅคงๅฐๅชๅค ้ฎไฝ icon
// 2. ๅ้ชไธๆๆด็ๆน็ด
Rectangle()
.foregroundColor(Neu.color.cardBackground) // ไธ่ฒ
.frame(width: size * 2, height: size * 2) // ๆน็ด็บๅ็คบ็ๅ
ฉๅๅคง
.inverseMask(IconCard(icon, size: size)) // ไปฅๅ็คบๆๆด
// shadow & highlight
.shadow(color: Neu.color.iconShadow, radius: 6, x: 6, y: 6)
.shadow(color: .white, radius: 3, x: -3, y: -3)
.cornerRadius(size * 0.5) // ๅชๅ่ง
} // container (ZStack)
// โญ๏ธ ๅไฝตๆๆๅๅฑค๏ผ็บไบๅนซๆดๅ ZStack ่ฃฝไฝ้ฐๅฝฑ๏ผ
.compositingGroup()
// โญ๏ธ ่ฎๆๅ
่้ฐๅฝฑ้ฝใๆถๆใไธ้ป๏ผradius ๅคง๏ผx y ๅฐ๏ผ
.shadow(color: Color.white.opacity(0.9), radius: 4, x: -2, y: -2)
.shadow(color: Neu.color.iconShadow.opacity(0.9), radius: 4, x: 2, y: 2)
}
}
import SwiftUI
import ViewModifiers // for `.inverseMask`
import Workaround // for `SystemImage`
public struct ButtonDown: View {
// button properties
let size: CGFloat // icon size
let icon: String // icon name (SF Symbol)
// public init
public init(icon: String, size: CGFloat = 32){
self.icon = icon
self.size = size
}
// button body
public var body: some View {
// 0.5 - 0.125 = 0.375
let rimMask = Rectangle().cornerRadius(size * 0.375).padding(size * 0.125)
// โญ๏ธ container
return ZStack {
// 1. ้ชไธๆพๅคงไธ้ป็ๅ่งๆน็ด
Rectangle()
.foregroundColor(Neu.color.cardBackground) // ไธ่ฒ
.frame(width: size * 2.25, height: size * 2.25) // ๆน็ด็บๅ็คบ็ 2.25 ๅ
.cornerRadius(size * 0.5) // ๅชๅ่ง
// 2. ่จญ่จใๆไธๆ้ใ็้ฐๅฝฑๆๆ
Rectangle()
// 2-1. ็ดๅผตไธ่ฒใๆพๅคงไธ้ปใๅชๅ่ง
.fill(Neu.buttonDownShadow) // ไธ่ฒ
.frame(width: size * 2.25, height: size * 2.25) // ๆน็ด็บๅ็คบ็ 2.25 ๅ
.cornerRadius(size * 0.5) // ๅชๅ่ง
// 2-2. ๅชไธๅ่ง้็ทฃ (padding = 0.125 * size)
.inverseMask(rimMask)
// 2-3. ๆๅ
ใไธ้ฐๅฝฑ
.shadow(color: Neu.color.iconShadow, radius: 6, x: 6, y: 6)
.shadow(color: .white, radius: 6, x: -4, y: -4)
// 2-4. ๅชๆๅคๅ้ฐๅฝฑ
.cornerRadius(size * 0.5)
// 3. ๅ็คบ
Gradient.bottomRight(.black, .purple, .pink, .yellow) // ๆบๅๅ็คบ้ก่ฒ
.frame(width: size, height: size) // ้ๅถๅ็คบๅคงๅฐ
.mask(SystemImage(icon)) // ๅชไธๅ็คบ็้จๅ
.font(.system(size: 24, weight: .bold)) // ๅญ้ซๅ ็ฒ
.offset(x: 2, y: 2) // โญ๏ธ ็จๅพฎๅพๅณไธ่ง็งปๅ๏ผใๆไธ็ๆๆใๆดๅฅฝ
} // container (ZStack)
}
}
Last updated