Bottom Sheet으로 모달뷰 구현하기(Github - Swipeable View 응용)

코더스하이 멘토링으로 진행했던 Bottom Sheet 구현을 기록으로 남겨둡니다.

 

이걸 정확히 Bottom Sheet이라고 부르는지, 모달이라고 불러야할지 조금 애매한 부분이 있지만,

이 포스트에서 궁극적으로 보여드리려고 하는건 이런 부분입니다.

 

기존 뷰에 있는 버튼이나 이미지가 하단의 뷰와 함께 움직임

 

 

우선 제가 참고한 프로젝트는 아래와 같습니다.

 

https://github.com/LucaIaco/SwipeableView

GitHub - LucaIaco/SwipeableView: A simple and easy to use view component for iOS written in Swift which allows to be expanded an

 

해당 프로젝트를 Stack Overflow에서 발견하고 직접 다운받아서 실행시켜보고 코드를 이래저래 둘러보니,

궁극적으로 '새로운 프로토콜'을 만들어 두셨더라고요.

 

프로토콜 SwipeableView와 SwipeableItem

 

해당 프로토콜 파일을 받아오셔서 바로 해석하면서 적용할 수 있는 능력이 되신다면 그렇게 하시면 되겠지만...

조금 어려우시다면 첨부한 링크의 레파지토리에서 프로젝트를 다운 받으시고

직접 코드에 브레이크 포인트를 걸어보면서 시뮬레이터로 이래저래 만져보고

어떤 상황에 어떤 함수가 호출되고 해당 프로토콜이 어떻게 작동하는지 직접 눈으로 확인하시는게

필요한 부분을 찾아와 직접 구현하는데 도움이 될 것 같습니다. 

 

그럼 이제 직접 구현한 과정과 코드를 간략하게 보여드리겠습니다.

오늘 제가 구현하고자 하는 것은, 'map picker'라는 버튼을 누르면 아래에서 모달이 올라오고

그 모달을 위 아래로 크기를 늘리거나 줄일 수 있고,

그 모달이 움직일때 'map picker'버튼 또한 간격에 맞게 움직여주는겁니다.

 

0. 해당 레파지토리에서 프로젝트 다운 받은 뒤

두 개의 프로토콜을 자신의 프로젝트 파일에 포함하기 

 

파일을 넣어준 뒤에 프로토콜을 불러와줍니다.

 

class ViewController: UIViewController, SwipeableViewProtocol {
    func swipeableViewDidExpand(swipeableView: SwipeableView, previousState: Bool) {
        print(2)
    }
    
    func swipeableViewDidCollapse(swipeableView: SwipeableView, previousState: Bool) {
       print(3)
    }
    
    func swipeableViewDidPan(swipeableView: SwipeableView, percentage: CGFloat) {
        print(1)
    }

 

함수 이름에서 알 수 있듯이 expand 했을때, collapse했을때, pan 되었을때 불러지는 함수입니다.

해당 프로젝트를 제작하신 분은 해당 함수들이 불러질때마다 상호작용을 만들고 싶으셨던 것 같습니다.

그러나 저는 딱히 데이터를 넘겨줄 필요도 없고 변경 사항이 없어서 단순 print문으로 대체했습니다.

 

 

 

1. Swipe View라는 뷰를 뷰 안에 넣기 & constraint 정의하기

 

 

저 Swipe View에 모달 뷰를 연결할건데요,

저 뷰가 움직여야 하기 때문에 constraint가 자유자재로 바뀌어야 합니다. 

 

Flex Layout이라는 constraint

 

여기서 제가 첨부한 레파지토리에서 직접 프로젝트를 다운 받고 만져보신 분들은 눈치챘겠지만,

특이하게도 저 'Swipe View'의 위 constraint(Flex Layout)를 var로 지정해줍니다.

 

(저는 참고한 프로젝트와 다르게 'map picker'라는 버튼을 기준으로 삼았습니다.)

 

 

 

2. Swipe View 코드 짜기

 

2-1. 처음 상태

 

저희는 버튼을 누르기 전에는 Swipe View가 보이지 않는 상태여야 합니다. 

그걸 고려해서 ViewDidLoad에서는 보이지 않도록 설정합니다.

 

 @IBOutlet weak var swipeView: SwipeableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.swipeView.isHidden = true
        self.swipeView.isUserInteractionEnabled = false
        self.swipeView.delegate = self
    }

실행해보면 그냥 평범한 파란색 뷰가 나타납니다.

당연합니다! Hidden을 true로 설정해두었으니까요.

 

 

2-2. 버튼을 눌렀을 때(모달뷰 설정)

 

그럼 이제 만약 버튼을 눌렀을때 설정할 것들을 함수로 따로 만들어 줍니다.

 

func childViewSettings() {
        self.swipeView.isHidden = false
        self.swipeView.isUserInteractionEnabled = true
        self.swipeView.flexibleLayout = .init(with: self.flexLayout, end: 40.0)
        
        //indicator 여부
        self.swipeView.isSwipeIndicatorVisible = false
        //둥근 모서리 여부
        self.swipeView.hasRoundedCorners = true
        
        //작을때나 클때나 둘 다 child View와 interaction 가능
        self.swipeView.childViewInteractionOnExpandedOnly = false
    }

 

여기서 flexibleLayout이라는 게 보이죠?

이건 QuickHelp등으로 확인해보면 Declared In 'SwipeableView.swift'라는 설명을 볼 수 있습니다.

 

즉, 프로젝트 작성자 분이 만들어 둔 프로토콜에 포함도니 함수입니다.

 

 

작동 방식을 보아하니 .init(with: (constraint 넣어주기), end: (숫자))네요.

저 숫자는 직접!! 테스트 해보면 금방 발견할 수 있는데요, constraint 적용 범위입니다.

 

저는 40으로 주었습니다.(직접 구현해보고 가장 적합하다고 생각된는 숫자를 넣어주세요)

constraint는 아까 저희가 앞서 만들어준 flexLayout이겠죠?

 

 

3. 버튼 눌렀을 때 SwipeView 나타나게 하기

 

이제 SwipeView를 나타나게 하고, 해당 View안에 보여주고 싶은(구현하고 싶은)

뷰를 연결해줄겁니다.

 

 

저는 이런식으로 아주 간단하게 구현해두었습니다.

 

 

Storyboard ID를 "childVC"라고 두었습니다.

 

childVC의 뷰컨트롤러 코드는 간단합니다.

 

class ChildViewController: UIViewController{

    weak var swipeView:SwipeableView? //중요
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

 

필요한 테이블뷰나.. 버튼이 있으면 추가적으로 연결해주면 되겠죠?

 

 

그럼 이제 다시 원래 뷰컨트롤러 코드로 돌아오겠습니다.

map picker라는 버튼을 눌렀을때 실행되는 함수에서 childVC를 불러와줄겁니다.

 

    @IBAction func pickerSelected(_ sender: Any) {
        
        //childViewController연결
        if let childViewController = self.storyboard?.instantiateViewController(withIdentifier:"childVC") as? ChildViewController {
            childViewSettings()
            // alternative way to interact with the swipeable view from within a child view
            childViewController.swipeView = self.swipeView
            // plug the child view into the swipeable view
            self.swipeView.setChildView(childVC: childViewController, parentVC: self)
            
        }
        
    }

 

직접 테스트를 해보니 if문을 걸어주지 않으면 에러가 발생하더라고요.

그래서 if문을 걸고 childViewController에 우리가 보여주고 싶은 "childVC"를 저장해줍니다.

그리고 childViewSettings()함수(바로 위에서 만들어준 함수)를 불러와주겠습니다.

 

다음 두 줄은 해당 프로토콜을 만드신 분의 튜토리얼대로 따라갔습니다.

(애초에 존재하는 함수들이 아님! 강조)

 

 

 

4. map picker 버튼도 함께 움직이게 하기

 

위 3번까지 하고 실행을 해 보면 이제 모달이 잘 생길 것이고, 움직임에도 문제가 없겠지만

버튼이 함께 움직이지 않는다는걸 발견했을 겁니다.

그래서 SwipeableItem 프로토콜을 이용해줄겁니다.

 

@IBOutlet weak var pickerFlexLayout: NSLayoutConstraint!
    
@IBOutlet weak var picker: UIButton!

override func viewDidLoad() {
        super.viewDidLoad()
       .
       .
       .
        
        //addAnimateableItem에 layout을 넣고 end 값을 조정하면서 움직이는거 확인
        self.swipeView.addAnimatableItem(SwipeableItemLayout(with: pickerFlexLayout, end: 100.0))
    }

 

 

위에서 한 것과 유사하게 constraint를 정의해주고

프로토콜에서 하라는대로 해주면 모두 완료되었습니다.

 

 

기존 뷰에 있는 버튼이나 이미지가 하단의 뷰와 함께 움직임

이렇게 간단하게 버튼이 함께 움직이는 모달뷰 bottom sheet가 완성되었습니다!!

앞서 말씀드렸지만 직접!! 해당 레파지토리에서 프로젝트를 다운받아 테스트 해보고

제 블로그를 참고하시면서 구현하시는 걸 추천드립니다.

 

 

(+)

cocoapod으로 설치하는 단순한 Bottom Sheet도 구현해보았는데,

오히려 프로토콜을 이용한 복잡한 코드가 좀 더 커스터마이징하기 쉽고 저에겐 잘 맞았던 것 같습니다.