[swift] 버튼클릭 시 드롭다운되는 뷰를 만들기

안녕하세요~

 

오늘은 프로젝트에서 사용했던 드롭다운 뷰에 대해서 정리하려고 합니다 : )

 

구현했던 드롭다운 뷰는 다음영상과 같습니다.

 

실행화면

영상 설명

다른 유저와의 채팅화면에서 메뉴버튼을 클릭할 시

유저 신고, 약속 취소, 리뷰 등록 세 가지 버튼이 내려옵니다.

 

드롭다운 구현하기

첫 번째 , 드롭 다운 할 뷰를 만들기

가장 먼저 드롭다운할 뷰를 만들었습니다. 

각각의 버튼은 x 좌표를 비율에 따라 설정해주었는데

가운데 있는 것을 중앙에 두고 양쪽으로 비율에 맞게 배치했습니다.

 

final class DropDownView: UIView {
    // 신고 버튼    
    let reportButton = UIButton().then {
        $0.configuration = .menuStyle(title: "새싹 신고", image: R.image.siren()!)
        $0.layer.borderWidth = 0
        $0.layer.borderColor = UIColor.clear.cgColor
    }
    // 약속 취소 버튼
    let cancelButton = UIButton().then {
        $0.configuration = .menuStyle(title: "약속 취소", image: R.image.cancelMatch()!)
        $0.layer.borderWidth = 0
        $0.layer.borderColor = UIColor.clear.cgColor
    }
    // 리뷰등록 버튼
    let reviewButton = UIButton().then {
        $0.configuration = .menuStyle(title: "리뷰 등록", image: R.image.write()!)
        $0.layer.borderWidth = 0
        $0.layer.borderColor = UIColor.clear.cgColor
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = R.color.basicWhite()!
        setUI()
        setConstraints()
    }
    
    private func setUI() {
        addSubview(reportButton)
        addSubview(cancelButton)
        addSubview(reviewButton)
    }
    
    func setConstraints() {
        reportButton.snp.makeConstraints { make in
            make.centerX.equalToSuperview().multipliedBy(0.4)
            make.centerY.equalToSuperview()
            make.width.equalTo(90)
            make.height.equalTo(75)
        }
        
        cancelButton.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.centerY.equalToSuperview()
            make.width.equalTo(90)
            make.height.equalTo(75)
        }
        
        reviewButton.snp.makeConstraints { make in
            make.centerX.equalToSuperview().multipliedBy(1.6)
            make.centerY.equalToSuperview()
            make.width.equalTo(90)
            make.height.equalTo(75)
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

두 번째 , 뷰 컨트롤러에 객체 생성 및 애니메이션 구현

1. setMenu 함수

- 내비게이션 바의 높이를 기준으로 y 포지션을 잡아주고 애니메이션이 종료되는 시점에 touchView를 이용해 alpha값을 주었습니다. 이때 touchVIew는 드롭다운되는 뷰를 제외한 영역에만 alpha값을 주어야하기 때문에 추가적으로 넣은 커스텀 뷰입니다.

 

2. resetMenu 함수 

- 기존의 setMenu 함수의 수행을 정반대로 적용했습니다. ( touchView와 드롭다운뷰를 내비게이션 바만큼 높이를 설정하여 화면에 보이지 않게 조정)

 

 

3. 전체 코드

final class ChattingViewController: BaseViewController {

    let dropDown = DropDownView()
    
    '''
    생략
    '''
    
    override func viewDidLoad(){
    	super.viewDidLoad()
        
        // showMenu
     	self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: R.image.more()!, style: .plain, target: self, action: #selector(setMenu))
        
        '''
        생략
        '''
    }
    
    '''
    생략
    '''
    
    @objc
    private func setMenu() {
        
        UIView.animate(withDuration: 0.5, delay: 0.01, options: .transitionCurlDown) {
            let height = self.navigationController?.navigationBar.frame.maxY
            self.chatMenu.frame = CGRect(x: 0, y: height!, width: UIScreen.main.bounds.width, height: 100)
        } completion: { _ in
            self.touchView.frame = CGRect(x: 0, y: self.chatMenu.frame.maxY, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        }
    }
    
    private func resetMenu() {
        
        let height = self.navigationController?.navigationBar.frame.maxY
        
        self.touchView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: height!)
        
        UIView.animate(withDuration: 0.5, delay: 0.01, options: .transitionCurlUp) {
            self.chatMenu.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: height!)
        } completion: { _ in }
    }
}

 

UIView의 animate 메서드를 활용했고

이때 옵션을 transitionCurlDown과 transitionCurlUp을 사용해 애니메이션을 구현했습니다.

 

setMenu 메서드에서는

드롭다운 될 뷰인 chatMenu의 프레임을 내비게이션 바 밑으로 조정하고

애니메이션이 끝나는 시점에 touchView를 그 밑으로 프레임을 수정했습니다.

 

resetMenu는 setMenu와 정반대로 진행했습니다.

 

 

처음에는 어떻게 해야 될지 감이 오지 않았지만

단순하게 생각하고 접근하니 크게 어렵지 않았던 것 같습니다.

 

더 좋은 드롭다운 뷰를 구성하는 방법을 아신다면 댓글 부탁드립니다. 감사합니다.

 

그럼 이만 👋🏻 👋🏻 👋🏻