MagicBall App

Udemy 안젤라님 강의중에서 self study로 하는 프로젝트입니다.

기존 진행과 다르게 진행한 부분이 있습니다.

코드)

import UIKit
import Then

class ViewController: UIViewController {
    
    //MARK: - Properties
    
    // MagicBall 이미지 뷰
    private let backgroundImageView = UIImageView().then {
        $0.contentMode = .scaleAspectFill
        $0.image = #imageLiteral(resourceName: "vincentiu-solomon-ln5drpv_ImI-unsplash.jpg")
    
    }

    // 타이틀 레이블
    private let titleLabel = UILabel().then {
        $0.clipsToBounds = true
        $0.text = "Ask Me Anything..."
        $0.font = UIFont.boldSystemFont(ofSize: 40)
        $0.textColor = .white
        $0.textAlignment = .center
        $0.backgroundColor = .clear
    }
    
    // MagicBall 이미지 뷰
    private let magicBallImageView = UIImageView().then {
        $0.contentMode = .scaleAspectFill
    
    }
    
    // Ask 버튼
    private let askBtn = UIButton(type: .system).then {
        $0.backgroundColor = #colorLiteral(red: 0.173146168, green: 0.5666250912, blue: 0.3713964885, alpha: 1)
        $0.setTitle("Ask", for: .normal)
        $0.titleLabel?.font = UIFont.boldSystemFont(ofSize: 20)
        $0.setTitleColor(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1), for: .normal)
        $0.addTarget(self, action: #selector(handleMagieBall), for: .touchUpInside)
    }

    
    //MARK: - Lifecylce
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
        
    }
    
    //MARK: - Actions
    
    @objc func handleMagieBall() {
        let ballArray = [#imageLiteral(resourceName: "ball1.png"), #imageLiteral(resourceName: "ball2.png"), #imageLiteral(resourceName: "ball3.png"), #imageLiteral(resourceName: "ball4.png"), #imageLiteral(resourceName: "ball5.png")]

        magicBallImageView.image = ballArray.randomElement()
    }
    
    
    
    
    //MARK: - Helpers
    
    func configureUI() {
        
        // 배경색지정
        view.addSubview(backgroundImageView)
        backgroundImageView.center = view.center
        backgroundImageView.frame = view.frame
        
        // 상단 Title Label
        view.addSubview(titleLabel)
        titleLabel.setDimensions(height: 70, width: 400)
        titleLabel.centerX(inView: view)
        titleLabel.anchor(top: view.topAnchor, paddingTop: view.frame.height/7)
        
        // 중앙 ImageView
        view.addSubview(magicBallImageView)
        magicBallImageView.setDimensions(height: 250, width: 250)
        magicBallImageView.center(inView: view)
        
        // 버튼
        view.addSubview(askBtn)
        askBtn.setDimensions(height: 40, width: 100)
        askBtn.centerX(inView: view)
        askBtn.anchor(top: magicBallImageView.bottomAnchor, paddingTop: 50)
        
    }
    

}

코드설명)

• Then 라이브러리를 활용했습니다.
• 코드로만 UI를 구성했습니다.
• 커스텀 메소드로 오토레이아웃을 적용했습니다.