버튼(Button)

버튼은 유저가 탭을 했을 때 특정 작업을 수행하는 뷰 입니다.

버튼의 생성자는 버튼의 외형, 이벤트처리 두가지 를 정의합니다.

Button(action: {
	// 버튼 이벤트가 발생했을 때 수행할 작업
}) {
	Text("Button") // 버튼 UI
}

버튼 레이블

버튼의 외형은 View 프로토콜을 준수하는 타입이라면 어떤것이든 사용할 수 있습니다.

VStack(spacing: 20) {
    Button("Button") {
        print("Button1")
    }
    Button(action: {
        print("Button2")
    }) {
        Text("Button")
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 10)
                    .strokeBorder()
            )
    }
    Button(action: {
        print("Button3")
    }) {
        Circle()
            .stroke(lineWidth: 2)
            .frame(width: 80, height: 80)
            .overlay(Text("Button"))
    }
    .accentColor(.green)
}

VStack(spacing: 20) {
    Button(action: {
        print("Button1")
    }) {
        Image("KotlinLogo")
            .resizable()
            .frame(width: 120, height: 120)
    }
    Button(action: {
        print("Button2")
    }) {
        Image(systemName: "play.circle")
            .imageScale(.large)
            .font(.largeTitle)
    }
}.padding()

버튼 스타일

iOS 기준으로 버튼 스타일은 DefaultButtonStyle, BorderlessButtonStyle, PlainButtonStyle 이렇게 3가지가 제공 됩니다.

VStack(spacing: 20) {
    Button("DefaultButtonStyle") {}
        .buttonStyle(DefaultButtonStyle())
    
    Button("BorderlessButtonStyle") {}
        .buttonStyle(BorderlessButtonStyle())
    
    Button("PlainButtonStyle") {}
        .buttonStyle(PlainButtonStyle())
}

onTapGesture

onTapGesture를 사용하면 Button을 사용하지 않고도 사용자의 탭 이벤트를 받아올 수 있습니다.

VStack(spacing: 20) {
    Image(systemName: "person.circle")
        .imageScale(.large)
        .onTapGesture {
            print("onTapGesture")
        }
    Button(action: {
        print("Button")
    }) {
        Image(systemName: "person.circle")
            .imageScale(.large)
    }
}

내비게이션 뷰(NavigationView)

내비게이션 스택을 이용해 콘텐츠 뷰들을 관리하는 뷰 컨테이너로써 스타일에 따라 UINavigationController 또는 UISplitViewController의 역할을 수행하게 됩니다.

내비게이션 바 타이틀(NavigationBarTitle)

NavigationView {
    Image("KotlinLogo")
        .navigationBarTitle(
            "내비게이션 바 타이틀",
            displayMode: .large
        )
}

NavigationView {
    Image("KotlinLogo")
        .navigationBarTitle(
            "내비게이션 바 타이틀",
            displayMode: .inline
        )
}

내비게이션 바 아이템(NavigationBarItem)