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

오늘은 iOS에서 자주 사용하는 라이브러리로 DropDown 라이브러리를 사용하여 DropDown View를 구현하는 방법을 정리하려고 한다.

왼쪽 같은 DropDown View를 자주 보게 되고 구현해야 하는 상황이 자주 오게 된다.

안드로이드의 경우 Spinner(스피너)라는 위젯을 통해 쉽게 구현이 가능하다.

iOS의 경우 PickerView라는 기본 UI를 제공하지만 왼쪽처럼 구현하기 어렵다.

그래서 DropDown이라는 라이브러리를 자주 사용하게 된다.

그래서 DropDown 라이브러리를 어떤 식으로 사용하고, 커스텀하는지 알아보려고 한다.

 

 

 

 

DropDown 라이브러리는 https://github.com/AssistoLab/DropDown Github 주소를 통해 더 확인 할 수 있다.

 

먼저 코코아팟을 통해 라이브러리를 설치해준다.

pod 'DropDown'

 

그다음 위에서 본 디자인과 똑같은 View를 그리기 위해 스토리보드에서 DropDown View 작업을 해준다.

제가 DropDown View를 구현할 때 UI 구조는 View 안에 TextField를 통해 힌트 텍스트와 선택한 값을 보여주고,

Image View를 통해 DropDown이 열리고 닫히는 아이콘을 표현해준다.

그리고 최단에 Button을 추가하여 Button을 클릭했을 때 아이템 창이 나타나도록 하는 역할을 한다.

 

그런 다음 DropDown을 구현할 ViewController에서 DropDown 라이브러리를 import 하고, IBOutlet들을 연결해준다.

 

DropDown 객체와 아이템 목록을 생성한다.

// DropDown 객체 생성
let dropdown = DropDown()

// DropDown 아이템 리스트
let itemList = ["item1", "item2", "item3", "item4", "item5", "item6"]

 

DropDown UI 커스텀을 위해 라이브러리에서 제공하는 옵션들이 있다.

// DropDown UI 커스텀 
func initUI() {
    // DropDown View의 배경
    dropView.backgroundColor = UIColor.init(hex: "#F1F1F1")
    dropView.layer.cornerRadius = 8
    
    DropDown.appearance().textColor = UIColor.black // 아이템 텍스트 색상
    DropDown.appearance().selectedTextColor = UIColor.red // 선택된 아이템 텍스트 색상
    DropDown.appearance().backgroundColor = UIColor.white // 아이템 팝업 배경 색상
    DropDown.appearance().selectionBackgroundColor = UIColor.lightGray // 선택한 아이템 배경 색상
    DropDown.appearance().setupCornerRadius(8)
    dropdown.dismissMode = .automatic // 팝업을 닫을 모드 설정
        
    tfInput.text = "선택해주세요." // 힌트 텍스트
        
    ivIcon.tintColor = UIColor.gray
}

initUI 메서드를 viewDidLoad()에서 호출하고 실행을 시키면 아래와 같이 구현 할 수 있다.

이제 DropDown 객체에 Item리스트를 연결해주고, Item을 선택 했을 때 등 처리를 구현해주면 된다.

func setDropdown() {
    // dataSource로 ItemList를 연결
    dropdown.dataSource = itemList
    
    // anchorView를 통해 UI와 연결
    dropdown.anchorView = self.dropView
    
    // View를 갖리지 않고 View아래에 Item 팝업이 붙도록 설정
    dropdown.bottomOffset = CGPoint(x: 0, y: dropView.bounds.height)
    
    // Item 선택 시 처리
    dropdown.selectionAction = { [weak self] (index, item) in
        //선택한 Item을 TextField에 넣어준다.
        self!.tfInput.text = item
        self!.ivIcon.image = UIImage.init(named: "ico_triangle_bottom")
    }
    
    // 취소 시 처리
    dropdown.cancelAction = { [weak self] in
        //빈 화면 터치 시 DropDown이 사라지고 아이콘을 원래대로 변경
        self!.ivIcon.image = UIImage.init(named: "ico_triangle_bottom")
    }
}

// View 클릭 시 Action
@IBAction func dropdownClicked(_ sender: Any) {
    dropdown.show() // 아이템 팝업을 보여준다.
    // 아이콘 이미지를 변경하여 DropDown이 펼쳐진 것을 표현
    self.ivIcon.image = UIImage.init(named: "ico_triangle_up")
}

 

selectionAction을 통해 넘어오는 index 또는 item값을 통해 TextField에 넣어 선택 처리를 해준다.

 

이렇게 DropDown을 구현해 봤고 커스텀 할 수 있는 옵션들이 많은 라이브러리로 개발 시 매우 유용하게 사용하고 있다.

아이템 Cell의 경우 TableViewCell XIB을 통해 커스텀 XIB을 붙일 수 있어 더 다양하게 활용할 수 있다.

만약 iOS 개발 중 DropDown을 구현에 있어 이 포스팅을 본 개발자가 있다면, 보고 많은 도움이 되었으면 좋겠다.

여기까지 긴 글 읽어주셔서 감사합니다.