Swift DropDown 메뉴 만들기

오늘은 Swift 에서

드랍다운(DropDown) 메뉴를 만드는 방법을 알아볼까합니다.

 

#DropDown(드랍 다운) 메뉴란?

- 아래처럼 사용자가 특정 항목을 눌렀을때 리스트가 펼쳐지는 걸 말합니다. 

- 보통 보여줘야 할 항목이 많은 경우 자주 씁니다. 

요렇게 생긴걸 드랍다운 메뉴라고 합니다.

본격적인 시작전에

 

* Xcode 14 에서 pod init 이 안되는 경우가 있습니다. 

- 안되시는 분들은 아래 링크를 참고해주세요!

https://world-of-larooly.tistory.com/31

Xcode 14 pod init 안되는 경우 (버전 버그)

 

이제 시작해 볼까요?

 

이번에 사용할 Pod 입니다. 

미리 추가를 하고 시작하도록 합시다.

pod 'DropDown' // 먼저 설치해주시고 

import DropDown // 코드를 작성할 부분 위에 적어주세요.

저희도 위랑 비슷한 형태로 만들어 봅시다. 

 

일단 스토리보드에서 필요한 것들을 추가해 봅시다. 

저는 일단 이렇게 만들었는데 레이아웃은 원하시는 대로 만드시면 됩니다. 

저는 총 3개의 뷰 이름을 이렇게 이름을 만들어주었습니다. 

@IBOutlet weak var totalDropDownView: UIView! // 전체 뷰
@IBOutlet weak var displayLbl: UILabel! // 라벨
@IBOutlet weak var dropDownBtn: UIButton! // 버튼

그리고 본격적인 시작 전에 어떤 리스트를 보여줄지 만들어야겠죠?  

let activeSports = ["런닝/마라톤","걷기","테니스/스쿼시","등산","요가/필라테스","자전거","배드민턴","헬스/크로스핏","수영","클라이밍","축구","농구","야구","배구","볼링","탁구","당구/포켓볼","복싱","스키/보드","기타"]

 

일단 DropDown 은 기본 View의 속성값을 가지고 있기 때문에

backgroundColor, shadow, cornerRadius 를 설정할 수 있습니다.

(필요하신 분들은 참고해주세요.) 

 

이제 버튼을 연결해 코드를 붙여봅시다. 

    @IBAction func clickDropDownAction(_ sender: Any) {
        let dropDownView = DropDown() // DropDown 생성
        dropDownView.dataSource = self.activeSports // 어떤 데이터를 보여줄건지
        dropDownView.cellHeight = 40 // 각 칸의 높이
        dropDownView.separatorColor = .gray // 각 칸별 구분선 색상
        dropDownView.textFont = .systemFont(ofSize: 12)// 칸별 폰트
        dropDownView.anchorView = self.totalDropDownView // 어느 뷰 위치에 넣을것인지
        dropDownView.bottomOffset = CGPoint(x: 0, y:(dropDownView.anchorView?.plainView.bounds.height)!)// 지정뷰의 어느위치에 넣을것인지
        // 이걸 설정안하면 뷰를 가리면서 메뉴가 나오게됩니다!
    
        dropDownView.direction = .bottom // 드랍 다운 방향
        dropDownView.show() // 드랍다운 보여주기
        
        dropDownView.selectionAction = { [unowned self] (index: Int, item: String) in
            // 항목 선택시 작동
            print("선택한 아이템 : \(item)")
            print("인덱스 : \(index)")
            // 해당 뷰에서 어떻게 할건지 선택가능
            self.displayLbl.text = item // 선택한 아이템 값을 라벨에 넣어주기 
            
        }
        
    }

뭔가 원하던 기능은 맞는데....

실제로 실행해보면 상당히 어색하다는 걸 알 수 있습니다.

그래서 저희는 조금 더 다듬어 보겠습니다. 

    @IBAction func clickDropDownAction(_ sender: Any) {
        let dropDownView = DropDown() // DropDown 생성
        dropDownView.dataSource = self.activeSports // 어떤 데이터를 보여줄건지
        dropDownView.cellHeight = 40 // 각 칸의 높이
        dropDownView.cornerRadius = 5.0 // 전체 코너 둥글게
        dropDownView.backgroundColor = self.displayLbl.backgroundColor// 배경색
        dropDownView.shadowOffset = .init(width: 0, height: 10) // 그림자 배치

        dropDownView.separatorColor = .clear // 각 칸별 구분선 색상
        
        dropDownView.layoutMargins = .zero
        dropDownView.textFont = .systemFont(ofSize: 17)// 칸별 폰트
        dropDownView.anchorView = self.totalDropDownView // 어느 뷰 위치에 넣을것인지
        dropDownView.bottomOffset = CGPoint(x: 0, y:(dropDownView.anchorView?.plainView.bounds.height)!)
        // 지정뷰의 어느위치에 넣을것인지
        // 이걸 설정안하면 뷰를 가리면서 메뉴가 나오게됩니다!
        
        dropDownView.direction = .bottom // 드랍 다운 방향
        dropDownView.offsetFromWindowBottom = 200
        //리스트가 길어질 때 밑에서 얼마나 띄울것인지
        // 안넣으면 위처럼 하단 여유공간 없이 나오게 됩니다!
        dropDownView.show() // 드랍다운 보여주기

        dropDownView.selectionAction = { [unowned self] (index: Int, item: String) in
            // 항목 선택시 작동
            print("선택한 아이템 : \(item)")
            print("인덱스 : \(index)")
            // 해당 뷰에서 어떻게 할건지 선택가능
            self.displayLbl.text = item // 선택한 아이템 값을 라벨에 넣어주기

        }

    }

 

아까보다는 보기 좋아진 것 같네요.

 

참고로 선택했을때 저 회색으로 나오는 것도 당연히 바꿀 수 있습니다.

dropDownView.selectionBackgroundColor = .green // 선택한 항목 배경 색상

 

생각보다 편리한 부분인 것 같아서

누군가에게 도움이 되었으면 하는 마음에

올려봅니다. 

 

오늘도 파이팅입니다~