(ios/Swift) CustomPopup 생성하기

Xcode : 14.2v

사용언어: Swift , StoryBoard

깃허브주소: https://github.com/Ljunhyeob/CustomPopup

 

 

1. 기존 스토리보드에다가 팝업을 생성할 버튼을 만들고 연결해줍니다.

그리고 기존 view 배경이 흰색으로 디폴트 설정이 되어있는데 저는 회색으로 변경해주었습니다.

(나중에 팝업을 띄워도 뒷 배경이 보인다는걸 보여주기 위함.)

 

 

 

2. 좌측 제일 하단에 있는 + 버튼을 눌러서 Swift File 하나를 생성하겠습니다.

 

 

3. 그리고 아래와 같이 기본 코드를 작성해 주세요.

//
//  CustomPopup.swift
//  CustomPopup
//
//  Created by 이준협 on 2022/12/31.
//

import UIKit

class CustomPopup: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

 

 

 

4. 그리고 새로운 컨트롤러를 생성하고 그 컨트롤러에 버튼하나를 만들겠습니다. 

 

5. 방금 만든 버튼을 화면에 꽉차게 오토레이아웃으로 0 0 0 0 으로 걸었습니다. 

(커스텀 팝업의 배경이 되는 버튼입니다. -> 뒷배경 눌렀을때 액션하기 위함)

 

 

6. 그리고 방금 만든 버튼의 백그라운드 색상을 검정으로 바꾸고,

버튼 위에 새로운 view를 생성하겠습니다 (-> 드디어 팝업 만들기 시작)

 

 

7. 방금 생성한 view를 원하시는 크기로 만들고, 안에 내용도 원하는걸로 커스텀 해줍니다.

(저는 경고 팝업이 뜨게 만들어보겠습니다)

다 만드셨으면 좀전에 만든 백그라운드 버튼과, 팝업창 안에 있는 버튼을 컨트롤러와 연결해줍니다.

 

(혹시 연결 안되시거나 새로만든 CustomPopup.swift 파일이 우측 어시스트 화면으로 코드가 안뜬다면 8번을 봐주세요)

 

8. 인스펙터창 4번째 Class 이름을 아까 생성한 CustomPopup 클래스랑 연결해주고 ,

그 바로 아래에 스토리보드 Id도 마찬가지로 입력해주세요.

9. 그리고 저는 팝업에 있는 확인버튼 이랑 백그라운드 버튼을 눌렀을때 팝업을 닫게 할것이기 때문에 

아래와 같이 코드를 입력했습니다.

//
//  CustomPopup.swift
//  CustomPopup
//
//  Created by 이준협 on 2022/12/31.
//

import UIKit

class CustomPopup: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func okBtn(_ sender: Any) {
        self.dismiss(animated: true, completion: nil)
    }
    
    
    @IBAction func backgroundBtn(_ sender: Any) {
        self.dismiss(animated: true, completion: nil)
    }
}

 

10. 그리고 다시 ViewController 로 돌아와서 팝업생성하는 버튼에 코드를 입력해줍니다.

 

//
//  ViewController.swift
//  CustomPopup
//
//  Created by 이준협 on 2022/12/31.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


    @IBAction func popupBtn(_ sender: Any) {
            // 팝업 스토리보드 가져오기
            let storyBoard = UIStoryboard.init(name: "Main", bundle: nil) //Main 스토리보드 안에다가 팝업을 만들었기때문에 Main 스토리보드 가져오고.
            
            // 다이얼로그의 스토리보드를 통해 뷰 컨트롤러 가져오기 (Identifier 지정 필수)
            let customDialogVC = storyBoard.instantiateViewController(withIdentifier: "CustomPopup") as! CustomPopup
            
            // 뷰 컨트롤러가 보여지는 스타일
            customDialogVC.modalPresentationStyle = .overCurrentContext
            // 뷰 컨트롤러가 사라지는 스타일)
            customDialogVC.modalTransitionStyle = .crossDissolve
            
            self.present(customDialogVC, animated: true, completion: nil)  // 생성
    }
}

 

11. 그럼 아래와 같이 완성입니다~

 

12. 까먹고 팝업생성했을때 기존 viewController 가 보이는 설정을 안해주었네요.

커스텀 팝업 -> 백그라운드 버튼  을 선택해 주시고

우측 인스팩터 창에서  Alpha 값을 1로 되어있을탠데 이것을 0.7 이나 0.5 쯤으로 바꾸어줍니다. (-> 이게 투명도 설정입니다.)

 

13. 그럼 이렇게 viewcontroller 백그라운드를 회색으로 지정했었는데 팝업이 떠도 뒤에 회색으로 그대로 보이는걸 확인할 수 있습니다~