위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로
자세한 내용은 유튜브를 통해 확인하시길 권장합니다.
아래 형태는 같은 것임
Button(action: {
}, label: {
})Button(action: {
}){
}
여태까지 버튼을 만들고 속성을 준 방식
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
Button(action: {
print("button clicked")
}, label: {
Text("tab")
.fontWeight(.bold)
.font(.system(size: 20))
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(20)
})
}
}
}
설정해야 할 것이 너무 많음
이 속성들을 Button Style로 묶을 수 있음
import SwiftUI
struct MyButtonStyle : ButtonStyle{
func makeBody(configuration: Configuration) -> some View {
configuration.label
}
}
struct MyButtonStyle_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
})
}
}
configuration은 해당하는 Style로 만들어지는 버튼을 의미함
label은 configuration의 글자라고 생각해도 됨
따라서
configuration.label //버튼의 글자
configuration.isPressed //버튼의 클릭 여부
configuration.self //버튼 자기 자신
이 같이 표현할 수 있음
PreviewProvider에서도 버튼 형태로 불러와야 미리보기 창으로 화면을 확인 할 수 있다
ButtonStyle에서 버튼 스타일 적용하기
import SwiftUI
struct MyButtonStyle : ButtonStyle{
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding()
.background(Color.red)
}
}
struct MyButtonStyle_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
}).buttonStyle(MyButtonStyle())
}
}
PreviewProvider의 .buttonStyle(MyButtonStyle())은 MyButtonStyle에 인스턴스를 하겠다를 의미
따라서 MyButtonStyle에서 설정한 것들이 적용됨
ContentView에서 적용한 버튼 스타일들을 적용시키기
import SwiftUI
struct MyButtonStyle : ButtonStyle{
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.system(size: 20))
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(20)
}
}
struct MyButtonStyle_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
}).buttonStyle(MyButtonStyle())
}
}
configuration.isPressed 적용하기
import SwiftUI
struct MyButtonStyle : ButtonStyle{
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.system(size: 20))
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(20)
.scaleEffect(configuration.isPressed ? 1.3 : 1.0)
}
}
struct MyButtonStyle_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
}).buttonStyle(MyButtonStyle())
}
}
버튼에 다양한 효과 주기
1) tab 효과 (haptic 효과로 짧게 진동 주기)
2) long (tab) 효과 (haptic 효과로 길게 진동 주기)
import SwiftUI
enum ButtonType{
case tab
case long
}
struct MyButtonStyle : ButtonStyle{
var color : Color
var type : ButtonType
func makeBody(configuration: Configuration) -> some View {
VStack{
configuration.label
.font(.system(size: 20))
.foregroundColor(.white)
.padding()
.background(color)
.cornerRadius(20)
.scaleEffect(configuration.isPressed ? 1.3 : 1.0)
.onTapGesture {
if (self.type == .tab){
let haptic = UIImpactFeedbackGenerator(style: .light)
haptic.impactOccurred()
}
}.onLongPressGesture {
if (self.type == .long){
let haptic = UIImpactFeedbackGenerator(style: .heavy)
haptic.impactOccurred()
}
}
}
}
}
struct MyButtonStyle_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
}).buttonStyle(MyButtonStyle(color: Color.blue, type: .tab))
}
}3) reduction 효과
import SwiftUI
struct Smaller : ButtonStyle{
var color : Color
func makeBody(configuration: Configuration) -> some View {
VStack{
configuration.label
.font(.system(size: 20))
.foregroundColor(.white)
.padding()
.background(color)
.cornerRadius(20)
.scaleEffect(configuration.isPressed ? 0.8 : 1.0)
.opacity(configuration.isPressed ? 0.5 : 1.0)
}
}
}
struct Smaller_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
}).buttonStyle(Smaller(color: Color.blue))
}
}4) rotation 효과
import SwiftUI
struct RotateButton : ButtonStyle{
var color : Color
func makeBody(configuration: Configuration) -> some View {
VStack{
configuration.label
.font(.system(size: 20))
.foregroundColor(.white)
.padding()
.background(color)
.cornerRadius(20)
.rotationEffect(configuration.isPressed ? .degrees(90): .degrees(0))
//anchor: 회전 기준 조건을 줄 수 있음
}
}
}
struct RotateButton_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
}).buttonStyle(RotateButton(color: Color.blue))
}
}5) blur 효과
import SwiftUI
struct BlurButton : ButtonStyle{
var color : Color
func makeBody(configuration: Configuration) -> some View {
VStack{
configuration.label
.font(.system(size: 20))
.foregroundColor(.white)
.padding()
.background(color)
.cornerRadius(20)
.blur(radius: configuration.isPressed ? 10 : 0)
}
}
}
struct BlurButton_PreViews: PreviewProvider{
static var previews: some View{
Button(action: {
print("clicked")
}, label: {
Text("test")
}).buttonStyle(BlurButton(color: Color.blue))
}
}
ButtonStyle을 ContentView에 엮기
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 30){
Button(action: {
print("button clicked")
}, label: {
Text("tab")
.fontWeight(.bold)
}).buttonStyle(MyButtonStyle(color: Color.blue, type: .tab))
Button(action: {
print("button clicked")
}, label: {
Text("long")
.fontWeight(.bold)
}).buttonStyle(MyButtonStyle(color: Color.green, type: .long))
Button(action: {
print("button clicked")
}, label: {
Text("reduction")
.fontWeight(.bold)
}).buttonStyle(Smaller(color: Color.purple))
Button(action: {
print("button clicked")
}, label: {
Text("rotate")
.fontWeight(.bold)
}).buttonStyle(RotateButton(color: Color.pink))
Button(action: {
print("button clicked")
}, label: {
Text("blur")
.fontWeight(.bold)
}).buttonStyle(BlurButton(color: Color.black))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
'강의 > etc' 카테고리의 다른 글
| [SwiftUI fundamental Tutorial] Toast, Popup (0) | 2021.09.16 |
|---|---|
| [SwiftUI fundamental Tutorial] TextField, SecureField (0) | 2021.09.14 |
| [SwiftUI fundamental Tutorial] Custom TabView (0) | 2021.09.01 |
| [SwiftUI fundamental Tutorial] TabView (0) | 2021.08.31 |
| [SwiftUI fundamental Tutorial] GeometryReader (0) | 2021.08.31 |