본문 바로가기
Xcode/IOS

IOS) UIViewController로 Pop UP 만들기

by 후르륵짭짭 2020. 7. 13.
728x90
반응형

안녕하세요! 후르륵 짭짭 입니다.

이번에는 Pop UP 뷰에 대해서 배워 볼려고 합니다.

pop up 뷰를 만드는 방법은 총 두가지가 있습니다.

하나는 pop up 할 뷰를 viewcontroler에 임시로 보관하고 있다가 버튼을 누르면 subview를 해주는 방식 입니다.

하지만 지금은 이 방법말고 UIViewconroller을 새로 만들어서 pop up 뷰를 만드는 방법에 대해서 설명하도록 하겠습니다.

만약에 위에 처럼 하고 싶으시면 hururuek-chapchap.tistory.com/24

 

IOS) UIView에 Corner Radius와 Shadow를 적용하기

안녕하세요!!! 후르륵짭짭 입니다. 위에 영상을 보면 초록색 뷰에 그림자와 각진 부분이 깍인 것을 확인 할 수 있습니다 오늘은 이것에 대해서 자세히 알아 보려고 합니다. 두가지 방법이 있습니

hururuek-chapchap.tistory.com

여기로 보고 와주세요~~!

 

** 시작  **

위의 하늘색 뷰가 없다고 생각하고

최상단에 있는 view의 색을 clear color로 해주세요!

clear color로 해주면 뷰의 뒷 부분이 보이게 됩니다!

그리고 2번을 눌러주시면

이런 창을 찾아주세요!

그리고 transition style을 Cross Dissolve로 변경해주세요!

여기서 알고 가실게 있습니다.

transition Style은 화면 전환을 어떻게 할 것인가?를 선택하는 겁니다.

Cover Vertical - 아래에서 위로 올라가면서 등장

Flip Horizontal - 화면을 왼쪽에서 오른쪽으로 뒤집어서 등장

Cross Dissolve - 화면이 그냥 펑 하고 등장

 

원하시는 것을 선택하고 4번을 눌러주세요

누르면 하나의 선을 기준으로 상단과 하단으로 나눠져 있을 겁니다.

상단은 새롭게 화면을 보여주는 겁니다. 따라서 clear color로 하면 검정 배경이 될 겁니다.

하지만 하단의 것을 눌러주면 이전 화면 위에 덮어서 보여주게 됩니다.

따라서 over Full Screen을 눌러주세요!

그리고 버튼을 segue로 연결 해주세요!

 

참 간단하죠??? ㅎㅎㅎㅎㅎ

사실 여기가 끝 입니다.

만약에 애니메이션을 넣고 싶다면 "새로운 viewconroller 파일"을 만들어주시고 아래 코드 처럼 해주세요! 

class SecondViewController: UIViewController {

    @IBOutlet weak var popView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
		//메모리에 정착 했을 때 화면의 크기를 줄인다.        
        popView.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)

    }
    
    //화면이 보일 때, 애니메이션을 적용한다.
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 1, options: .curveEaseIn, animations: {
            
            self.popView.transform = .identity
            
        }, completion: nil)
    }
    
    @IBAction func Dissmiss(_ sender: Any) {
        
        dismiss(animated: true, completion: nil)
    }
    

}

 

지금 까지 Pop Up 뷰를 UIViewconroller로 만드는 방법을 배워보았습니다.

모두모두 즐코 하세욧!

728x90
반응형

댓글