[swift] xib를 이용한 alertView 만들기

가끔씩 커스텀 AlertView를 사용할 때가 있어서 xib 파일과 함께 사용하는 법에 대해 정리합니다!!

 

그럼 바로 xib와 swift 파일을 만들어 주겠습니다.

 

저는 헷갈리지 않게 같은 이름으로 파일을 생성했습니다.

 

먼저 xib 파일에 커스텀 alertView를 만들겠습니다.

뒷 배경을 위한 뷰를 추가하고 검은색 배경에 Alpha 값을 수정하여 원하는 투명도를 조정합니다.

주의할 점은 Top, Bottom 제약 조건을 설정할 때, Safe Area로 설정하면 화면과 같이 모두 덮지 못하니 Superview로 설정해 주세요.

 

배경 화면을 만들었으니 팝업 내용을 위한 ContentView를 만들면 됩니다!

ContentView는 추가해서 원하는 화면에 맞게 만들면 됩니다!!

여기서 주의할 점은 배경 화면 내부가 아닌 같은 레벨에 만들어야 합니다.

배경 화면에 추가하면 설정한 Alpha 값에 영향을 받아서 같이 투명도가 조절 될 것입니다.

 

xib에 뷰를 만들었으니 이것을 로드하는 작업을 해보겠습니다.

CustomAlertView 클래스를 아래와 같이 생성했습니다.

class CustomAlertView: UIView {

    let xibName = "CustomAlertView"
    
    @IBOutlet weak var rootView: UIView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        Bundle.main.loadNibNamed(xibName, owner: self, options: nil)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    @IBAction func confirm(_ sender: UIButton) {
        rootView.removeFromSuperview()
    }
    
}

xibName은 xib파일의 이름이고, loadNibNamed 메소드를 사용하여 xib 파일을 로드할 수 있습니다.

xib 파일을 로드하면 뷰와 연결된 outlet 변수를 사용할 수 있습니다.

rootView는 최상위 뷰를 outlet 변수로 연결한 값 입니다.

 

이제 xib와 클래스를 연결해야 합니다. 아래 그림에서 확인할 수 있습니다.

여기서 주의해야 할 점은 File's Owner에 클래스를 연결해야 합니다.

파일을 로드해서 이 안에 정의한 뷰들을 사용하는 것이기 때문입니다.

 

이제 모든 작업이 끝났습니다.

CustomAlertView를 출력해보겠습니다.

class ViewController: UIViewController {

    let alertView = CustomAlertView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func touchButton(_ sender: UIButton) {
        UIApplication.shared.windows.first?.addSubview(alertView.rootView)
    }
}

위에서 언급한 내용처럼 xib를 로드해서 그 안에 정의한 뷰를 사용하기 때문에, CustomAlertView에 정의한 rootView를 추가해서 출력해 줍니다.

 

 

아래 그림을 보면 이해하는데 도움이 될 수 있습니다.

loadNibNamed 메소드로 파일을 로드하면 내부에 정의된 뷰의 배열을 리턴합니다.

그 값을 보면 1개가 정의되어 있다고 나옵니다.

 

이렇게 하나를 더 추가하면 2개의 뷰가 리턴되는 것을 볼 수 있습니다.

 

이제 자신이 원하는 방식으로 뷰를 정의해서 관리하면 될 것 같습니다!!

 

연습한 코드도 업데이트 해놨으니 참고하셔도 좋습니다!! 🥳🥳🥳

 

 

 

 

taewoojin/CustomAlertViewPractice