-
#16. 버튼 스타일(Button Style)SwiftUI 앱만들기 2022. 7. 11. 11:48
#1. ContentView
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing:30){
//#1.탭버튼
Button(action:{
print("button clicked")
}, label: {
Text("탭")
.fontWeight(.bold)
}).buttonStyle(MyButtonStytle(color: Color.blue, type: .tab))
//#2.롱버튼
Button(action:{
print("button clicked")
}, label: {
Text("롱클릭")
.fontWeight(.bold)
}).buttonStyle(MyButtonStytle(color: Color.green, type: .long))
//#3.회전버튼
Button(action:{
print("button clicked")
}, label: {
Text("회전버튼")
.fontWeight(.bold)
}).buttonStyle(MyRotateButtonStyle(color: Color.pink))
//#4.축소버튼
Button(action:{
print("button clicked")
}, label: {
Text("축소버튼")
.fontWeight(.bold)
}).buttonStyle(MySmallerButtonStyle(color: Color.purple))
//#5.Blur버튼
Button(action:{
print("button clicked")
}, label: {
Text("Blur버튼")
.fontWeight(.bold)
}).buttonStyle(MyBlurButtonStyle(color: Color.black))
} //VStack
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#2. MyButtonStytle
import SwiftUI
enum ButtonType{
case tab
case long
}
struct MyButtonStytle : ButtonStyle{
var color : Color
var type : ButtonType
func makeBody(configuration: Configuration) -> some View {
configuration
.label
.foregroundColor(Color.white)
.padding()
.background(color)
.cornerRadius(10)
.scaleEffect(configuration.isPressed ? 1.3 : 1.0) //버튼을 누르면 1.3배 커짐
//진동을 적용하기
.onTapGesture {
if(self.type == .tab){
let haptic = UIImpactFeedbackGenerator(style: .light)
haptic.impactOccurred()
}
}.onLongPressGesture{
if(self.type == .tab){
let haptic = UIImpactFeedbackGenerator(style: .heavy)
haptic.impactOccurred()
}
}
}
}
struct MyButtonStytle_Previews: PreviewProvider {
static var previews: some View {
Button(action: {
print("button clicked!")
}, label: {
Text("HaHa")
}).buttonStyle(MyButtonStytle(color: Color.blue, type: .tab))
}
}
#3. MyRotateButtonStyle
import SwiftUI
struct MyRotateButtonStyle : ButtonStyle {
var color : Color
func makeBody(configuration: Configuration) -> some View {
configuration
.label
.foregroundColor(Color.white)
.padding()
.background(color)
.cornerRadius(10)
.rotationEffect(configuration.isPressed ? .degrees(90) : .degrees(0))
}
}
struct MyRotateButtonStyle_Previews: PreviewProvider {
static var previews: some View {
Button(action: {
print("button clicked!")
}, label: {
Text("HaHa")
}).buttonStyle(MyRotateButtonStyle(color: Color.red))
}
}
#4. MySmallerButtonStyle
import SwiftUI
struct MySmallerButtonStyle : ButtonStyle {
var color : Color
func makeBody(configuration: Configuration) -> some View {
configuration
.label
.foregroundColor(Color.white)
.padding()
.background(color)
.cornerRadius(10)
.scaleEffect(configuration.isPressed ? 0.8 : 1.0)
.opacity(configuration.isPressed ? 0.5 : 1.0) //투명도
}
}
struct MySmallerButtonStyle_Previews: PreviewProvider {
static var previews: some View {
Button(action: {
print("button clicked!")
}, label: {
Text("HaHa")
}).buttonStyle(MySmallerButtonStyle(color: Color.pink))
}
}
#5.MyBlurButtonStyle
import SwiftUI
struct MyBlurButtonStyle : ButtonStyle {
var color : Color
func makeBody(configuration: Configuration) -> some View {
configuration
.label
.foregroundColor(Color.white)
.padding()
.background(color)
.cornerRadius(10)
.blur(radius: configuration.isPressed ? 5 : 0)
}
}
struct MyBlurButtonStyle_Previews: PreviewProvider {
static var previews: some View {
Button(action: {
print("button clicked!")
}, label: {
Text("HaHa")
}).buttonStyle(MyBlurButtonStyle(color: Color.black))
}
}
출처 : https://youtu.be/7j-aaNVX9MQ
'SwiftUI 앱만들기' 카테고리의 다른 글
#18. 토스트, 팝업(Toast, Popup) (0) 2022.07.11 #17. 텍스트필드(TextField, SecureField) (0) 2022.07.11 #15. 로또앱 만들기(QR Code) (0) 2022.07.08 #14. 커스텀 탭뷰(CustomTabView) (0) 2022.07.08 #13. 탭뷰(TabView) (0) 2022.07.07