[TIL] 2024. 06. 24

2024. 6. 24. 15:11·TIL (Today I Learned)

1-6. 코드베이스 UI

(a) 코드 베이스 UI

  1. 스토리보드 vs 코드베이스
    • 코드베이스: 스토리보드 없이 코드로만 UI 구성.
    • 장점: 코드 리뷰 시 가독성 향상.
    • 단점: 실행해서 확인해야 함.
  2. 스토리보드 삭제
    1. Main.storyboard 삭제.
    2. Info.plist에서 Storyboard Name 항목 삭제.
    3. Build Settings에서 UIKit Main Storyboard File Base Name 항목 삭제.
    4. SceneDelegate.swift에서 루트 뷰 설정:
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?
    
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = ViewController()
        window.makeKeyAndVisible()
        self.window = window
    }
}
  1. NSLayoutConstraint
    • Constraint를 사용하여 뷰의 레이아웃을 정의.
    • NSLayoutConstraint.activate([제약조건들])로 제약조건 활성화.

(b) UIKit 코드 베이스 예제

  1. UILabel
import UIKit

class ViewController: UIViewController {
    
    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }

    private func configureUI() {
        view.backgroundColor = .white
        label.text = "안녕하세요"
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.widthAnchor.constraint(equalToConstant: 80),
            label.heightAnchor.constraint(equalToConstant: 40),
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
 }
  1. UIButton
import UIKit

class ViewController: UIViewController {
    
    let button = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }

    private func configureUI() {
        view.backgroundColor = .white
        button.setTitle("Click", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .red
        button.translatesAutoresizingMaskIntoConstraints = false
        button.layer.cornerRadius = 10
        
        view.addSubview(button)
        NSLayoutConstraint.activate([
            button.widthAnchor.constraint(equalToConstant: 120),
            button.heightAnchor.constraint(equalToConstant: 60),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
 }
  1. UIImageView
import UIKit

class ViewController: UIViewController {
    
    let imageView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.backgroundColor = .white
        imageView.image = UIImage(named: "cat")
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(imageView)
        NSLayoutConstraint.activate([
            imageView.widthAnchor.constraint(equalToConstant: 300),
            imageView.heightAnchor.constraint(equalToConstant: 300),
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

(c) SnapKit

  1. SnapKit
    • 코드베이스 UI 작성을 간결하게 도와주는 서드파티 라이브러리.
    • Swift Package Manager를 사용해 프로젝트에 추가 가능.
  2. UILabel with SnapKit
import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.backgroundColor = .white
        label.text = "안녕하세요"
        label.textColor = .black
        
        view.addSubview(label)
        label.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.height.equalTo(40)
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
    }
}
  1. UIButton with SnapKit
import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let button = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }

    private func configureUI() {
        view.backgroundColor = .white
        button.setTitle("Click", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .red
        button.layer.cornerRadius = 10
        button.addTarget(self, action: #selector(buttonClicked), for: .touchDown)
        
        view.addSubview(button)
        button.snp.makeConstraints {
            $0.width.equalTo(120)
            $0.height.equalTo(60)
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
    }
    
    @objc 
    private func buttonClicked() {
        print("버튼이 클릭되었음.")
    }
}
  1. UIImageView with SnapKit
import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let imageView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.backgroundColor = .white
        imageView.image = UIImage(named: "cat")
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFit
        
        view.addSubview(imageView)
        
        imageView.snp.makeConstraints {
            $0.width.equalTo(300)
            $0.height.equalTo(300)
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
    }
}
  1. 응용 예제
    • UIImageView와 UILabel 배치 : 
import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let imageView = UIImageView()
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.backgroundColor = .white
        imageView.image = UIImage(named: "cat")
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFit
        label.text = "고양이"
        label.textColor = .black
        label.font = UIFont.boldSystemFont(ofSize: 30)
        
        [imageView, label]
            .forEach { view.addSubview($0) }
        
        imageView.snp.makeConstraints {
            $0.width.equalTo(300)
            $0.height.equalTo(300)
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
        
        label.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(imageView.snp.bottom).offset(16)
        }
    }
}
  • 복합 UI 구성 : 
import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let imageView = UIImageView()
    let imageView2 = UIImageView()
    let label = UILabel()
    let label2 = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.backgroundColor = .white
        imageView.image = UIImage(named: "cat")
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFit
        label.text = "고양이"
        label.textColor = .black
        label.font = UIFont.boldSystemFont(ofSize: 30)
        imageView2.image = UIImage(named: "dog")
        imageView2.backgroundColor = .black
        imageView2.contentMode = .scaleAspectFit
        label2.text = "강아지"
        label2.textColor = .black
        label2.font = UIFont.boldSystemFont(ofSize: 30)
        
        [imageView, label, imageView2, label2]
            .forEach { view.addSubview($0) }
        
        imageView.snp.makeConstraints {
            $0.width.equalTo(160)
            $0.height.equalTo(160)
            $0.leading.equalToSuperview().inset(16)
            $0.centerY.equalToSuperview()
        }
        
        label.snp.makeConstraints {
            $0.centerX.equalTo(imageView.snp.centerX)
            $0.top.equalTo(imageView.snp.bottom).offset(16)
        }
        
        imageView2.snp.makeConstraints {
            $0.width.equalTo(160)
            $0.height.equalTo(160)
            $0.trailing.equalToSuperview().inset(16)
            $0.centerY.equalToSuperview()
        }
        
        label2.snp.makeConstraints {
            $0.centerX.equalTo(imageView2.snp.centerX)
            $0.top.equalTo(imageView2.snp.bottom).offset(16)
        }
    }
}
  1. UI 디버깅 팁
    • 런타임 중 뷰 계층구조를 파악하여 디버깅 가능.
반응형

'TIL (Today I Learned)' 카테고리의 다른 글

[TIL] 2024. 06. 26  (0) 2024.06.26
[TIL] 2024. 06. 25  (0) 2024.06.25
[TIL] 2024. 06. 21  (0) 2024.06.21
[TIL] 2024. 06. 20  (0) 2024.06.20
[TIL] 2024. 06. 19  (0) 2024.06.19
'TIL (Today I Learned)' 카테고리의 다른 글
  • [TIL] 2024. 06. 26
  • [TIL] 2024. 06. 25
  • [TIL] 2024. 06. 21
  • [TIL] 2024. 06. 20
DongDong_
DongDong_
  • DongDong_
    how-dev
    DongDong_
  • 전체
    오늘
    어제
    • 분류 전체보기 (102)
      • TIL (Today I Learned) (96)
      • DEV (0)
        • 알고리즘 (0)
        • SWIFT (0)
      • 사전캠프 데일리 미션 (5)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글작성
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
DongDong_
[TIL] 2024. 06. 24
상단으로

티스토리툴바