32. [SwiftUI] .contextMenu() 컨텍스트 메뉴, Label()

보통 여러 버튼을 띄워야 할 때 알럿, 액션시트를 활용하는데 컨텍스트메뉴라는 녀석도 있다.

아 근데 보니까 아이폰6s부터 생겼던 '3D Touch'가 바로 떠올랐다.

아이콘을 꾹 누르고 있으면 압력을 감지해서 버튼이 쪼르르 나왔던 그..!

근데 요즘은 아이폰에 3D Touch, 포스터치가 다 사라졌기에.. 그냥 이런 것도 있다 정도로 참고하면 좋을듯 하다.

 

위와 같이 꾸욱 누르고 있으면 메뉴가 뜬다.

//  Created by Toughie on 2023/04/29.
//

import SwiftUI

struct ContextMenuPrac: View {
    
    @State var backgroundColor = Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1))

    var body: some View {
        VStack(alignment: .leading, spacing: 10.0) {
            Image(systemName: "apple.logo")
                .font(.title)
            Text("SwiftUI")
                .font(.headline)
            Text("Better apps. Less code.")
                .font(.subheadline)
        }
        .foregroundColor(.white)
        .padding()
        .background(backgroundColor.cornerRadius(10))
        .contextMenu {
            Button {
                backgroundColor = .green
            } label: {
                Label("airtag", systemImage: "airtag.fill")
            }
            
            Button {
                backgroundColor = .cyan
            } label: {
                Label("applewatch", systemImage: "applewatch.watchface")
            }
            
            Button {
                backgroundColor = .pink
            } label: {
                HStack {
                    Text("airpods")
                    Image(systemName: "airpods.gen3")
                }
            }
        }
    }
}

위 코드에서 Label과 관련된 부분을 간단하게 보고 넘어가자.

 

Label

시뮬레이터에서 보면 

Label("airtag", systemImage: "airtag.fill")

HStack { Text("airtag"); Image(systemName: "airtag.fill") }

은 완전 동일해 보인다.

 

Label은 Text와 Image의 조합으로 구성된 특별한 SwiftUI View

Label에는 텍스트와 이미지가 함께 표시되며, 텍스트와 이미지 각각에 대한 액세스 가능성을 제공하는 추가 기능 존재.

(ex. VoiceOver와 같은 접근성 기능에서는 라벨의 텍스트를 사용하여 콘텐츠를 읽어줄 수 있다. )

 

HStack은 여러 뷰를 가로로 배치하기 위해 사용하는 뷰 컨테이너다.(뷰를 담는)

당연히 Text와 Image를 함께 배치할 수는 있지만 Label과 다르게 접근성&다국어 지원과 같은 추가 기능을 제공할 수 없다는 차이가 있다.

 

단순한 UI는 HStack을 사용해도 괜찮지만, 접근성이나 다국어 지원이 필요한 케이스에는

Label의 특징을 인지하고 활용하는 것도 좋겠다.

 

 

contextMenu...

개인적으로는 뷰가 조금씩 커지며 뾱! 하고 버튼이 나오는 애니메이션이 정말 마음에 들지만,

각 버튼의 커스텀이 어렵고 무엇보다도
유저에게 이것을 누르면 버튼들이 나옵니다! 라고 전달하기가 어렵다는 치명적인 단점이 있다.

여기를 꾹 누르세요 이런 안내 문구가 있다면 모를까..

3D Touch 도입 이후 해당 기능이 활성화 되었다면 

액션시트보다 컨텍스트메뉴가 더 널리 쓰이고 있지 않을까?하는 생각을 해본다.