[Project 002][iOS] Dice App

Uno·2021년 1월 22일
0

Project100

목록 보기
2/4

Dice App

Udemy 안젤라 선생님의 강의 중 Dice app 과정을 조금 변형해서 구성했습니다.
변형한 부분은 Storyboard로 구현했던 것을 코드만 사용해서 구현했습니다.

코드)

import UIKit
import Then

class ViewController: UIViewController {
    
    //MARK: - Properties
    
    // 배경사진 이미지 뷰
    private let backgroundImageView = UIImageView().then {
        $0.image = #imageLiteral(resourceName: "GreenBackground")
        $0.contentMode = .scaleAspectFill
    }
    
    // 로고 이미지 뷰
    private let logoImageView = UIImageView().then {
        $0.image = #imageLiteral(resourceName: "DiceeLogo")
        $0.contentMode = .scaleAspectFill
    }
    
    // 왼쪽 주사위 이미지 뷰
    private let leftsideDiceImageView = UIImageView().then {
        $0.image = #imageLiteral(resourceName: "DiceOne")
        $0.contentMode = .scaleAspectFit
    }
    
    // 오른쪽 주사위 이미지 뷰
    private let rightsideDiceImageView = UIImageView().then {
        $0.image = #imageLiteral(resourceName: "DiceTwo")
        $0.contentMode = .scaleAspectFit
    }
    
    // 셔플 버튼
    private let shuffleBotton = UIButton(type: .system).then {
        $0.setTitle("Roll", for: .normal)
        $0.setTitleColor(.white, for: .normal)
        $0.titleLabel?.font = UIFont.boldSystemFont(ofSize: 20)
        $0.backgroundColor = #colorLiteral(red: 0.521568656, green: 0.1098039225, blue: 0.05098039284, alpha: 1)
        $0.layer.borderWidth = 1
        $0.layer.borderColor = #colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1)
        $0.layer.cornerRadius = 30
        $0.addTarget(self, action: #selector(handleShuffle), for: .touchUpInside)
    }
    
    
    //MARK: - Actions
    
    @objc func handleShuffle() {
        let diceArray = [#imageLiteral(resourceName: "DiceOne"), #imageLiteral(resourceName: "DiceTwo"), #imageLiteral(resourceName: "DiceThree"), #imageLiteral(resourceName: "DiceFour"), #imageLiteral(resourceName: "DiceFive"), #imageLiteral(resourceName: "DiceSix")]
        leftsideDiceImageView.image = diceArray.randomElement()
        rightsideDiceImageView.image = diceArray.randomElement()
        
    }
    
    
    
    //MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    
    
    
    //MARK: - Helpers
    
    func configureUI() {
        
        // 배경화면 이미지 뷰
        view.addSubview(backgroundImageView)
        backgroundImageView.center = view.center
        backgroundImageView.frame = view.frame
        
        // 상단 로고 이미지 뷰
        view.addSubview(logoImageView)
        logoImageView.centerX(inView: view)
        logoImageView.setDimensions(height: 170, width: 170)
        logoImageView.anchor(top: view.topAnchor, paddingTop: view.frame.height/7)
        
        // 왼쪽 이미지 뷰
        view.addSubview(leftsideDiceImageView)
        leftsideDiceImageView.setDimensions(height: 120, width: 120)
        leftsideDiceImageView.centerY(inView: view)
        leftsideDiceImageView.anchor(left: view.leftAnchor, paddingLeft: 60)
        
        // 오른쪽 이미지 뷰
        view.addSubview(rightsideDiceImageView)
        rightsideDiceImageView.setDimensions(height: 120, width: 120)
        rightsideDiceImageView.centerY(inView: view)
        rightsideDiceImageView.anchor(right: view.rightAnchor, paddingRight: 60)
        
        // 셔플 버튼
        view.addSubview(shuffleBotton)
        shuffleBotton.setDimensions(height: 60, width: 90)
        shuffleBotton.centerX(inView: view)
        shuffleBotton.anchor(bottom: view.bottomAnchor, paddingBottom: view.frame.height/5)
        
    }
    
    
}

코드 설명)

  • Then 라이브러리를 사용했습니다.
  • 커스텀 메소드를 활용하여 오토레이아웃을 적용했습니다.
  • 랜덤한 값을 가져오기 위해서 Array.randomElement() 을 사용했습니다.
profile
iOS & Flutter

0개의 댓글