swift - alert 커스터마이징 feat: 지도, 이미지, 테이블뷰, 슬라이더

swift - alert 커스터마이징 feat: 지도, 이미지, 테이블뷰, 슬라이더

 

 

[1] 팝업창에 지도 넣기

MapKitViewController.swift

 

import MapKit
import UIKit

class MapKitViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        //뷰컨트롤러에 맵킷 뷰 추가
    /*
            루트 뷰 내에 서브 뷰가 추가되면 서브 뷰가 차지할 영역이 꼭 필요한데
            루트 뷰로 지정한 경우는 화면 전체를 채우는 방식으로 크기가 자동 설정됩니다.
        */
        let map = MKMapView(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
        self.view = map
        self.preferredContentSize.height = 200 //콘텐츠 높이
        
        //위치정보 설정
        let pos = CLLocationCoordinate2D(latitude: 35.1586975, longitude: 129.16038419999995)
        
        //축척 설정
        let span = MKCoordinateSpan(latitudeDelta: 0.005, longitudeDelta: 0.005)
        
        //지도 영역 설정
        let region = MKCoordinateRegion(center: pos, span: span)
        
        //지도에 표시
        map.region = region
        map.regionThatFits(region)
        
        //위치에 핀표시
        let point = MKPointAnnotation()
        point.coordinate = pos
        map.addAnnotation(point)
    }
    
}

 

 

[2] 팝업창에 이미지 넣기

ImageViewController.swift

 

import UIKit

class ImageViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        //이미지, 이미지뷰 객체 생성
        let icon = UIImage(named: "rating5")
        let iconV = UIImageView(image: icon)
        
        
        //이미지 뷰의 영역과 위치 지정
        iconV.frame = CGRect(x: 0, y: 0, width: (icon?.size.width)!, height: (icon?.size.height)!)
        
        //루트 뷰에 이미지 뷰 추가
        self.view.addSubview(iconV)
        
        //외부에서 참조할 뷰 컨트롤러 사이즈를 이미지 크기와 동일하게 설정
    /*
            preferredContentSize 속성으로 외부 객체가 해당 뷰 컨트롤러를 나타낼 때 참고할 사이즈를 설정합니다.
            높이에 + 10을 준 이유는 알림창의 이미지 아래에 여백을 주기 위함입니다.
      */
        self.preferredContentSize = CGSize(width: (icon?.size.width)!, height: (icon?.size.height)! + 10)
    
    
    }
    
}

 

 

[3] 팝업창에 슬라이더 넣기

SliderViewController.swift

 

import UIKit

class SliderViewController: UIViewController {

    let slider = UISlider() //슬라이더 정의
    
    
    //슬라이더 객체의 값을 읽어올 연산 프로퍼티
    var sliderValue : Float{
        return self.slider.value
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()

        
        //슬라이더 설정
        self.slider.minimumValue = 0
        self.slider.maximumValue = 100
        
        //슬라이더의 영역 크기 정의
        self.slider.frame = CGRect(x: 0, y: 0, width: 170, height: 30)
        self.view.addSubview(self.slider)
        
        
        //뷰 컨트롤러의 콘텐츠 사이즈 지정
        self.preferredContentSize = CGSize(width: self.slider.frame.width, height: self.slider.frame.height + 10)
       
    }
    


}

 

 

[4]팝업창에 테이블 뷰 넣기

ListTableTableViewController.swift

 

import UIKit

class ListTableTableViewController: UITableViewController {

    /*
     델리게이트 객체로 사용할 변수를 정의합니다.
     사용자가 목록을 클릭하면 알림창을 띄우는 클래스에게 알려줘야 하는데
     둘 사이에는 참조할 수 있는 방법이 없기 때문에 호출할 수 있도록 객체 참조 정보를 이 변수에 저장합니다.
     */
    var delegate : ViewController?
    
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //높이
        self.preferredContentSize.height = 220
        
    }

    // MARK: - Table view data source


    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return 5
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = UITableViewCell()
        cell.textLabel?.text = "\(indexPath.row) 번째 옵션입니다."
        cell.textLabel?.font = UIFont.systemFont(ofSize: 13)

        return cell
    }
    

    //선택 델리게이트 메소드
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        //ViewController 클래스의 didSelectedRowAt 메소드 호출
        self.delegate?.didSelectedRowAt(indexPath: indexPath)
    }
    
}

 

 

 

커스터마이징 alertView 사용하기 (호출)

 

import MapKit
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        //MARK:- [1] 기본 버튼
        let defaultAlertBtn = UIButton(type: .system)
       
        defaultAlertBtn.frame = CGRect(x: 0, y: 100, width: 100, height: 30)
        
        defaultAlertBtn.center.x = self.view.frame.width / 2
        
        defaultAlertBtn.setTitle("기본알림창", for: .normal)
        
        defaultAlertBtn.addTarget(self, action: #selector(defaultAlert(_:)), for: .touchUpInside)
        self.view.addSubview(defaultAlertBtn)
        
        
        //MARK:- [2] 지도 알림 버튼
        let alertMap = UIButton(type: .system)
       
        alertMap.frame = CGRect(x: 0, y: 200, width: 100, height: 30)
        
        alertMap.center.x = self.view.frame.width / 2
        
        alertMap.setTitle("지도창 띄우기", for: .normal)
        
        alertMap.addTarget(self, action: #selector(mapAlert(_:)), for: .touchUpInside)
        self.view.addSubview(alertMap)
        
        
        //MARK:- [3] 이미지 버튼
        let alertImage = UIButton(type: .system)
       
        alertImage.frame = CGRect(x: 0, y: 300, width: 100, height: 30)
        
        alertImage.center.x = self.view.frame.width / 2
        
        alertImage.setTitle("이미지 띄우기", for: .normal)
        
        alertImage.addTarget(self, action: #selector(imageAlert(_:)), for: .touchUpInside)
        self.view.addSubview(alertImage)
        
        
        //MARK:- [4] 슬라이더 버튼
        let alertSlider = UIButton(type: .system)
       
        alertSlider.frame = CGRect(x: 0, y: 400, width: 100, height: 30)
        
        alertSlider.center.x = self.view.frame.width / 2
        
        alertSlider.setTitle("슬라이더 띄우기", for: .normal)
        
        alertSlider.addTarget(self, action: #selector(sliderAlert(_:)), for: .touchUpInside)
        self.view.addSubview(alertSlider)
        
        
        //MARK:- [5] 테이블 뷰  버튼
        let alertTableView = UIButton(type: .system)
       
        alertTableView.frame = CGRect(x: 0, y: 500, width: 100, height: 30)
        
        alertTableView.center.x = self.view.frame.width / 2
        
        alertTableView.setTitle("테이블 뷰 띄우기", for: .normal)
        
        alertTableView.addTarget(self, action: #selector(listTableViewAlert(_:)), for: .touchUpInside)
        self.view.addSubview(alertTableView)
    }

    
    
    
    
    //MARK:- [1] 기본 알림창 커스터마이징
    @objc func defaultAlert(_ sender:Any){
        
        let alertA = UIAlertController(title: "알림창", message: "기본 메시지...", preferredStyle: .actionSheet)
        
        //버튼 정의
        let cancelAction = UIAlertAction(title: "cancel", style: .cancel, handler: nil)
        
        let okAction = UIAlertAction(title: "ok", style: .default, handler: nil)
        
        //버튼을 알림창에 추가
        alertA.addAction(cancelAction)
        alertA.addAction(okAction)
        
        
        //알림창에 들어갈 뷰 컨트롤러
        let v = UIViewController()
        v.view.backgroundColor = .green
        
        //알림창에 뷰컨트롤러 등록
        /*
            setValue(_:forkey:) 메서드를 사용해 UIAlertController 객체의 속성에 값을 설정합니다.
            속성은 contentViewController입니다.
            속성은 문자열로 정확히 입력해야 오류가 나지 않습니다.
            */
        alertA.setValue(v, forKey: "contentViewController")
        
        //알림창 화면에 표시
        self.present(alertA, animated: false, completion: nil)
    }

    //MARK:- [2] 지도 알림창
    @objc func mapAlert(_ sender: UIButton){
     
        let alertA = UIAlertController(title: "알림창", message: "여기가 맞나요? ...", preferredStyle: .alert)
        
        //버튼 정의
        let cancelAction = UIAlertAction(title: "cancel", style: .cancel, handler: nil)
        
        let okAction = UIAlertAction(title: "ok", style: .default, handler: nil)
        
        //버튼을 알림창에 추가
        alertA.addAction(cancelAction)
        alertA.addAction(okAction)
        
        //콘텐츠 뷰 영역
        let contentVc = MapKitViewController()
        

        //알림창의 콘텐츠 뷰 컨트롤러 속성에 등록
        alertA.setValue(contentVc, forKey: "contentViewController")
        
        self.present(alertA, animated: false, completion: nil)
    }

    
    //MARK:- [3] 이미지 알림창
    @objc func imageAlert(_ sender: UIButton){
        
        let alertA = UIAlertController(title: "알림", message: "후기", preferredStyle: .alert)
        
        //버튼 정의
        let cancelAction = UIAlertAction(title: "cancel", style: .cancel, handler: nil)
        
        let okAction = UIAlertAction(title: "ok", style: .default, handler: nil)
        
        //버튼을 알림창에 추가
        alertA.addAction(cancelAction)
        alertA.addAction(okAction)
        
        //콘텐츠 뷰 영역
        let contentVc = ImageViewController()

        //알림창의 콘텐츠 뷰 컨트롤러 속성에 등록
        alertA.setValue(contentVc, forKey: "contentViewController")
        
        self.present(alertA, animated: false, completion: nil)
    }
    
    
    
    //MARK:- [4] 슬라이더 알림창
    @objc func sliderAlert(_ sender: UIButton){
        //콘텐츠 뷰 영역
        let contentVc = SliderViewController()
        
        let alertA = UIAlertController(title: "알림", message: "얼마?", preferredStyle: .alert)
        
        //버튼 정의
        let okAction = UIAlertAction(title: "확인", style: .default) { (_) in
            print(">>> slider value : \(contentVc.sliderValue)")
        }
        
        //버튼을 알림창에 추가
        alertA.addAction(okAction)
        

        //알림창의 콘텐츠 뷰 컨트롤러 속성에 등록
        alertA.setValue(contentVc, forKey: "contentViewController")
        
        self.present(alertA, animated: false, completion: nil)
    }
    
    
    //MARK:- [5] 테이블 뷰  알림창
    @objc func listTableViewAlert(_ sender: UIButton){
       
        //콘텐츠 뷰 영역
        let contentVc = ListTableTableViewController()
        
        //델리게이트 설정
        contentVc.delegate = self
        
        let alertA = UIAlertController(title: "알림", message: "선택하세요", preferredStyle: .alert)
        
        //버튼 정의
        let okAction = UIAlertAction(title: "확인", style: .default) { (_) in
            
        }
        
        //버튼을 알림창에 추가
        alertA.addAction(okAction)
        
        //알림창의 콘텐츠 뷰 컨트롤러 속성에 등록
        alertA.setValue(contentVc, forKey: "contentViewController")
        
        self.present(alertA, animated: false, completion: nil)
    }
    
    //테이블 행 선택 
    func didSelectedRowAt(indexPath:IndexPath) {
        
        print(">>>>선택된 행은 \(indexPath.row)<<<<<")
        
    }
}

 

 

 

AlertTest.zip

0.06MB