iOS Autolayout Stack View

이번에는 UIStackView에 대해서 알아보겠습니다.

StackView란?

• 열이나 행에 뷰 컬렉션을 배치하기 위한 간소화된 인터페이스
• https://developer.apple.com/documentation/uikit/uistackview

Apple Developer Documentation

StackView의 장점

• 자동으로 크기 조절이 가능하다.
• 균등하게 할 수 있다.
• 빠른 작업이 가능하다.

StackView 생성

• 프로젝트를 생성하고 Horizontal Stack View를 생성해 주겠습니다.
• Stack View에는 색상이 존재하지 않습니다. 빈용기 정도로 보시면 될 것 같습니다.

Stack View 안에 Label 생성

• Stack View에 Label을 집어넣겠습니다.

Auto Layout

• Stack View에 Label을 집어 넣고 위치만 잡아줘도 Autolayout이 잡힙니다.
• Label에는 Xcode에서 font크기를 알기 때문에 자동으로 크기를 잡아주기 때문입니다.

Fill Equally

• Stack View에 UIView를 넣어 보겠습니다.
• UIView에 가로 세로 크기를 임의로 정해주겠습니다.

• Stack View에 다른 UIView를 넣게 된다면 크기가 다 다르겠죠?
• Stack View에 Fill Equally를 사용하면 따로 만지지 않아도 동일한 크기로 사용하실 수 있습니다.

Stack View로 전화 앱 구현해보기

• Horizontal Stack View를 생성하겠습니다.
• Stack View 안에 Vertical Stack View를 집어 넣겠습니다.

• Stack View안에 Button을 넣겠습니다.
• 가로 세로 크기는 80으로 지정하겠습니다.
• 그리고 적당하게 폰트 크기와 배경색을 지정해주겠습니다.

• 복사 붙여넣기를 한다음 Spacing을 20정도 주겠습니다.
• Vertical Stack View를 잡은 다음에 복사 붙여넣기를 하겠습니다.

커스텀 클래스

• 버튼을 둥글게 만들건데 이것을 다 일일히 코드를 가져와서 작업하는건 번거롭기 떄문에 커스텀 클래스를 하나 만들겠습니다.
• cmd + n -> Swift File -> CircleButton 클래스를 생성하겠습니다.

import Foundation
import UIKit


// 인터페이스 빌더에서 디자인으로 확인할려면 해줘야한다
@IBDesignable
class CircleButton: UIButton {
    
    // 인스펙터 패널에서 사용될 수 있도록 설정
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet { // 프로퍼티 옵저버
            layer.cornerRadius = cornerRadius // 설정된 값으로 넣어줌
            layer.masksToBounds = cornerRadius > 0 // 설정된 값이 0보다 크다면 UI화면에 바로 볼수 있다.
        }
}
}

Button에 Class 연결

• 변경할 Button에 CirclButton클래스를 연결해 줍니다.
• @IBDesignable때문에 아래와 같이 Designables가 뜹니다.
• CornerRadius를 적용하면 인터페이스 빌더에서 바로  확인이 가능합니다.

• 복사 붙여넣기를 이용해 필요없는 버튼은 삭제해주고 둥근버튼으로 교체해 주겠습니다.

• 전화 앱과 유사하게 UI를 바꿔주겠습니다.

• Label을 하나 추가해 번호입력칸을 만들겠습니다.

Outlet Collection

• 여러가지 뷰들을 처리해야 될 경우에 사용한다.

• 생성 후 드래그하면 추가가 된다.

전체 코드

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var numberLabel: UILabel!
    @IBOutlet var numberButton: [CircleButton]!
    @IBOutlet weak var callButton: CircleButton!
    
    var numberString = "" {
        didSet{
            
            DispatchQueue.main.async { [weak self] in
                
                guard let self = self else { return }
                self.numberLabel.textColor = .black
                self.numberLabel.text = self.numberString // 라벨의 텍스트를 바로 변경을 시켜준다.
            }
            
        }
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        for btnItem in numberButton {
            btnItem.addTarget(self, action: #selector(onNumberBtnClicked(sender:)), for: .touchUpInside)
        }
        
        callButton.addTarget(self, action: #selector(onPhoneCallBtnClicked(_:)), for: .touchUpInside)
    }
    
    
    
    // 버튼 동작 액션
    @objc fileprivate func onNumberBtnClicked(sender: UIButton){
        guard let inputString = sender.titleLabel?.text else { return }
        numberString.append(inputString)
    }
    
    // callButton
    @objc fileprivate func onPhoneCallBtnClicked(_ sender: UIButton) {
        numberString.removeAll()
        
    }
    
}

실행 화면

개발하는 정대리