SwiftUI : Button / onTapGesture

목차

 

 

SwiftUI 3.0 버전의 Button 기능이 다수 추가되었습니다. 추후 업데이트 예정입니다. 

 

 

트리거(Trigger) 될 때 작업을 수행하는 컨트롤입니다.

 

Button에 대해 알아보도록 합시다.

 

Button

기본 코드 

 //첫번째
 
       Button(action: {
            //action
        }) {
            //view
            HStack {
                Image(systemName: "folder.fill")
                Text("폴더")
            }
        }

//두번째        
        
        Button("서근개발노트") {
            // action
        }

Action 과 Label 을 제공하여 버튼을 만들 수 있습니다. 

액션은 사용자가 버튼을 클릭하거나 택할 때 작업을 수행하는 메서드 또는 클로저 프로퍼티입니다. 

레이블은 예를 들어 '취소'와 같은 텍스트 또는 '뒤로 가기 화살표'와 같은 아이콘을 표시하여 단추의 동작을 실행하는 view입니다.

 

버튼의 기본이 되는 생성 코드는 Button(action: { } ) { Text(" ") }   입니다.

 Button(action: {
    }) {
      Text("Tap me!")   
    }

Button(action: signIn) {
    Text("Sign In")
}

텍스트 전용 레이블의 일반적인 경우에는 후행 클로저 대신 제목 문자열 (또는 현지화된 문자열 키)을 첫 번째 매개 변수로 사용하는 편리한 이니셜 라이저를 사용할 수 있습니다.

즉, 버튼 안쪽에 Text를 따로 빼지 않고 Button("Sign In") { action: signIn } 처럼 간단하게 사용할 수 있습니다.

Button("Sign In") {
  //some action
}

버튼에 액션 넣기

button을 눌렀을 때 텍스트를 표시하거나 숨기는 버튼을 만들 수 있습니다.

 

showDetails 을 @State 에서 false로 지정해두고, self.showDetails.toggle() 로  토글이 된다면,

아래 조건문과 같은 텍스트가 나오게 됩니다.

struct ContentView: View {
    @State private var showDetails = false  

    var body: some View {
        VStack {
            Button(action: {
                self.showDetails.toggle()
            }) {
                Text("디테일 보기")
            }

            if showDetails {
                Text("서근 개발블로그 구독 부탁드려요")
                    .font(.largeTitle)
            }
        }
    }
}

이미지 넣기

만약 이미지를 추가하고 싶다면 아래와 같은 코드를 작성할 수 있습니다.

Button(action: {
    self.showDetails.toggle()
}) {
    Image("example-image")
    .renderingMode(.orginal)
}

Symbol 이미지를 이용하여 버튼을 넣어주려면 아래와 같이 사용자 속성을 지정하여 작성할 수 있습니다.

                Button(action: {
                }) {
                    HStack {
                        Text("String")
                        Image(systemName: "icon.name")
                    }
                }

struct ContentView: View {
    var body: some View {
        Button(action: {
        }) {
            HStack {
                Image(systemName: "pencil")
                Text("Edit")
            } .font(.system(size: 60))
            .foregroundColor(.black)
        }
    }
}

버튼 사용자 속성 추가

Button(action: {
    print("Delete tapped!")
}) {
    HStack {
        Image(systemName: "trash")
            .font(.title)
        Text("Delete")
            .fontWeight(.semibold)
            .font(.title)
    }
    .padding()
    .foregroundColor(.white)
    .background(Color.red)
    .cornerRadius(40)
}

그라데이션을 활용한 버튼  (SwiftUI : Colors and Gradient)

.background(Color.red) 부분을 아래 코드로 바꿔주면 그라데이션 효과를 볼 수 있습니다.

.background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))

Container 버튼 추가

트리거 되는 모든 사용자 인터페이스 요소에는 버튼을 사용합니다. 

버튼은 이러한 다양한 컨테이너 및 콘텍스트 내에서 예상되는 스타일과 일치하도록 시각적 스타일을 자동으로 조정합니다. 

예를 들어, 사용자가 선택했을 때 작업을 트리거하는 목록 셀을 만들려면 List 의 콘텐츠에 버튼을 추가합니다.

// 마지막 행이 트리거될 때의 항목 목록 
// 새 항목을 추가하기 위한 UI를 연다.

List {
    ForEach(items) { item in
        Text(item.title)
    }
    Button("Add Item", action: addItem)
}

ButtonStyle

iOS 기준으로는 총 3가지의 버튼 스타일이 제공됩니다.

- DefaultButtonStyle
기본적으로 적용되는 값. 모든 OS에서 공통으로 사용할 수 있는 버튼 스타일

- BorderlessButtonStyle
 IOS에서 대부분의 경우에 기본 반영되는 스타일. 테두리를 그리지 않음. 하지만 현재 IOS에서 제공하는 스타일 중에 테두리는 그리는 버튼은 없지만 MacOS에선 BorderedButtonStyle이 함께 제공되므로 이것과 대조되는 의미에서 이 스타일이 제공됨.

- PlainButtonStyle
 모든 OS에서 공통으로 사용할 수 있는 버튼 스타일로, 유휴 상태(IDLE)에서는 버튼의 콘텐츠에 어떠한 시작적 요소도 적용하지 않음

        VStack {
        // 1
            Button("DefaultButtonStyle") {
                // some action
            }
            .buttonStyle(DefaultButtonStyle())
            
            Divider()
        // 2
            Button("BorderlessButtonStyle") {
                // some action
            }
            .buttonStyle(BorderlessButtonStyle())
            
            Divider()
        // 3
            Button(action: {
                // some action
            }) {
                Text("PlainButtonStyle")
            }
            .buttonStyle(PlainButtonStyle()) 
        }

onTapGesture

onTapGesture수식어를 이용하면 버튼을 사용하지 않고도 동일한 기능을 구현할 수 있습니다. 이름에서 알 수 있듯이 Tap했을 때 지정된 동작을 수행하는 수식어로 어느 View에서나 쉽게 추가하고 사용하는 것이 가능합니다.

 

예를 들어 이미지를 눌렀을 때 글자가 출력되도록 하는 기능을 Button과 onTapGesture를 사용하여 비교해보겠습니다.

1. onTapGesture

// onTapGesture

struct ContentView: View {
    @State private var showImage = false
    
    var body: some View {
        VStack {
            if showImage {
                Image(systemName: "moon.stars.fill")
            }
            Text("onTapGesture").onTapGesture {
                self.showImage.toggle()
            }
        }
    }
}

2. Button

//Button

struct ContentView: View {
    @State private var showImage = false
    
    var body: some View {
        VStack {
            if showImage {
                Image(systemName: "moon.stars.fill")
            }
            Button(action: {
                self.showImage.toggle()
            }) {
                Text("Button")
            }
        }
    }
}

TIP

 

 

버튼과 onTapGesture의 다른 점
onTapGesture수식어로는 버튼을 누를 때 동작하는 애니메이션과 같은 기본 효과들이나 커스텀 버튼 스타일 등은 사용할 수 없다는 것을 기억해야 합니다.

 

읽어주셔서 감사합니다🤟