swift Custom UI - 코드로 UI 만들기&데이터 전달

swift Custom UI - 코드로 UI 만들기&데이터 전달

 

 

완성화면

 

 

스토리보드 화면

 

 

코드로 UI 그리기

 

1.버튼생성

2.네비게이션 뷰 설정

3.이메일 라벨 객체 생성

4.갱신라벨 객체 생성

5.갱신주기 라벨 객체생성

6.스위치 객체 추가

7.스태퍼 객체 추가

8.스위치값 표현 라벨추가

9.스태퍼값 표현 라벨추가

10.전송버튼 추가

11.스위치 클릭 함수

12.스테퍼 클릭 함수

13.전송버튼 클릭 함수

 

import UIKit

class ViewController: UIViewController {

    
    var paramEmail:UITextField!   //이메일 입력 필드
    var paramUpdate:UISwitch!    //스위치
    var paramInterval :UIStepper! //스테퍼
    var txtUpdate:UILabel!      //스위치값 표현 레이블
    var txtInterval:UILabel! //스테퍼 값 표현 레이블
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
       
        //MARK:- 버튼생성
        
        // 버튼 인스턴스, 속성
        let btn = UIButton(type:.system)
        btn.frame = CGRect(x: 50, y: 400, width: 150, height: 30)
        btn.setTitle("test", for: .normal)

        btn.addTarget(self, action: #selector(btnOnClick(_:)), for: .touchUpInside)
        
        self.view.addSubview(btn)
        
        
        //버튼 가운데 정렬
        let btnCenter = UIButton(type:.system)
        btnCenter.frame = CGRect(x: 50, y: 400, width: 150, height: 30)
        btnCenter.center = CGPoint(x: self.view.frame.size.width / 2, y: 400)
        btnCenter.setTitle("test22", for: .normal)
        self.view.addSubview(btnCenter)
        
        
        //MARK:- 네비게이션 뷰 설정
        //네비게이션 바 타이틀 설정
        self.navigationItem.title = "설정"
        
        
        //MARK:- 이메일 레이블 객체 생성
        let lblEmail = UILabel()
        lblEmail.frame = CGRect(x: 30, y: 100, width: 100, height: 30)
        lblEmail.text = "이메일"
        
        //레이블 폰트 설정
        lblEmail.font = UIFont.systemFont(ofSize: 14)
        
        //루트뷰에 레이블 추가
        self.view.addSubview(lblEmail)
        
        
        //MARK:- 갱신 라벨 객체 생성
        let lblUpdate = UILabel()
        lblUpdate.frame = CGRect(x: 30, y: 150, width: 100, height: 30)
        lblUpdate.text = "자동갱신"
        lblUpdate.font = UIFont.systemFont(ofSize: 14)
        self.view.addSubview(lblUpdate)
        
        //MARK:-  갱신 주기라벨 객체 생성
        let lblIntervalUpdate = UILabel()
        lblIntervalUpdate.frame = CGRect(x: 30, y: 200, width: 100, height: 30)
        lblIntervalUpdate.text = "갱신주기"
        lblIntervalUpdate.font = UIFont.systemFont(ofSize: 14)
        self.view.addSubview(lblIntervalUpdate)
        
        //MARK:- 텍스트 필드 추가
        self.paramEmail = UITextField()
        self.paramEmail.frame = CGRect(x: 120, y: 100, width: 220, height: 30)
        self.paramEmail.font = UIFont.systemFont(ofSize: 13)
        self.paramEmail.borderStyle = UITextField.BorderStyle.roundedRect
        self.paramEmail.adjustsFontSizeToFitWidth = true
        self.paramEmail.placeholder = "이메일..."
        self.paramEmail.textAlignment = NSTextAlignment.right
        self.paramEmail.autocapitalizationType = .none
        self.view.addSubview(self.paramEmail)
        
        
        //MARK:-  스위치 객체 추가
        self.paramUpdate = UISwitch()
        self.paramUpdate.frame = CGRect(x: 120, y: 150, width: 50, height: 30)
        
        //스위치 On을 기본값으로 설정
        self.paramUpdate.setOn(true, animated: true)
        self.paramUpdate.addTarget(self, action: #selector(presentUpdateValue(_:)), for: .valueChanged)
        
        self.view.addSubview(self.paramUpdate)
        
        
        //MARK:- 스테퍼 객체 추가
        self.paramInterval = UIStepper()
        self.paramInterval.frame = CGRect(x: 120, y: 200, width: 50, height: 30)
        self.paramInterval.minimumValue = 0
        self.paramInterval.maximumValue = 100
        self.paramInterval.stepValue = 1
        self.paramInterval.value = 0
        self.paramInterval.addTarget(self, action: #selector(presentIntervalValue(_:)), for: .valueChanged)
        self.view.addSubview(self.paramInterval)
        
        
        //MARK:- 스위치 값 표현 레이블 추가
        self.txtUpdate = UILabel()
        self.txtUpdate.frame = CGRect(x: 250, y: 150, width: 100, height: 30)
        self.txtUpdate.font = UIFont.systemFont(ofSize: 12)
        self.txtUpdate.textColor = UIColor.red
        self.txtUpdate.text = "갱신함"
        self.view.addSubview(self.txtUpdate)
        
        
        //MARK:- 스테퍼값 표현레이블
        self.txtInterval = UILabel()
        self.txtInterval.frame = CGRect(x: 250, y: 200, width: 100, height: 30)
        self.txtInterval.font = UIFont.systemFont(ofSize: 12)
        self.txtInterval.textColor = .red
        self.txtInterval.text = "0분마다"
        
        self.view.addSubview(self.txtInterval)
        
        
        //MARK:- 전송 버튼 추가
        let submitBtn = UIBarButtonItem(barButtonSystemItem: .compose, target: self, action: #selector(submit(_:)))
        
        self.navigationItem.rightBarButtonItem = submitBtn
        
    }
    

    //MARK:- 버튼이 클릭되었을때 호출
    @objc func btnOnClick(_ sender: Any){
        
        if let btn = sender as? UIButton{
            btn.setTitle("클릭되었습니다.", for: .normal)
        }
        
    }
    
    
    //MARK:- 스위치에 연결할 메서드
    @objc func presentUpdateValue(_ sender:UISwitch){
        
        self.txtUpdate.text = (sender.isOn == true ? "갱신함" : "갱신하지않음")
    }
    
    
    //MARK:- 스테퍼에 연결할 메서드
    @objc func presentIntervalValue(_ sender: UIStepper){
        self.txtInterval.text = "\(Int(sender.value))분마다"
    }

    
    //MARK:- 전송버튼 이벤트
    @objc func submit(_ sender : Any){
        let rvc = ReadViewController()
        rvc.pEmail = self.paramEmail.text
        rvc.pUpdate = self.paramUpdate.isOn
        rvc.pInterval = self.paramInterval.value
        
        self.navigationController?.pushViewController(rvc, animated: true)
    }
}

 

 

전달된 값 받는 ViewController

 

1.전달된 값을 저장할 변수 작성

2.배경색 지정

3.라벨 객체 초기화

4.라벨 위치 지정

5.전달받은 값 라벨에 표시

6.라벨을 View 에 Add

 

import UIKit

class ReadViewController: UIViewController {

    //MARK:- 전달된 값을 저장할 변수
    var pEmail:String?
    var pUpdate:Bool?
    var pInterval:Double?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //MARK:- 배경색 지정
        
        self.view.backgroundColor = UIColor.lightGray
        
        //MARK:- 레이블 객체 초기화
        let email = UILabel()
        let update = UILabel()
        let interval = UILabel()
        

        //MARK:- 레이블 위치 지정
        email.frame = CGRect(x: 50, y: 100, width: 300, height: 30)
        update.frame = CGRect(x: 50, y: 150, width: 300, height: 30)
        interval.frame = CGRect(x: 50, y: 200, width: 300, height: 30)
        
        //MARK:- 전달받은 값 레이블에 표시
        email.text = "전달받은 이메일 : \(self.pEmail!)"
        update.text = "업데이트 여부 : \(self.pUpdate!)"
        interval.text = "업데이트 주기 : \(self.pInterval!)"
        
        
        //MARK:- 레이블 추가
        self.view.addSubview(email)
        self.view.addSubview(update)
        self.view.addSubview(interval)
        

    }
    

}

 

 

UICustomTest.zip

0.04MB

 

 

참고

https://blog.naver.com/go4693/221371567420

[iOS Swift4] UI 커스터마이징 3 - 프로그래밍 방식으로 화면 전환, 값 전달