[iOS] Custom Segue 를 활용한 half-screen modal view

Custom Segue를 활용하여 modal half screen view 구현하기

0

half screen view modally

 

1. UIStroyboardSegue를 subclass 한 파일 생성

 init(identifier:source:destination:) 메서드를 재정의하고, perform() 메서드 재정의한다.

storyboard 런타임시에 source vc에서 destination vc로 transition을 수행할 때 perform()를 호출한다.

class HalfEmbedingSegue: UIStoryboardSegue {

    override init(identifier: String?, source: UIViewController, destination: UIViewController) {
        super.init(identifier: identifier, source: source, destination: destination)
    }
    
    override func perform() {
        
    }
}

 

// source view의 전달 높이로 destination view가 바닥에서 올라오도록 코드 작성

 override func perform() {
        
        //source view 높이의 절반까지 올라오도록 subview를 구성한다.
        var frame = source.view.bounds
        frame.origin.y = frame.height
        frame.size.height = frame.height / 2
        
        source.view.addSubview(destination.view)
        destination.view.frame = frame
        destination.view.alpha = 0.0 //투명도 지정 0.0 ~ 1.0(투명 ~ 불투명)
        
        source.addChild(destination)
        
        frame.origin.y = source.view.bounds.height / 2
        
        //Animation
        UIView.animate(withDuration: 0.3) {
            self.destination.view.frame = frame
            self.destination.view.alpha = 1.0
        }
        
    }

 

 

2. Storyboard에서 segue에 Custom Segue 연결하기

Storyboard로 돌아가 Custom segue를 사용하기 위해서 버튼과 view 사이의 segue를 만든다.

inspector에서 class를 1번에서 생성한 custom segue의 class 이름으로, kind는 custom으로 변경한다.

 

simulator를 동작한 후 확인해보면 버튼 클릭 시 아래와 같이 view가 모달 형식으로 나타난다.

 

 

 

3. 이전 화면으로 돌아가기(unwind segue)

 

close button을 누르면 이전화면으로 돌아가고 싶다.

adaptive segue를 사용할 때는 unwindSegue를 사용하면 손쉽게 이전 화면으로 돌아갈 수 있지만 custom segue에서는 unwind segue가 동작하지 않는다. unwind segue도 custom으로 만들어줘야 한다.

 

close 버튼을 누르면 올라왔던 view가 아래로 내려가고 이전화면이 나타나도록 코드를 추가해보겠다.

 

view controller에 unwind action method를 구현한다.

class ViewController: UIViewController {

    @IBAction func unwindToCustomSegue(_ unwindSegue: UIStoryboardSegue) {
       
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

storyboard 로 돌아가 close button을 exit 컨트롤로 드래그하여 unwind segue를 만든다.

 

unwind segue를 만든다.

Cocoa Touch Class로 UIStoryboardSegue를 subclass한 파일을 생성한다.

transition이 완료되면 source view 계층에서 완전히 삭제되도록 구현한다.

 

import UIKit

class HalfEmbedingUnwindSegue: UIStoryboardSegue {

    override func perform() {
        var frame = source.view.frame
        frame = frame.offsetBy(dx: 0, dy: frame.height)
        
        UIView.animate(withDuration: 0.3, animations: {
            self.source.view.frame = frame
            self.source.view.alpha = 0.0
            
        }, completion: { finished in
            self.source.view.removeFromSuperview()
            self.source.removeFromParent()
        })
        
    }
}

 

storyboard로 돌아가 기존에 만들었던 unwind Segue를 새로 만든 Custom unwind segue로 바꿔준다.

unwind segue를 선택하고 inspector에서 class에 custom한 unwind segue class 이름을 추가해준다.

class에 Custom Unwind Segue 추가

 

animation을 적용해 어색하지 않게 잘 동작하는 것을 볼 수 있다.😆

 

0

half screen view modally