Button

특정 동작을 수행할 수 있는 버튼을 만들 때 사용합니다.

 

action과 label이 있는 버튼을 만들어서 버튼을 탭 또는 클릭했을 경우 action을 수행할 수 있는 코드를 만들 수 있습니다. label을 사용하면 버튼이 어떤 동작을 수행하는지에 대해 묘사할 수 있습니다. 예를 들어 다음 코드처럼 "Sign In"이라는 버튼을 만들 수 있습니다

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

 

또는 Lable view를 사용하여 제목과 아이콘을 동시에 유저한테 보여줄 수 있습니다.

Button(action: signIn) {
    Label("Sign In", systemImage: "arrow.up")
}

 

흔히 사용되는 것으로 클로저를 통해서 설정하지 않고 Button의 첫번째 인자로 title을 문자열로 또는 LocalizedStringKey로 선택적으로 설정하고 이미지의 이름이나 저장된 이미지를 2번째 인자로 받을 수 있으며 이를 convenience initializer 라고 부릅니다.

Button("Sign In", systemImage: "arrow.up", action: signIn)

 

title과 icon을 제공하고 싶다면 convenience initializer 또는 Label view를 사용합니다. convenience initializer 는 버튼이 toolbar과 menu와 같은 컨테이너에서 제목과 아이콘을 올바르게 렌더링하기 위해 모양을 동적으로 조정할 수 있게 합니다. 예를 들어 iOS에서 버튼은 toolbar에 위치할때만 아이콘을 보여줍니다, 하지만 menu에서는 왼쪽에 title 오른쪽에 icon을 기본으로 합니다. label을 다음과 같이 정의하여 접근성을 도와줍니다. 예를 들어 iconOnly로 설정된 labelStyle():) modifier 를 적용하면 title은 accessibility mode에서는 보여주되 iconOnly에서는 icon만 화면에 보여주도록 설정됩니다.

Button("Sign In", systemImage: "arrow.up", action: signIn)
    .labelStyle(.iconOnly)

 

접근성 label 없이 이미지나 시각적 구성 요소만 사용하는 label을 피하세요.

 

• iOS, watchOS 에서는 유저가 버튼을 tap 합니다.
• macOS 에서는 유저가 버튼을 click 합니다.
• tvOS 에서는 user는 select 을 Siri Remote 같은 외부 원격으로 press 합니다

Adding buttons to containers

작업을 시작하는 모든 UI 에 버튼을 사용하세요. 버튼은 이러한 다양한 컨테이너와 콘텐츠 내에서 예상되는 스타일에 맞게 시각적 스타일을 자동으로 조정합니다. 예를 들어, 사용자가 선택할 때 작업을 시작하는 List cell을 만들려면, 목록의 콘텐츠에 버튼을 추가하세요

List {
    // Cells that show all the current folders.
    ForEach(folders) { folder in
        Text(folder.title)
    }


    // A cell that, when selected, adds a new folder.
    Button(action: addItem) {
        Label("Add Folder", systemImage: "folder.badge.plus")
    }
}

 

비슷하게 contextMenu(_:) modifier 콘텐츠 내부에 동작을 수행하는 context menu item 을 만듭니다.

.contextMenu {
    Button("Cut", action: cut)
    Button("Copy", action: copy)
    Button("Paste", action: paste)
}

 

이 패턴은 Form 인스턴스와 같은 사용자 정의 가능한 상호작용 콘텐츠가 있는 SwiftUI의 대부분의 다른 컨테이너 view로 확장됩니다.

 

Assingning a role

ButtonRole을 사용하여 버튼을 선택적으로 버튼의 목적을 설정할 수 있습니다. 만약 delete 동작을 수행하는 destructive 버튼을 만들때 같은 예시가 있습니다.

 Button("Delete", role: .destructive, action: delete)

 

시스템은 버튼의 role 통해 모든 context에서 버튼의 스타일을 적절하게 정하게 해줍니다. 예를 들어 destructive 버튼은 foreground color가 빨간색으로 나타납니다

 

만약 버튼의 role을 명시하지 않는다면 시스템은 기본값으로 표현합니다.

 

Styling buttons

버튼은 외관을 bordered 처럼 buttonStyle(_:) 을 통해서 꾸밀 수 있습니다.

HStack {
    Button("Sign In", action: signIn)
    Button("Register", action: register)
}
.buttonStyle(.bordered)

 

만약 스타일을 지정했다면 아래처럼 나타납니다

또한 style은 커스텀화 해서 만들 수 있습니다. 표준 interaction behavior로 사용자 지정 외관을 추가하려면, ButtonStyle 프로토콜을 준수하는 스타일을 만드세요. 외관과 상호작용 behavior를 커스텀화 하려면 PrimitiveButtonStyle 프로토콜을 준수하는 style을 만드세요. 커스텀 style은 버튼의 role 을 읽을 수 있으며 버튼의 외관을 조정하는데 사용할 수 있습니다.

 

ButtonStyle 프로토콜을 준수하면 버튼에 사용할 스타일을 makeBody에 정의해야합니다. Configuration은 버튼의 프로퍼티를 의미하며 configuration을 통해서 버튼의 isPressed, role, label에 접근할 수 있게 하는데 아래는 label을 선택하였습니다, 그리고 configuration.label 을 통해서 label 을 수정하여 수정된 버튼의 label을 사용자한테 보여줍니다.

struct MyStyle: ButtonStyle {
   func makeBody(configuration: MyStyle.Configuration) -> some View {
      let pressed = configuration.isPressed
      return configuration.label
         .padding()
         .border(Color.green, width: 5)
         .scaleEffect(pressed ? 1.2 : 1.0)
   }
}

 

만들어진 ButtonStyle은 다음과 같이 사용됩니다.

.buttonStyle(MyStyle())