iOS Swift 라이브러리 DropDown 사용하기

안녕하세요 Gons 입니다.

오늘은 DropDown 메뉴를 만들어보겠습니다.

아이폰 사용자라면 기본적으로 PickerView 를 많이들 보셨을텐데요

 

UIPickerView

 

이렇게 생겼습니다.

기본 라이브러리기 때문에 이게 좋으시면 이것을 사용하시면 되고요

 

 

 

 

 

 

오늘 해볼 DropDown 메뉴는요

이렇게 생겼습니다.

 

DropDown

 

안드로이드에는 Spinner 라고 기본적으로 있는걸로 알고 있습니다.

이거를 원한다면 따라오시죠.

Let's Go~

 

 

 

 

 

 

 

먼저 우리가 사용할 라이브러리 입니다.

https://github.com/AssistoLab/DropDown

↑↑ 여기 주소입니다.

 

 

 

 

 

pod 설치코드입니다. podfile 에 넣어서 pod install 해주시고요

pod 'DropDown'

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

 

 

 

 

 

사용할 ViewController 에서 DropDown 라이브러리를 import 해줍니다.

import DropDown

※ 여기서 import 에 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

 

 

 

객체를 만들어줍니다.

let dropDown = DropDown()

 

 

 

데이터소스를 넣어주시고요.

dropDown.dataSource = ["피자", "치킨", "족발보쌈", "치즈돈까스", "햄버거"]

 

 

 

드롭다운 메뉴 여는 코드입니다.

dropDown.show()

버튼 하나 만들어서 누를때 바로 한번 보여줘보도록 하겠습니다.

 

 

 

 

DropDown Basic

 

잘 나오긴 하는데 view 의 정가운데로 가버리네요. 조정해보겠습니다.

 

 

 

 

anchorView 를 버튼으로 붙이겠습니다. (btn 이 위의 파란색 DropDown 테스트 버튼입니다.)

dropDown.anchorView = btn

한번 보겠습니다.

 

 

 

DropDown.anchorView

 

그러면 이렇게 버튼을 덮어서 나옵니다. 버튼 가리면서 메뉴 보여지는게 좋으시면 이렇게만 하시면되고,

 

 

버튼을 가리는게 싫으시다 하면은 이렇게

dropDown.bottomOffset = CGPoint(x: 0, y:(dropDown.anchorView?.plainView.bounds.height)!)

이 코드를 추가해주세요. 그러면

 

 

 

DropDown.bottomOffset

 

이렇게 버튼 아래로 표시됩니다.

 

 

 

 

 

내용물도 디테일하게 바꿀 수 있습니다. 하나씩 살펴볼까요?

 

가로 길이를 지정할 수 있습니다.

dropDown.width = 150

 

 

글자색을 바꿀 수 있고요

dropDown.textColor = UIColor.black

 

 

선택된 메뉴 글씨 색깔도 바꿀 수 있습니다.

dropDown.selectedTextColor = UIColor.red

 

 

폰트 사이즈 역시 바꿀 수 있고요

dropDown.textFont = UIFont.systemFont(ofSize: 20)

 

 

배경색도 바꿀 수 있답니다.

dropDown.backgroundColor = UIColor.white

 

 

선택된 메뉴 배경색도 바꿀 수 있고요

( 기본값이 회색인데 아무색도 안나오게 하고 싶다면 배경색과 똑같게 맞추면 됩니다. )

dropDown.selectionBackgroundColor = UIColor.white

 

 

높이 역시 지정 가능합니다.

dropDown.cellHeight = 50

 

 

모서리를 둥글게 만들 수 있습니다. ( 각진게 싫다면 써주시고요 )

dropDown.cornerRadius = 15

 

 

마지막으로 선택한 값을 가져와야겠죠?

dropDown.selectionAction = { [unowned self] (index: Int, item: String) in
	print("선택한 아이템 : \(item)")
	print("인덱스 : \(index)")
}

이런식으로 아이템의 인덱스와 이름을 가져올 수 있습니다. 

 

 

 

그리고 드롭다운 메뉴를 다시 열 때 이전에 선택한 아이템이 선택되어 있는 상태로 켜지는데요

dropDown.selectionAction = { [unowned self] (index: Int, item: String) in
	print("선택한 아이템 : \(item)")
	print("인덱스 : \(index)")
	self.dropDown.clearSelection()
}

이런식으로 적어서 다시 메뉴 열때 이전에 선택한 값이 선택되어있지 않은 상태로 열 수 있습니다.

 

 

 

 

 

자 그러면 여태까지 작성한 것을 마지막으로 한번 보고 끝내겠습니다.

 

DropDown

 

아주 잘 나오네요.

 

 

 

 

 

 

자! 오늘 이렇게 해서 DropDown 메뉴 아주 간편하게 만들어봤는데요

유익한 글이었는지 모르겠습니다.

문의 사항이 있으시면 댓글로 남겨주세요.

다음에 더 유용한 정보로 찾아오겠습니다.

감사합니다.