[iOS : Toy Project] Simple Weather

📌 두번째 프로젝트

버튼을 클릭할 때 마다 랜덤으로 날씨, 온도, 도시가 바뀌는 앱을 만들어보자

Stack View 속에 또 다른 Stack View!

 

 

 

1️⃣ 레이아웃 구성

- Vertical Stack View 속에 label, Image view, label, Horizontal Stack View (이 속에 또 복합적인 View), Button

 

 

2️⃣ View Controller 이름 명확하게 바꾸기

- 기존 view controller 파일 지우고, file > Cocoa Touch Class > "WeatherViewController" 이름의 View Controller 만들기

Custom Class, Storyboard ID 설정

 

- Storyboard ID? View Controller을 Storyboard에서 찾을 때 사용하는 ID

 

 

3️⃣ 화면설정 (레이아웃 설정)

Background: System Teal Color

Render Mode : Multicolor 로 설정하면 sun.max.fill 의 그림일 경우 노란색으로 자동 설정되는 것을 볼 수 있음

sun.max.fill을 control키로 끌고 와서 height을 확인한 후, 180으로 바꿔주면 크기가 커짐!

그리고, Content Mode: Aspect Fit 이 잘 설정되었는지 확인! (비율 유지를 하며 확장을 하는지 확인하기 위함)

Stack Viewd의 item들 간의 간격조절은 Spacing 에서!

 

 

Stack View에서는 Button(그 외 다른 아이템도)이 양옆으로 Fill되기 때문에 가상의 View를 만들고 그 안에 Button을 넣어 양옆에 Padding을 줘야 한다. 

View와 Button사이 제약설정

Leading Space를 20으로!

 

 

4️⃣ Horizontal Stack View 설정

Horizontal Stack View 안에 Vertical Stack View 들을 만들고 Horizontal Stack View의 Distribution을 Fill Equally로 설정

 

이 Horizontal Stack View도 양옆에 Padding을 주기 위해, 앞에서 Button을 View로 감싸듯이 Horizontal Stack View도 마찬가지로 View로 감싸는 작업을 해야한다.

View와 Horizontal Stack View 사이의 Contraint

이거 까아쥐

 

완성된 화면 !

 

 

 

5️⃣ 기능 구현

//
//  WeatherViewController.swift
//  Simple Weather
//
//  Created by 오예진 on 2022/05/17.
//

import UIKit

class WeatherViewController: UIViewController {

    @IBOutlet weak var cityLabel: UILabel!
    @IBOutlet weak var weatherImageView: UIImageView!
    @IBOutlet weak var temperatureLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
    
    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 imageName = weathers.randomElement()!
        weatherImageView.image = UIImage(systemName: imageName)?.withRenderingMode(.alwaysOriginal )
        // 날씨 이미지가 랜덤으로 바뀔 때, 색이 이상하게 변하는 것을 방지하기 위해 withRenderingMode를 alwaysOriginal로!
        // 이렇게 안하거나 alwaysTemplate으로 설정하면 기본 tint color가 입혀진 이미지가 나타나게 된다.
        
        // 온도가 랜덤으로
        let randomTemp = Int.random(in:10..<30)
        temperatureLabel.text = "\(randomTemp)°"
    }

}

 

 

6️⃣ 완료!

 

 

 

 

---

Reference

패스트캠퍼스 온라인 강의