SwiftUI 버튼

Posted on | In

개요

어플에서 버튼을 추가하는 방법에 대해서 알아보겠다.

애플 공식문서



버튼

struct Button<Label> where Label : View

어플에서 탭을 했을 때 특정 작업을 수행하게 하는 가장 기본적인 컨트롤이다.

버튼에는 여러 생성자가 있다.

그냥 앱에서 흔히 보는 버튼들을 만드는 구조체이다.


뷰와 컨트롤의 차이

텍스트, 색, 이미지처럼 화면에 콘텐츠를 표현하는 것에 초점을 두는 것을 뷰.

상호작용을 할 수 있도록 추가적인 행동이 정의된 뷰를 컨트롤이라고 한다. 크게 그냥 다 뷰라고 해도된다.



버튼 레이블

레이블은 뷰 프로토콜을 준수하는 타입이면 모두 가능하다.

1
2
3
4
5
6
7
8
9
10
11
HStack() {
  Button("button") {
    print("Button1")
  }
  
  Button(action: { print("Button2") }) {
    Text("Button")
      .padding()
      .background(Rectangle().strokeBorder())
  }
}

위의 예시처럼 버튼의 이름(레이블), 그리고 버튼이 눌렸을 때 실행할 작업을 적어줘도 되고

레이블 위치에 실행할 작업을 적고 블럭 안에 레이블의 코드를 적어도 된다.

여기서는 텍스트로만 했는데 이미지로 해도된다.



ButtonStyle

ButtonStyle의 수식어를 사용하면 버튼의 스타일을 적용할 수 있다.

버튼 스타일로는 3가지를 제공한다.

  • DefaultButtonStyle : 디폴트 버튼으로 모든 OS에서 사용할 수 있다.
  • BorderlessButtonStyle : iOS에서의 버튼은 모두 테두리가 없다. 다른 OS에서 유용
  • PlainButtonStyle : 대기 상태일 때는 시각적 요소를 적용하지 않는다.
1
2
3
4
5
6
7
VStack() {
  Button("default") {}
    .buttonStyle(DefaultButtonStyle())
  Button("default") {}
    .buttonStyle(BorderlessButtonStyle())
  Button("default") {}
    .buttonStyle(PlainButtonStyle())



onTapGesture

버튼을 사용하지 않고 특정 뷰를 탭하면 작업을 실행하는 수식어이다.

외형도 동일하고 작업도 동일하지만 커스텀을 할 수는 없다.

1
2
3
4
5
6
Image(systemName: "person.circle").imageScale(.large)
  .onTapGesture { print("onTapGesture") }

Button(action: { print("버튼") }) {
  Image(systemName: "person.circle").imageScale(.large)
}



EditButton

아이폰 앱을 쓰다보면 Edit 버튼이 있고 누르면 목록들을 수정할 수 있는 것을 본적이 있다. 이 기능을 구현하려면 EditButton을 사용하면 된다.

누르면 EditMode로 변환한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@State private var fruits = [
    "Apple",
    "Banana",
    "Papaya",
    "Mango"
]

var body: some View {
    NavigationView {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
            .onDelete { fruits.remove(atOffsets: $0) }
            .onMove { fruits.move(fromOffsets: $0, toOffset: $1) }
        }
        .navigationTitle("Fruits")
        .toolbar {
            EditButton()
        }
    }
}