[swift] UIButton을 이용한 간단한 view 변경 2(in Code)

 

후우 후우
생각보다 오래 걸리네여?

 

오늘은
UIButton을 이용한 백그라운드 컬러 변경 2번째 시간입니다~ 짜란~

 

지난 번 글에서는 각 버튼을 만들고 각 버튼의 레이아웃 잡고, 연결할 뷰를 present하는 것까지 완료했었쥬?
오늘은 각 버튼을 누르면 배경색을 가진 화면이 아래에서 나타나는 것을 구현해보도록 하겠읍니다.

 

---

 

1. 버튼 만들기

메인 화면에서 빨간색 버튼을 클릭하면 뷰가 아래에서 풀스크린 형식으로 올라오고, 빨간 배경화면과 정중앙에 하얀 버튼이 생깁니다.

그 하얀 버튼을 만들어볼게유. 그래야 메인으로 돌아갈 수 있거든요. 

 

 

먼저 indicator를 통해 FirstViewController로 갑니다.

그 후 아무 타이틀이 없는 redBtn라는 이름으로 버튼(인스턴스 찍어내기)을 만들고, 뷰에 올리도록 합니다.

 

 

이제 ViewDidLoad에서 루트뷰의 배경색을 빨강으로 바꾸고, 내가 원하는 스타일로 버튼을 만들어 볼거에요.

 

import UIKit

import UIKit

class FirstViewController: UIViewController {

    // 버튼 만들기
    let redBtn = UIButton()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
       	// 버튼의 스타일 설정하기
        // 버튼의 오토레이아웃 잡기
      
    }

 

버튼 타이틀 - SetTitle(_:for:) 이용

 

버튼 배경 - backgroundColor이용

버튼 테두리 - cornerRadius

버튼 올리기 - addSubview

앞 글에서도 했던 작업을 동일하게 해줍니다.

 

//  FirstViewController.swift
//  Created by 순진이 on 2021/10/27.
//
import UIKit

class FirstViewController: UIViewController {

    //버튼 인스턴스 찍어내기
    let redBtn = UIButton() 
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.red // 뷰의 배경화면 설정
        
        //버튼 스타일 설정하기
        redBtn.setTitle("", for: .normal) // 버튼의 타이틀 설정 (공백)
        redBtn.backgroundColor = .white // 버튼의 배경화면 설정
        redBtn.layer.cornerRadius = 10 // 버튼의 테두리 둥글게 설정
        view.addSubview(redBtn) // 버튼을 뷰에 올리기
        
        
        }
}

2. 버튼의 오토레이아웃 설정

버튼의 스타일을 설정한 후에는 버튼의 오토레이아웃을 설정해봅니다.

 

제일 중요한 translatesAutoresizingMaskIntoConstraints 속성을 false 설정해야 하겠쥬?

그리고 centerX, centerY, leading, trailing Anchor로 위치를 잡아주었어요.

 

import UIKit

class FirstViewController: UIViewController {

    
    let redBtn = UIButton()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //버튼 스타일 설정 생략...
        
        
        //버튼의 오토레이아웃 잡기
        redBtn.translatesAutoresizingMaskIntoConstraints = false
        let safeArea = view.safeAreaLayoutGuide
        
        redBtn.centerXAnchor.constraint(equalTo: safeArea.centerXAnchor).isActive = true
        redBtn.centerYAnchor.constraint(equalTo: safeArea.centerYAnchor).isActive = true
        redBtn.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
        redBtn.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
        
        
        
    }

 

 

3. 버튼에서 일어날 액션 정의하기

하얀 버튼을 누르면 다시 메인 화면으로 돌아가지요?

뷰가 나타날 때 present를 해줬던 것과 비슷해요. dismiss를 사용해주면 되거든요!

 

ViewDidLoad가 끝난 후 메서드를 만들어 주면 됩니다.

 

@IBAction으로 구현했을 때는 @IBAction 메서드 아래 설정을 해주면 됐었는데, 코드로 구현할 때는 아래와 같이 @objc 키워드를 붙이고 UIButton타입을 파라미터로 받아야 합니다.

    @objc func redBackBtn(_ button: UIButton) {
        self.presentingViewController?.dismiss(animated: true, completion: nil)
    }

 

4. 버튼을 addTarget해주기

버튼에서 일어난 이벤트를 처리해주는 방식입니다.

반드시 이 메서드를 써야만, 버튼을 눌렀을 때 우리가 4번에서 구현한 메서드가 실현된답니다!!

    override func viewDidLoad() {
        super.viewDidLoad()
        //버튼 스타일 설정
        //버튼 오토레이아웃 설정
        
        //버튼의 이벤트 처리
        redBtn.addTarget(self, action: #selector(redBackBtn), for: .touchUpInside)
        
        
        
    }

 

5. SecondViewController, ThirdViewController 에서도 동일한 작업 수행!

 

---

 

아니 근데, 어제 엣지로 글을 썼는데, 코드가 다 HTML로 인식돼서 바꼈어요.

다시는 엣지로 글 안 올릴거에요.

1편만 수정 500번째,,,

import UIKit

class FirstViewController: UIViewController {

    
    let redBtn = UIButton()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.red
        redBtn.setTitle("", for: .normal)
        redBtn.backgroundColor = .white
        redBtn.layer.cornerRadius = 10
        view.addSubview(redBtn)
                
        
        redBtn.translatesAutoresizingMaskIntoConstraints = false
        let safeArea = view.safeAreaLayoutGuide
        
        redBtn.centerXAnchor.constraint(equalTo: safeArea.centerXAnchor).isActive = true
        redBtn.centerYAnchor.constraint(equalTo: safeArea.centerYAnchor).isActive = true
        redBtn.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 160).isActive = true
        redBtn.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -160).isActive = true
        
        
        redBtn.addTarget(self, action: #selector(redBackBtn), for: .touchUpInside)
    }
    

    @objc func redBackBtn(_ button: UIButton) {
        self.presentingViewController?.dismiss(animated: true, completion: nil)
    }

}