[swift]button, label 코드로 구현하기

button, label을 스토리보드가 아닌 코드로 구현해보기

버튼과 레이블을 스토리보드로 구현했으나, 오로지 코드로만 구현할 수 있다는 얘기를 듣고 맨땅에 헤딩을 해보았다. 헤헿
gif 파일로 만드니 1초도 안 걸리지만, 어젯밤부터 술김에 구글을 엄청 검색해서 겨우 해냈다구,,,
※온갖 블로그를 보고 만들었기 때문에 비빔밥스러운 코드 주의

1. 버튼과 레이블의 인스턴스 만들어주기

class ViewController: UIViewController {
    
    let button = UIButton()
    let label = UILabel()

 

2. 버튼 속성과 위치 잡아주기

Size - CGSize이용
CGSize 구조체에는 다양한 생성자가 있네요. 저는 그 중에 정수를 받는 생성자를 써보겠읍니다.

버튼 이름 - SetTitle(_:for:) 이용
버튼 이름을 바꾸기 위해 SetTitle이라는 메서드를 사용해봅니다.
첫 번째 파라미터에는 버튼명을 문자열로, 두 번째 파라미터에는 버튼 상태를 입력!
버튼 상태는 점을 찍어보면 normal, hightlighted, disabled 등 여러개가 있으니 선택하시면 됩니다.


버튼 배경 - backgroundColor이용
backgroundColor를 이용하여 버튼의 색도 바꿔줄게요!


버튼 테두리 - cornerRadius
button.layer.cornerRadius를 사용하면 버튼의 모서리를 동그랗게 설정할 수 있답니다.

addSubview스토리보드로 만들 때는 라이브러리에서 버튼을 끌어다 놓으면 되었지만, 만든 버튼을 코드를 통해 뷰에 올리기 위해서는 addSubview를 반드시 해주어야 해요!


오토레이아웃
safeArea를 설정해주어 button의 위치를 잡아줌
translatesAutoresizingMaskIntoConstraints를 false로 설정해주어야 코드로 오토레이아웃을 설정할 수 있다고 하네요
저는 오늘 NSLayoutAnchor라는 클래스를 이용하여 오토레이아웃을 잡아봅니다.
(NSLayoutAnchor외에도 NSLayoutConstraint, Visual Format Language도 있다는데, 그것도 조만간 공부해야 할 것 같아요,,ㅎ,ㅎ,,)

    override func viewDidLoad() {
        super.viewDidLoad()
        
        button.frame.size = CGSize(width: 60, height: 30)
        
        button.setTitle("Click", for: .normal)
        button.backgroundColor = UIColor.red
        button.layer.cornerRadius = 10
        view.addSubview(button)
        
        let safeArea = view.safeAreaLayoutGuide
        button.translatesAutoresizingMaskIntoConstraints = false
        button.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 20).isActive = true
        button.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 400).isActive = true
        button.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -20).isActive = true
    
        button.addTarget(self, action: #selector(buttonTappedTest), for: .touchUpInside)
        
        label.text = "button connect"
        label.backgroundColor = UIColor.systemGreen
        label.textAlignment = .center
        label.font = UIFont.boldSystemFont(ofSize: 33)
        view.addSubview(label)
        
        label.translatesAutoresizingMaskIntoConstraints = false
        label.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 20).isActive = true
        label.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 350).isActive = true
        label.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -20).isActive = true
    }
    

    
}

3. 버튼에 동작 부여하기

제가 제일 어려워했던 부분인데요.
스토리보드로 만들 때는 @IBAction으로 설정하면 됐었는데, 코드로는 어떻게 하는지 몰라서 진짜 많은 블로그를 봤어요 ㅠㅠ

    @objc func buttonTappedTest(_ button: UIButton) {
        label.textColor = .red
        label.backgroundColor = .yellow
    }

(아직도 맞는지는 모르겠어요,,ㅎㅎ이렇게 했더니 됐을 뿐,,,)

액션을 눌렀을 때 발생하는 일들을 하나의 메서드로 만들면 됩니다.
저는 buttonTappedTest라는 메서드를 만들었구요.
반드시 @objc라는 키워드를 붙여줘야 해요. 안 붙여주면 오류가 발생하더라구요!

여기서 레이블의 배경색과 글씨체를 바꿔주는 코드를 넣습니다.

그리고 여기서 제일 중요한 건 addTarget을 해주는 겁니다.
터치업인사이드 이벤트가 발생했을 때, 타겟에 어떤 액션을 취해줄지를 정하게 되거든요.
addTarget의 모습은 아래와 같은습니다.

전체코드

import UIKit

class ViewController: UIViewController {
    
    let button = UIButton()
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        button.frame.size = CGSize(width: 60, height: 30)
        
        button.setTitle("Click", for: .normal)
        button.backgroundColor = UIColor.red
        button.layer.cornerRadius = 10
        view.addSubview(button)
        
        let safeArea = view.safeAreaLayoutGuide
        button.translatesAutoresizingMaskIntoConstraints = false
        button.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 20).isActive = true
        button.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 400).isActive = true
        button.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -20).isActive = true
    
        button.addTarget(self, action: #selector(buttonTappedTest), for: .touchUpInside)
        
        label.text = "button connect"
        label.backgroundColor = UIColor.systemGreen
        label.textAlignment = .center
        label.font = UIFont.boldSystemFont(ofSize: 33)
        view.addSubview(label)
        
        label.translatesAutoresizingMaskIntoConstraints = false
        label.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 20).isActive = true
        label.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 350).isActive = true
        label.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -20).isActive = true
    }
    
    @objc func buttonTappedTest(_ button: UIButton) {
        label.textColor = .red
        label.backgroundColor = .yellow
    }
    
}