[swift] 1. 랜덤 명언 생성기 만들기 (programmatically)

앞으로 하나씩 작은 앱을 만들어보기로 했는데여! 

오늘은 명언 만들기 앱입니당.

오늘의 명언 버튼을 누르면 랜덤으로 초록색 뷰 안에 명언과 작가가 나오는 간단한 예제임돠ㅎㅎ

---

오늘도 기본 UI를 잡는 코드는 숨겨둘게요!

class ViewController: UIViewController{
    
    let mainLbl = UILabel() // "명언 생성기"
    let myView = UIView() // 연두색 배경화면
    let quoteLbl = UILabel() // 명언
    let personLbl = UILabel() // 작가
    let randomBtn = UIButton() // "오늘의 명언"버튼 (랜덤 버튼)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()

    }

    //"오늘의 명언"버튼 (랜덤 버튼) 누르면 발생할 이벤트
    @objc func randomBtnTapped(_ sender: UIButton) {
		//버튼 누르면 발생할 이벤트
    }
}

//MARK: -SetUI
extension ViewController {
    final private func configureUI(){
        setConstraints()
        setAttributes()
        addTarget()
    }
    
    
    final private func setAttributes() {
        // "명언 생성기" Attributes
        [mainLbl].forEach {
            $0.text = "명언 생성기"
            $0.textAlignment = .center
            $0.font = UIFont(name: "SongMyung-Regular", size: 30)
        }
        
        // 명언의 배경이 될 view
        [myView].forEach {
            $0.backgroundColor = MyColor.greenColor
            $0.layer.cornerRadius = 50
        }
        
        // 명언과 작가가 나올 레이블의 Attributes
        [quoteLbl, personLbl].forEach {
            $0.text = ""
            $0.textAlignment = .center
            $0.font = UIFont(name: "EastSeaDokdo-Regular", size: 30)
            $0.numberOfLines = 8
            $0.sizeToFit()
            $0.textColor = .white
        }

        //"오늘의 명언" 버튼 (랜덤 버튼)
        [randomBtn].forEach {
            $0.setTitle("오늘의 명언", for: .normal)
            $0.setTitleColor(.black, for: .normal)
            $0.layer.cornerRadius = 5
            $0.layer.borderWidth = 0.5
            $0.titleLabel?.font = UIFont(name: "SongMyung-Regular", size: 30)
        }
        
    }
    
    //버튼에 이벤트 설정
    final private func addTarget() {
        randomBtn.addTarget(self, action: #selector(randomBtnTapped(_:)), for: .touchUpInside)
    }
    
    //오토레이아웃 잡기
    final private func setConstraints() {
        [mainLbl, myView, quoteLbl, personLbl, randomBtn].forEach {
            view.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        NSLayoutConstraint.activate([
            mainLbl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 80),
            mainLbl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            
            myView.topAnchor.constraint(equalTo: mainLbl.bottomAnchor, constant: 60),
            myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
            myView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20),
            myView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -200),
            
            quoteLbl.topAnchor.constraint(equalTo: myView.topAnchor, constant: 70),
            quoteLbl.centerXAnchor.constraint(equalTo: myView.centerXAnchor),
            quoteLbl.leadingAnchor.constraint(equalTo: myView.leadingAnchor, constant: 20),
            quoteLbl.trailingAnchor.constraint(equalTo: myView.trailingAnchor, constant: -20),
            
            personLbl.bottomAnchor.constraint(equalTo: myView.bottomAnchor, constant: -70),
            personLbl.centerXAnchor.constraint(equalTo: myView.centerXAnchor),
            
            randomBtn.topAnchor.constraint(equalTo: myView.bottomAnchor, constant: 60),
            randomBtn.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }
}

---

지난 번에 MVC패턴이라는 디자인 패턴을 배웠는데요, 그 패턴에 따라 Model 파일을 별도로 만들어볼게요.

(MVC 패턴 공부한 것도 다뤄야지,,,)

 

 

MVC는 간단하게 Model-View-Controller로 나눠서 관리하는 것인데, Model과 View는 오로지 Controller를 통해서만 서로 정보(?) 지시(?)를 주고 받을 수 있어요.

 

 

일단 명언 생성기에서는 명언과 작가가 필요하겠져?

 

 

Command + N를 눌러서 구조체 하나를 만들어줍니다.

//Quote.swift
import UIKit

struct Quote {
    var quote: String
    var person: String
}

 

Quote구조체의 속성으로 quote와 person 상수를 만들어줄게요.

 

그리고 다시 Command+N을 누른 후, QuoteBrain이라는 Model파일을 하나 만들어줍니다. 그리고 Quote타입으로 구성된 명언 배열을 만들어줍니당.

//  QuoteBrain.swift

import UIKit

struct QuoteBrain {
    let quoteArray = [
        Quote(quote: "명성을 쌓는 데는 20년이란 세월이 걸리며, 명성을 무너뜨리는 데는 채 5분도 걸리지 않는다. 그걸 명심한다면, 당신의 행동이 달라질 것이다.", person: "워런 버핏"),
        Quote(quote: "바보의 뇌는 철학을 바보짓으로, 과학을 미신으로, 예술을 규칙으로 바꾼다. 그것이 대학교육이다.", person: "조지 버나드 쇼"),
        Quote(quote: "강력한 이유는 강력한 행동을 낳는다.", person: "윌리엄 셰익스피어"),
        Quote(quote: "더 많이 준다고 아이를 망치는 게 아니다. 충돌을 피하려고 더 많이 주면 아이를 망친다.", person: "존 그레이"),
        Quote(quote: "교육은 일종의 계속되는 대화이고, 그 대화는 세상일이 보통 그렇듯 여러 가지 관점이 있음을 인정한다.", person: "로버트 허친스"),
        Quote(quote: "중요한 것은 학습을 중단하지 않고, 도전을 즐기고, 애매모호함을 받아들이는 것이다. 종국에는 확실한 해답은 없기 마련이다.", person: "마티나 호너"),
        Quote(quote: "나는 믿음을 존중하지만 우리를 가르치는 것은 의구심이다.", person: "윌슨 미즈너"),
        Quote(quote: "어떤 분야에서든 유능해지고 성공하기 위해선 세 가지가 필요하다. 타고난 천성과 공부 그리고 부단한 노력이 그것이다.", person: "헨리 워드 비처"),
        Quote(quote: "아버지들은 자신이 대학을 나왔기 때문에, 혹은 자신이 대학을 나오지 않았기 때문에 아들을 대학에 보낸다.", person: "L.L.헨더슨"),
        Quote(quote: "자신을 화나게 했던 행동을 다른 이에게 행하지 말라.", person: "소크라테스"),
        Quote(quote: "자유와 정의 다음으로 중요한 것은 대중 교육인데, 대중 교육 없이는 자유도 정의도 영원히 유지될 수 없다.", person: "제임스 A.가필드"),
        Quote(quote: "아이들이 답이 있는 질문을 하기 시작하면 그들이 성장하고 있음을 알 수 있다.", person: "존 J. 플롬프"),
        Quote(quote: "제자가 계속 제자로만 남는다면 스승에 대한 고약한 보답이다.", person: "프레드리히 니체"),
    ]
    
}

 

 

---

자 이제 Model에서의 작업은 끝났구요.

ViewController로 돌아와줄게요.

 

QuoteBrain 객체를 viewDidLoad 위에 하나 만들어줄게요.

var quoteBrain = QuoteBrain()

 

그리고 아까 빈칸으로 남겨두었던 randomBtnTapped(_:) 메서드의 바디를 넣어줘볼게요.

"오늘의 명언"이라는 버튼을 누르면 위에 명언 레이블(quoteLbl)과 작가 레이블(personLbl)에 랜덤으로 문구와 작가가 떠야하잖아여?

 

 

우선 QuoteBrain의 요소를 랜덤으로 뽑아내줘야합니다.

 

randomElement()라는 메서드는 배열에서 랜덤으로 요소를 꺼내주는 놈인데요. 이 메서드를 이용해줄게요.

근데 이 놈은 옵셔널 형태를 리턴해요. 아무래도 컬렉션 형태들은 해당 인덱스의 값이 없을 수 있기 때문에 옵셔널로 리턴되더라구요.

 

 

 

그렇기 때문에 옵셔널 바인딩을 고고해줄거에요.

if let quote = quoteBrain.quoteArray.randomElement() {
    quoteLbl.text = quote.quote
    personLbl.text = quote.person
}

 

하나의 랜덤 요소가 뽑혀 quote에 담겼겠져?

그 요소의 quote를 quoteLbl에, person 요소를 personLbl에 담아주면 됩니다!

 

끝!

 

전체코드는 아래에!! ⬇️⬇️⬇️⬇️

import UIKit

class ViewController: UIViewController{
    
    let mainLbl = UILabel() // "명언 생성기"
    let myView = UIView() // 연두색 배경화면
    let quoteLbl = UILabel() // 명언
    let personLbl = UILabel() // 작가
    let randomBtn = UIButton() // "오늘의 명언"버튼 (랜덤 버튼)
    
    var quoteBrain = QuoteBrain()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()

    }

    //"오늘의 명언"버튼 (랜덤 버튼) 누르면 발생할 이벤트
    @objc func randomBtnTapped(_ sender: UIButton) {
        if let quote = quoteBrain.quoteArray.randomElement() {
            quoteLbl.text = quote.quote
            personLbl.text = quote.person
        }
    }
}

//MARK: -SetUI
extension ViewController {
    final private func configureUI(){
        setConstraints()
        setAttributes()
        addTarget()
    }
    
    final private func setAttributes() {
        // "명언 생성기" Attributes
        [mainLbl].forEach {
            $0.text = "명언 생성기"
            $0.textAlignment = .center
            $0.font = UIFont(name: "SongMyung-Regular", size: 30)
        }
        
        // 명언의 배경이 될 view
        [myView].forEach {
            $0.backgroundColor = MyColor.greenColor
            $0.layer.cornerRadius = 50
        }
        
        // 명언과 작가가 나올 레이블의 Attributes
        [quoteLbl, personLbl].forEach {
            $0.text = ""
            $0.textAlignment = .center
            $0.font = UIFont(name: "EastSeaDokdo-Regular", size: 30)
            $0.numberOfLines = 8
            $0.sizeToFit()
            $0.textColor = .white
        }

        //"오늘의 명언" 버튼 (랜덤 버튼)
        [randomBtn].forEach {
            $0.setTitle("오늘의 명언", for: .normal)
            $0.setTitleColor(.black, for: .normal)
            $0.layer.cornerRadius = 5
            $0.layer.borderWidth = 0.5
            $0.titleLabel?.font = UIFont(name: "SongMyung-Regular", size: 30)
        }
    }
    
    final private func addTarget() {
        randomBtn.addTarget(self, action: #selector(randomBtnTapped(_:)), for: .touchUpInside)
    }
    
    final private func setConstraints() {
        [mainLbl, myView, quoteLbl, personLbl, randomBtn].forEach {
            view.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        NSLayoutConstraint.activate([
            mainLbl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 80),
            mainLbl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            
            myView.topAnchor.constraint(equalTo: mainLbl.bottomAnchor, constant: 60),
            myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
            myView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20),
            myView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -200),
            
            quoteLbl.topAnchor.constraint(equalTo: myView.topAnchor, constant: 70),
            quoteLbl.centerXAnchor.constraint(equalTo: myView.centerXAnchor),
            quoteLbl.leadingAnchor.constraint(equalTo: myView.leadingAnchor, constant: 20),
            quoteLbl.trailingAnchor.constraint(equalTo: myView.trailingAnchor, constant: -20),
            //quoteLbl.bottomAnchor.constraint(equalTo: myView.bottomAnchor, constant: -40),
            
            personLbl.bottomAnchor.constraint(equalTo: myView.bottomAnchor, constant: -70),
            personLbl.centerXAnchor.constraint(equalTo: myView.centerXAnchor),
            
            randomBtn.topAnchor.constraint(equalTo: myView.bottomAnchor, constant: 60),
            randomBtn.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        ])
    }
}

---

잘못된 게 있으면 바로 잡아주십셔!! 슨배님덜!!

오늘도 많이 배우겠습니다!