ButtonUp, ButtonDown ๐ฆ
็จไพ็ถไฝ Tab Bar Button ๅฝ่ตท่ๆไธ็ๅ ฉๅ็ๆ ๏ผ้ๅ ฉๅๅชๆฏๅฎ็ด็ View ่ๅทฒ๏ผ้ไธ่ฝ็็ๆใ
Last updated
็จไพ็ถไฝ Tab Bar Button ๅฝ่ตท่ๆไธ็ๅ ฉๅ็ๆ ๏ผ้ๅ ฉๅๅชๆฏๅฎ็ด็ View ่ๅทฒ๏ผ้ไธ่ฝ็็ๆใ
Last updated
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)
}
}