[iOS : Toy Project] Symbol Roller

📌첫번째 프로젝트

버튼을 클릭할 때 마다 랜덤으로 날씨(=Symbol)이 바뀌는 앱을 만들어보자

 

 

 

1️⃣ 사전에 필요한 다운로드 : SF Symbols

SF Symbols

 

 

2️⃣ 레이아웃 구성

- Stack View 안에 Image View -> Label -> Button

 

 

 

3️⃣ 기능 구현 코드

//
//  SymbolRollerViewController.swift
//  SymbolRoller
//
//  Created by 오예진 on 2022/05/11.
//

import UIKit

// UIViewController = Page를 나타내는 하나의 단위
// UIViewController를 상속받은 SymbolRollerViewController
class SymbolRollerViewController: UIViewController {
    
    let symbols: [String] = ["sun.min", "moon", "cloud", "wind", "snowflake"]

    // @IBOutlet : Interface builder에 있는 UI 컴포넌트와 연결을 하겠다.
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var button: UIButton!
    
    func reload() {
        // TO_DO
        // - 심볼에서, 하나를 임의로 추출해서
        // - 이미지와 텍스트 설정을 한다.
        let symbol = symbols.randomElement()!
        imageView.image = UIImage(systemName: symbol)
        label.text = symbol
    }
    
    // app 실행 시, viewDidLoad()를 거쳐서 뜬다.
    override func viewDidLoad() {
        super.viewDidLoad()
        reload()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
    }
    
    // @IBAction : 클릭이 됐을 때, 어떤 것을 수행하겠다.
    @IBAction func buttonTapped(_ sender: Any) {
        reload()
    }
    
}

- View Controller : 페이지를 나타내는 객체

- 화면에 나타나는 View Controller가 객체가 화면에 보이기 까지 : viewDidLoad -> viewWillAppear -> viewDidAppear

 

- DRY : Do not Repeat Yourself (중복된 코드 참지 않기) == 함수로 만들기

-> 이를 위해 reload() 함수를 만들었다.

 

 

 

4️⃣ 지금까지 구현한 화면

- 버튼을 누르면 Image View와 Label이 바뀌는 것을 볼 수 있음.

 

 

 

5️⃣ 색을 입혀 꾸미기

 

1. Label Custom

 

2. Button Custom

- Image 항목에 arrow.3.~ 을 넣고 padding 항목을 10으로 맞추면 텍스트와 어느정도 떨어진 이미지가 나타나게 된다.

 

 // app 실행 시, viewDidLoad()를 거쳐서 뜬다.
    override func viewDidLoad() {
        super.viewDidLoad()
        reload()
        
        // 버튼의 tintColor 바꾸기
        button.tintColor = UIColor.systemPink
    }

- 위와 같이 viewDidLoad() 함수에 버튼의 tintColor을 바꾸는 코드를 작성 : button.tintColor = UIColor.systemPink

 

 

 

6️⃣ 완성된 앱

 

 

 

 

 

---

Reference

패스트캠퍼스 온라인 강의