UIKit) Pull Down Button 과 Pop Up Button

 

Pull Down Button

A pull-down button displays a menu of items or actions that directly relate to the button’s purpose.

풀다운 버튼을 사용하여 버튼의 동작과 직접 관련된 명령이나 항목을 표시한다. 메뉴를 사용하면 사용자가 인터페이스에 추가 버튼을 요구하지 않고도 버튼의 대상을 명확히 지정하거나 동작을 사용자 지정할 수 있다.

예시 )

• 추가 버튼은 사용자가 추가하려는 항목을 지정할 수 있는 메뉴를 제공할 수 있습니다.

• 정렬 버튼은 사람들이 정렬할 속성을 선택할 수 있도록 메뉴를 사용할 수 있습니다.

• 뒤로 버튼을 사용하면 사람들이 이전 위치를 여는 대신 다시 방문할 특정 위치를 선택할 수 있습니다.

 

즉 풀다운 버튼은 어플리케이션이 어떠한, 특정 동작이나, 행위를 하는데 사용하는 버튼이다.

예를들어 “전체 선택하기”, “삭제하기” 등등이 있다.

 

Pop up Button

A pop-up button displays a menu of mutually exclusive options.

팝업 버튼은 단순한 목록을 보여줄때 혹은, 명령이 아닌 상호 배타적인 선택 목록을 제공해야 하는 경우 대신 팝업 버튼을 사용한다.

상호 배타적이란, 서로 옵션이 전혀 겹치지 않는 경우를 의미하며, 예를들어, 노래 정렬의 경우 ”최신추가순”, “많이들은순” 과 같은 완전히 상관없는 리스트를 의미한다.

 

팝업버튼의 사용방법 )

• 기본선택을 제공할것

• 해당 팝업이 어떠한 값을 가지고 있는지 암시적으로 이해할 수 있도록 도움을 줄것

• 공간의 제약이 있으면서, 항상 모든 옵션을 표시할 필요가 없을 경우 사용하게 된다.→ 세그먼트 컨트롤의 경우에는 항상 모든 옵션을 보여주지만 그럴 필요 없을 때, 공간이 협소할 때 사용

 

Pull down과 Pop up 버튼 만들어 보기

놀랍게도 Pull down 버튼과 Pop up 버튼은, 그냥 일반적인 버튼에서 여러 옵션을 추가해서 만드는것이다.

그럴거면 왜 넣어둔거임 개쉑

사용해야하는것은 UIButton 에 iOS 14 부터 추가된 menu를 사용하면된다.

1. Menu생성하기

uiAction의 배열을 생성해 준다.

lazy var menuItems: [UIAction] = { 	return [ 		UIAction( title: "hi", image: UIImage(systemName: "chevron.down"), handler { _ in print("hellow") }, 		UIAction( title: "name", image: UIImage(systemName: "chevron.down"), handler { _ in print("hellow") }, 		UIAction( title: "hellow", image: UIImage(systemName: "chevron.down"), handler { _ in print("hellow") }, 	] } lazy var menu: UIMenu = {  		return UIMenu(title: "", options: [], children: menuItems) }

아니면 따로 UIAction 만들어서 배열로 추가해줘도 됨.

 

let ok = UIAction(title: "ok", image: UIIamge("암거나"), handler { _ in print("ok")} let cancle = UIAction(title: "cancle", image: UIImage("암거나"), handler { _ in print("cancle")}  var menu: UIMenu = { 		return UIMenu(title: "", children: [ok, cancle]) }

2. 버튼에 메뉴 추가하기

let menuButton = UIButton() menuButton.menu = menu //viewDidLoad에서 추가

 

---

추가요소

1. showsMenuAsPrimaryAction

showMenuAsPrimaryAction은 기본값이 false이지만, 이러한 경우에는 버튼을 길게 눌렀을때만 메뉴가 보인다.

하지만 해당 옵션을 true로 바꾸면 짧게 눌렀을 때도 메뉴가 나온다.

2. changesSelectionAsPrimaryAction

해당 옵션의 기본값은 true이다.

해당옵션이 true일때는, 짧게 눌러도 버튼이 토글된다. → 우리가 아는 눌렸을때 색이 변하고 하는것

해당옵션이 false일때는 길게 눌러야 버튼이 토글괸다.

즉 기본적으로 menu를 사용할때는 꾹 눌렀을때 버튼이 눌리고 매뉴가 나오는것을 원한다면

• showMenuAsPrimaryAction = false && changesSelectionAsPrimaryAction = false

하면된다.

 

 

 

Uploaded by

N2T