[swift] UIButton을 이용한 간단한 view 변경 1(in Code)
UIButton을 이용한 백그라운드 컬러 변경
이번에는 지난 번에 발견해낸 버튼 액션 기능 구현을 이용하여 각 색 버튼을 누르면 해당색의 백그라운드 컬러를 가진 뷰로 넘어가보는 작업을 해보겠어요.
1. 뷰컨트롤러에 연결할 코코아터치 클래스 만들기
좌측에 있는 indicator에서 new file을 추가할 수 있어요. 거기서 Cocoa Touch Class를 선택해줍니다!
여기서는 1번에서 만든 각각의 뷰컨트롤러에 연결될 클래스를 만들어주게 되는데요.
아래처럼 indicator로 가서 New File-Cocoa Touch Class를 추가해줍니다.
저는 빨강, 파란, 그린 배경의 뷰컨에 대한 클래스가 필요하므로
-FirstViewController
-SecondViewController
-ThirdViewController
이름으로 3개를 만들어줍니다요.
2. 각각의 버튼 생성해주기
누르면 색깔이 변하는 버튼을 만들어 줄겁니다.
일단 각각 UIButton의 인스턴스로 만들었습니다.
class ViewController: UIViewController {
let redButton = UIButton()
let blueButton = UIButton()
let greenButton = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
//버튼 스타일 설정
//버튼 오토레이아웃 잡기
}
}3. 버튼의 속성 정해주기
버튼의 속성은 ViewDidLoad에서 구현해주었어요.
화면이 로드되면 보일 부분이기 때문이져? (맞나여,,?ㅎㅎ)
버튼 타이틀 - SetTitle(_:for:) 이용
버튼에는 텍스트에 없기 때문에 그냥 공백("")으로 설정했구요, For는 상태를 받기 때문에 .normal로 설정하였습니다.
(이 외에도 normal, highlighted, disabled, selected 등 여러개의 타입 속성이 있슴돠)
버튼 배경 - backgroundColor이용
backgroundColor를 이용하여 버튼의 색도 바꿔줄게요!
버튼 테두리 - cornerRadius
버튼 테두리는 둥글게 둥글게~ 귀엽게 설정을 해주어야 하는데요.
layer속성의 cornerRadius를 설정해주면 됩니다.
저는 10 정도로 설정해 주었어요.
버튼 올리기 - addSubview
가장 중요한 걸 까먹을 뻔 했어요!!
addSubview를 통해 만든 버튼을 올려야 합니다.
override func viewDidLoad() {
super.viewDidLoad()
//빨간색 버튼 스타일 설정하기
redButton.setTitle("", for: .normal)
redButton.backgroundColor = .red
redButton.layer.cornerRadius = 10
view.addSubview(redButton)
//파란색 버튼 스타일 설정하기
blueButton.setTitle("", for: .normal)
blueButton.backgroundColor = .blue
blueButton.layer.cornerRadius = 10
view.addSubview(blueButton)
// 초록색 버튼 스타일 설정하기
greenButton.setTitle("", for: .normal)
greenButton.backgroundColor = .green
greenButton.layer.cornerRadius = 10
view.addSubview(greenButton)
}
4. 오토레이아웃 잡기
저에게 가장 큰 난관이죠. 오토레이아웃
이번에도 블로그를 뒤져뒤져 만들어 보았어요.
우선 translatesAutoresizingMaskIntoConstraints이라는 인스턴스 속성을 false로 설정해 주어야 합니다.
override func viewDidLoad() {
super.viewDidLoad()
//버튼 스타일 설정하기 생략...
redButton.translatesAutoresizingMaskIntoConstraints = false
blueButton.translatesAutoresizingMaskIntoConstraints = false
greenButton.translatesAutoresizingMaskIntoConstraints = false
let safeArea = view.safeAreaLayoutGuide
redButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
blueButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
greenButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
redButton.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 300).isActive = true
blueButton.topAnchor.constraint(equalTo: redButton.topAnchor, constant: 80).isActive = true
greenButton.topAnchor.constraint(equalTo: blueButton.topAnchor, constant: 80).isActive = true
redButton.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
blueButton.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
greenButton.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
redButton.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
blueButton.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
greenButton.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
}그리고 나서 각 버튼의 제약을 추가해준다리!
safeAreaLayoutGuide라는 인스턴스 속성은 "bar나 다른 content에 방해받지 않는 뷰의 영역을 나타내는 가이드"라고 하네여!!
The layout guide representing the portion of your view that is unobscured by bars and other content.
저는 safeArea라는 변수에 할당해주었지만, 아래처럼 그 자체로 사용해도 됨돠
redButton.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 300).isActive = true
그리고 leading, trailing, top Anchor제약을 추가해줍니다!
액션 메서드는 ViewDidLoad가 끝난 시점에서 설정해주고, 나중에 addTarget메서드를 통해 ViewDidLoad에서 구현했습니다.
5. 버튼 눌렀을 때의 메서드 구현하기
이제 레드 버튼을 눌렀을 때, FirstViewController가 나오도록 해야해요.
요것은 FirstViewConroller 인스턴스를 찍어낸 후 → present메서드를 실행하면 됩니다.
present 메서드는 아래와 같이 생긴 놈이군요. ㅎㅎ
또한 아래에서 올라오는 화면이 전체를 덮는 모양이기 때문에 풀스크린으로 화면이 올라오는 코드도 설정해야 해요.
풀스크린 설정은 modaPresentationStyle로 설정해줍니다.
@objc func redBtnTapped(_ button: UIButton) {
let rootVC = FirstViewController()
rootVC.modalPresentationStyle = .fullScreen
self.present(rootVC, animated: true)위와 같은 작업을 블루뷰, 그린뷰에도 작업을 해주시면 됩니다.
SecondViewController
@objc func blueBtnTapped(_ button: UIButton) {
let secondVC = SecondViewController()
secondVC.modalPresentationStyle = .fullScreen
self.present(secondVC, animated: true)
}ThirdViewController
@objc func greenBtnTapped(_ button: UIButton) {
let thirdVC = ThirdViewController()
thirdVC.modalPresentationStyle = .fullScreen
self.present(thirdVC, animated: true)
}6. 버튼 addTarget해주기
우리가 위에서 버튼 이벤트 발생 시 구현할 메서드를 정의해줬는데요.
addTarget 작업을 해주어야 버튼을 눌렀을 때 해당 메서드가 실행될 수 있습니다.
해당 작업은 ViewDidLoad의 버튼 스타일 & 오토 레이아웃 설정을 끝낸 후 해주었습니다.
import UIKit
import SnapKit
class ViewController: UIViewController {
let redButton = UIButton()
let blueButton = UIButton()
let greenButton = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
//버튼 스타일 설정...
//버튼 오토레이아웃 설정...
//버튼 addTarget
redButton.addTarget(self, action: #selector(redBtnTapped(_:)), for: .touchUpInside)
blueButton.addTarget(self, action: #selector(blueBtnTapped), for: .touchUpInside)
greenButton.addTarget(self, action: #selector(greenBtnTapped), for: .touchUpInside)
}이렇게 오래 걸릴지 몰랐어여,,,
하지만 아직도 갈 길이 멀어버린 것,,,
2번째 글로 찾아올게요!!
아래 펼쳐보면 전체코드 있어여!!
import UIKit
import SnapKit
class ViewController: UIViewController {
let redButton = UIButton()
let blueButton = UIButton()
let greenButton = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
redButton.setTitle("", for: .normal)
redButton.backgroundColor = .red
redButton.layer.cornerRadius = 10
view.addSubview(redButton)
blueButton.setTitle("", for: .normal)
blueButton.backgroundColor = .blue
blueButton.layer.cornerRadius = 10
view.addSubview(blueButton)
greenButton.setTitle("", for: .normal)
greenButton.backgroundColor = .green
greenButton.layer.cornerRadius = 10
view.addSubview(greenButton)
redButton.translatesAutoresizingMaskIntoConstraints = false
blueButton.translatesAutoresizingMaskIntoConstraints = false
greenButton.translatesAutoresizingMaskIntoConstraints = false
let safeArea = view.safeAreaLayoutGuide
redButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
blueButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
greenButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
redButton.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 300).isActive = true
blueButton.topAnchor.constraint(equalTo: redButton.topAnchor, constant: 80).isActive = true
greenButton.topAnchor.constraint(equalTo: blueButton.topAnchor, constant: 80).isActive = true
redButton.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
blueButton.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
greenButton.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
redButton.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
blueButton.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
greenButton.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
redButton.addTarget(self, action: #selector(redBtnTapped(_:)), for: .touchUpInside)
blueButton.addTarget(self, action: #selector(blueBtnTapped), for: .touchUpInside)
greenButton.addTarget(self, action: #selector(greenBtnTapped), for: .touchUpInside)
}
@objc func redBtnTapped(_ button: UIButton) {
let rootVC = FirstViewController()
rootVC.modalPresentationStyle = .fullScreen
self.present(rootVC, animated: true)
}
@objc func blueBtnTapped(_ button: UIButton) {
let secondVC = SecondViewController()
secondVC.modalPresentationStyle = .fullScreen
self.present(secondVC, animated: true)
}
@objc func greenBtnTapped(_ button: UIButton) {
let thirdVC = ThirdViewController()
thirdVC.modalPresentationStyle = .fullScreen
self.present(thirdVC, animated: true)
}
}