SWIFT 오토레이아웃

슆공부·2022년 6월 17일

iOS 오토레이아웃

왜 사용할까?

기존 프레임 기반 레이아웃의 문제
- 동적으로 뷰를 위치 시킬수 없음
- 스크린별로 일일이 계산해주어야 함

오토레이아웃이란?

이름에서 알수 있듯이 자동으로 의도를 정해주면, 알아서 위치하게 되는 기술

사용 방식

Constraint(제약사항)를 통해서 오토레이아웃을 적용
적용시, 뷰는 아래의 두개를 기준을 충족 시켜야함
- 위치를 알수 있어야 함
- 크기를 알수 있어야 함

오토레이아웃 content mode

Aspect Fit - 비율 유지하면서 넣어진다.
-> 이미지 사용시 권장
Scale to Fill - 비율 생각안하고 꽉 채워서 확장된다.
Aspect Fill - 비율 유지하면서 꽉 채운다.

기본적으로 스택뷰 안에 컴포넌트들은 다 꽉채워진다. 그래서 띄워주려면 UIView 넣고 그안에 넣는 방법이 있음!

//
//  SymbolRollerViewController.swift
//  SymbolRoller
//
//

import UIKit

class SymbolRollerViewController: UIViewController {
  
  let symbols: [String] = ["sun.min", "moon", "cloud", "wind", "snowflake"]
  
  @IBOutlet weak var imageView: UIImageView!
  @IBOutlet weak var label: UILabel!
  @IBOutlet weak var button: UIButton!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    print("view did load")
    //뷰에 필요한 컴포넌트들이 메모리에 로드되는 시점, 화면에 뜨기전에 준비하는 시점
    button.layer.cornerRadius = 40
    loadRandomSymbol()
  }
  
  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    //화면에 보여질 시점
  }
  
  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    //화면에 보여지고 난 시점
  }
  
  @IBAction func buttonTapped(_ sender: Any) {
    loadRandomSymbol()
  }
  
  //TO-DO
  //심볼에서 하나를 임의로 추출해서 이미지와 텍스트를 설정한다.
  func loadRandomSymbol() {
    let symbol = symbols.randomElement()!
    imageView.image = UIImage(systemName: symbol)
    label.text = symbol
  }
}

날씨 화면 구현

//
//  WeatherViewController.swift
//  SimpleWeather
//
//

import UIKit

class WeatherViewController: UIViewController {


  @IBOutlet weak var cityLabel: UILabel!
  @IBOutlet weak var weatherImageView: UIImageView!
  @IBOutlet weak var temperatureLabel: UILabel!
  @IBOutlet weak var button: UIButton!
  
  override func viewDidLoad() {
        super.viewDidLoad()
    button.layer.cornerRadius = 40
        // Do any additional setup after loading the view.
    }
  
  let cities = ["Seoul", "Tokyo", "LA", "Seattle"]
  let weathers = ["cloud.fill", "sun.max.fill", "wind", "cloud.sun.rain.fill"]
  @IBAction func changeButtonTapped(_ sender: Any) {
    cityLabel.text = cities.randomElement()
    let abc = weathers.randomElement()!
    weatherImageView.image = UIImage(systemName: abc)?.withRenderingMode(.alwaysOriginal)
    temperatureLabel.text = "\(Int.random(in: 10..<30))"
  }
  
    /*
    // 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.
    }
    */

}