[SwiftUI] SwiftUI에서 Button(버튼) 사용하기

안녕하세요, HoonIOS입니다.

SwiftUI에서 Button 사용자의 탭 이벤트를 통해 특정 작업을 할 수 있게 기본적으로 제공하는 컨트롤러입니다. 

즉 UIKit에서는 UIButton하고 같은 역할을 하는 친구라고 생각을 하시면 더 이해하기 쉬우실 거 같습니다.

 

애플 공식문서에서는 어떻게 정의하고 있는지 한번 확인해보겠습니다.

• 말 그대로 행동을 이니셜라이저해 컨트롤하는 거라고 쓰여있네요, 말 그대로 행동을 컨트롤한다! 이거입니다.

 

버튼의 생성자는 모두 2가지 매개변수를 정의를 하고 있습니다.

한 개는 버튼의 외형을 구분해주는 거고 다른 하나는 이벤트가 발생했을 때의 처리를 해주는 코드입니다.

 

이해가 안 되실 수 있으니 아래 버튼한개를 생성해보겠습니다.

var body: some View {
    VStack {
        Button(action: {
            print("Hello is HoonIOS")
        }, label: {
            Text("Hoons")
        })
    }
}

위 코드와 같이 살펴보면 버튼을 누르면 Hello is HoonIOS를 로그로 표출해달라고 했고 버튼의 Label은 Hoons로 설정을 해줘라고 코드를 부여해줬습니다.

 

그 결과 왼쪽과 같이 버튼이 표현되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

버튼의 제네릭 매개변수 Label에는 뷰 프로토콜을 준수하는 타입이면 무엇이든 사용할 수 있습니다.

 

버튼의 Label을 이용해 버튼을 여러 형식으로 나눠서 적용하는 방식을 살펴보겠습니다.

 

1.
Button(action: {
    print("Hello is HoonIOS")
}, label: {
    Text("Hoons")
})

2.
Button(action: {
    print("Hello is HoonIOS 2")
}, label: {
    Text("Hoons2")
        .padding()
        .background(Capsule().strokeBorder())
})

3.
Button(action: {
    print("Hello is HoonIOS 3")
}){
    Circle()
        .stroke(lineWidth: 2)
        .frame(width: 80, height: 80)
        .overlay(Text("Hoons3"))
}

1. 터치 이벤트랑 텍스트만 표현하기 위해서는 단순하게 action과 title 매개변수를 사용해서 터치 이벤트와 버튼 title을 구분해줄 수 있습니다.
   
   
   
2. 버튼의 텍스트 주변에 백그라운드를 Capsule을 이용해서 외곽선을 그려줬습니다. 
   그럼 버튼 외각에 Radius가 적용되는 사각형이 표출되는 것을 확인할 수 있습니다.
   
   
   
3. 이번 항목은 2번 항목과는 다르게 외곽석을 먼저 그리고. overlay 메서드를 통해 그 위에 텍스트를 올려줬습니다. 
   즉 2번은 텍스트를 구성하고 background를 설정해준 반면에 3번 방식은 외곽선을 그리고 텍스트를 올려준 것입니다.

 

 

 

 

버튼에 이미지 넣기

UIKit와 똑같이 SwiftUI에서 이미지를 넣을 수 있습니다. 

 

한번 버튼에 시스템 이미지를 적용해보겠습니다.

 

Button(action: {
    print("Hello is HoonIOS2")
}, label: {
    Image(systemName: "arrow.clockwise.circle")
        .imageScale(.large)
        .font(.largeTitle)
})

1. 위의 방식으로 label 매개변수에 Image객체를 생성해 크기와 폰트를 지정해주면 사이즈와 이미지가 버튼에 적용되는 것을 볼 수 있습니다.
   
   
2. 버튼 이미지를 사용할 때 주의할 점은 버튼에 이미지를 넣으면 이미지 원본 색상을 잃어버리고 AccentColor의 색으로 뒤덮이게 됩니다.
   이럴 때는 랜더링 모드를 변경해주거나 버튼 스타일을 적용해주면 해결이 됩니다. 
   
   
   

 

 

 

 

 

- 이미지가 색상을 잃어버렸을 때

랜더링 모드)
즉 이미지가 원본 색상을 잃어버리게 된다면 이것은 시스템이 자동으로 template모드로 적용시키기 때문에 색상을 잃어버리게 됩니다.

따라서. renderingMode(. original)로 이미지를 설정해주면 됩니다.

 

버튼 스타일)

버튼 스타일 수식어에는 디폴트 값으로 DefaultButtonStyle을 사용하게 됩니다. 

PlainButtonStyle의 효과는 별도로 시각적 요소를 적용하지 않고 버튼을 누르거나 포커스 되어 있을 때 그리고 비활성화된 상태일 때만 지정된 효과를 적용하는 것입니다.

만약 이미지를 색상대로 표현해주고 싶으면. buttonStyle(. PlainButtonStyle)을 적용해주면 됩니다.
버튼 스타일에는 크게 3가지가 있습니다.

 

1. DefaultButtonStyle
   - 버튼 스타일 생략시 기본적으로 적용되는 값, 이 스타일은 환경에 따라 시스템이 알아서 버튼 스타일을 반영하게 됩니다.
2. BorderlessButtonStyle
   - 기본 반영되는 스타일입니다. 콘텐츠에 미리 지정된 시각적 효과가 적용이 되고 테두리를 그리지 않습니다.
   해당 스타일은 WatchOS에서는 사용할수 없고 MacOS에서는 BorderedButtonStyle이 함께 제공이 됩니다.
3. PlainButtonStyle
   - 모든 OS에서 사용할수 있는 버튼 스타일로 어떠한 시각적 요소가 적용되지 않는 스타일입니다.

 

onTapGesture 리스너

Button을 통해 action을 등록하는 경우 말고도 다른 객체에게도 탭 체스처를 적용할 수 있습니다.

 

onTapGesture 수식어를 사용하면 버튼을 이용하지 않고도 탭 기능을 구현할 수 있습니다.

이 수식어는 어느 뷰에서나 쉽고 간단하게 추가할 수 있습니다.  

 

onTapGesture을 어떻게 사용하는지 한번 살펴보겠습니다.

Image(systemName: "arrow.clockwise.circle")
    .imageScale(.large)
    .font(.largeTitle)
    .onTapGesture {
        print("Image onTapGesutre")
	}

이런 식으로 뷰에 onTapGesture을 등록해주면 됩니다.

 

onTapGesture 수식어는 하이라이트 애니메이션과 같은 기본 효과들은 사용할 수 없고 커스텀 버튼 스타일을 사용할수 없는 점은 주의해야 할 점입니다.