[iOS - HIG] 51. Pull-Down Menus (풀다운 메뉴, UIMenu)

* Pull-Down Menu는 Context Menu와 유사하므로 주의: https://ios-development.tistory.com/540?category=980570 

[iOS - HIG] 45. Context Menus

Pull-Down Menus

• iOS14+ 
• 현재 컨텍스트에서 유용한 작업 목록을 나열하는 메뉴
  • 메뉴를 표시하는 버튼 근처에 메뉴가 열리므로 사용자들이 수행중인 작업 간의 관계를 즉시 이해
  • Pull-Down는 빠르게 애니메이션으로 표출되고 화면이 어두워지지 않으므로 가벼운 느낌을 사용자에게 제공
  • UIMenu 가이드

사용방법

• button.menu에 UIMenu 객체 삽입
• UIMune의 생성자 파라미터 children에 UIAction 객체 삽입

class ViewController: UIViewController {

    lazy var button: UIButton = {

        let button = UIButton(type: .system)
        button.frame.origin = .init(x: view.center.x - 100, y: view.center.y - 100)
        button.frame.size = .init(width: 200, height: 200)
        button.setTitle("Pull-Down 메뉴 버튼", for: .normal)
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(button)

        let favorite = UIAction(title: "평점입력", image: UIImage(systemName: "star"), handler: { _ in print("평점입력") })
        button.menu = UIMenu(title: "타이틀",
                             image: UIImage(systemName: "heart"),
                             identifier: nil,
                             options: .displayInline,
                             children: [favorite])
    }
}

• 결과 - 길게 누를 경우 Pull-down 메뉴 표출

Pull-Down Menu(UIMenu) 가이드

• 모든 작업을 메뉴에 넣게되면 사용자들이 작업을 수행하기 위해서는 길게 or 적어도 두 번 탭해야 하므로 모든 기능 넣는것을 지양
• 메뉴를 사용하여 작업과 직접 관련된 옵션을 표출
  • 추가 버튼을 탭 -> 추가 할 항목을 지정할 수 있는 메뉴
  • 앱이 정렬을 지원 -> 메뉴를 사용하여 사용자들이 정렬 할 속성을 선택 가능
• 그룹화된 메뉴를 사용하여 보조 앱 작업을 제공

• 메뉴를 표시할땐 '원형 버튼 안에 줄임표 기호'이미지로 추가 버튼을 사용
• 구분 기호를 사용하여 관련 메뉴 항목을 시각적으로 그룹화
  • 시각적 그룹화를 만들면 사용자들이 메뉴를 더욱 빠르게 검색 가능
  • 단 메뉴에서 세 개 이상의 그룹을 사용하면 구문 분석이 어려워 지는점 주의
• 메뉴 항목이 destructive할 경우, 의도를 확인하고 요청
  • 빨간색 텍스트를 통해 destructive를 알리고, 누를경우 확인/취소 옵션을 주는 action sheet를 표출
• 메뉴에서 glyph인 SF symbol을 사용하여 친숙한 경험 제공

* 참고

https://developer.apple.com/design/human-interface-guidelines/ios/controls/pull-down-menus/