[iOS] 전화 기본앱 만들기

• stack view

Stack View는 오토레이아웃을 편리하게 사용하도록 도와주기 위해 도입되었고, 자동으로 균등하게 크기를 조절하여 빠른 작업이 가능하게 해준다. Stack View는 그 자체로 내용을 가지진 않고 UI 요소를 가로 혹은 세로로 묶어주는 역할을 한다.

 

Vertical Stack View

세로 방향으로 묶어주는 Stack View

Horizontal Stack View 

가로 방향으로 묶어주는 Stack View 

Fill, Fill Proportionally : 스택뷰 내부 요소에 크기를 지정해주어야함.
Fill Equally : 스택뷰 내부 요소에 크기를 지정해주지 않아도 자동 정렬.

[출처]

https://velog.io/@eddy_song/stack-view

오토레이아웃을 쉽고 빠르게, 스택 뷰(Stack View)

 

참고) Label은 크기를 가지고있기때문에 크기지정을 따로 해주지않아도 Autolayout 자리를 잘 잡는다!

 

[View 구상]

1) 전화 키패드 화면

 

2) 전화버튼을 눌렀을때 화면 전환

 

[화면전환 코드]

1) 전화 키패드 화면 ViewController

//
//  ViewController.swift
//  standard2
//
//  Created by 김민경 on 2022/09/29.
//

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var b1: UIButton!
    @IBOutlet weak var b2: UIButton!
    @IBOutlet weak var b3: UIButton!
    @IBOutlet weak var b4: UIButton!
    @IBOutlet weak var b5: UIButton!
    @IBOutlet weak var b6: UIButton!
    @IBOutlet weak var b7: UIButton!
    @IBOutlet weak var b8: UIButton!
    @IBOutlet weak var b9: UIButton!
    @IBOutlet weak var b10: UIButton!
    @IBOutlet weak var b0: UIButton!
    @IBOutlet weak var b11: UIButton!
    @IBOutlet weak var bCall: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        b1.layer.cornerRadius=40
        b2.layer.cornerRadius=40
        b3.layer.cornerRadius=40
        b4.layer.cornerRadius=40
        b5.layer.cornerRadius=40
        b6.layer.cornerRadius=40
        b7.layer.cornerRadius=40
        b8.layer.cornerRadius=40
        b9.layer.cornerRadius=40
        b10.layer.cornerRadius=40
        b0.layer.cornerRadius=40
        b11.layer.cornerRadius=40
        bCall.layer.cornerRadius=40
        
        // Do any additional setup after loading the view.
    }

    @IBAction func bCall(_ sender: Any) {
        guard let viewController = self.storyboard?.instantiateViewController(withIdentifier: "phoneCall") else {return}
        self.present(viewController, animated: true, completion:nil)
    }
    
}

2) 전화버튼을 눌렀을 때 전환된 화면 (통화화면)

//
//  ViewController_sub.swift
//  standard2
//
//  Created by 김민경 on 2022/09/29.
//

import UIKit

class ViewController_sub: UIViewController {

    @IBOutlet weak var bSoundOff: UIButton!
    
    @IBOutlet weak var bKeypad: UIButton!
    @IBOutlet weak var bAudio: UIButton!
    @IBOutlet weak var bPhone: UIButton!
    @IBOutlet weak var bFaceTime: UIButton!
    @IBOutlet weak var bContact: UIButton!
    @IBOutlet weak var bOn: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        bSoundOff.layer.cornerRadius=40
        bKeypad.layer.cornerRadius=40
        bAudio.layer.cornerRadius=40
        bPhone.layer.cornerRadius=40
        bFaceTime.layer.cornerRadius=40
        bContact.layer.cornerRadius=40
        bOn.layer.cornerRadius=40
        

        // Do any additional setup after loading the view.
    }
    
    @IBAction func bOn(_ sender: Any) {
        guard let viewController_sub = self.storyboard?.instantiateViewController(withIdentifier: "phoneKeypad") else {return}
        self.present(viewController_sub, animated: true, completion:nil)
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
    }
    */

}

 

[참고]

https://jud00.tistory.com/entry/iOS-Push-Present-%ED%99%94%EB%A9%B4-%EC%A0%84%ED%99%98%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

[iOS] Push, Present 화면 전환에 대해 알아보자.

[시연영상]

 

[Git] 

- standard, challenge2 참고 (스탠다드, 챌린지 미션 한번에 업로드)

https://github.com/hsw1920/UMC_3rd-iOS/tree/eunice

GitHub - hsw1920/UMC_3rd-iOS: sejong UMC 3rd iOS-study