//
// WorkbookViewController.swift
// AutoLayout-Study
//
// Created by Kyungsoo Lee on 10/19/23.
//
import UIKit
import SwiftUI
class WorkbookViewController: UIViewController {
// MARK: - Properties
private lazy var redView: UIView = {
let view = UIView()
view.backgroundColor = .red
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var blueView: UIView = {
let view = UIView()
view.backgroundColor = .blue
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var yellowView: UIView = {
let view = UIView()
view.backgroundColor = .yellow
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var greenView: UIView = {
let view = UIView()
view.backgroundColor = .green
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var blackView: UIView = {
let view = UIView()
view.backgroundColor = .black
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
// MARK: - UI Components
// MARK: - Life cycle
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setupUI()
}
// MARK: - Set up
private func setupUI() {
self.view.addSubview(self.redView)
self.view.addSubview(self.blueView)
self.view.addSubview(self.yellowView)
self.view.addSubview(self.greenView)
self.view.addSubview(self.blackView)
setRedViewLayout()
setBlueViewLayout()
setYellowViewLayout()
setGreenViewLayout()
setBlackViewLayout()
}
private func setRedViewLayout() {
let redViewConstraint = [
self.redView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 10),
self.redView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor, constant: 10)
]
NSLayoutConstraint.activate(redViewConstraint)
}
private func setBlueViewLayout() {
let blueViewConstraint = [
self.blueView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 10),
self.blueView.leadingAnchor.constraint(equalTo: self.redView.trailingAnchor, constant: 10),
self.blueView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -10),
self.blueView.widthAnchor.constraint(equalTo: self.redView.widthAnchor)
]
NSLayoutConstraint.activate(blueViewConstraint)
}
private func setYellowViewLayout() {
let yellowViewConstraint = [
self.yellowView.topAnchor.constraint(equalTo: self.redView.bottomAnchor, constant: 10),
self.yellowView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor, constant: 10),
self.yellowView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: 10),
self.yellowView.heightAnchor.constraint(equalTo: self.redView.heightAnchor)
]
NSLayoutConstraint.activate(yellowViewConstraint)
}
private func setGreenViewLayout() {
let greenViewConstraint = [
self.greenView.topAnchor.constraint(equalTo: self.blueView.bottomAnchor, constant: 10),
self.greenView.leadingAnchor.constraint(equalTo: self.yellowView.trailingAnchor, constant: 10),
self.greenView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -10),
self.greenView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: 10),
self.greenView.widthAnchor.constraint(equalTo: self.redView.widthAnchor),
self.greenView.heightAnchor.constraint(equalTo: self.blueView.heightAnchor) ]
NSLayoutConstraint.activate(greenViewConstraint)
}
private func setBlackViewLayout() {
let blackViewConstraint = [
self.blackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
self.blackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
self.blackView.heightAnchor.constraint(equalTo: self.redView.heightAnchor),
self.blackView.widthAnchor.constraint(equalTo: self.redView.widthAnchor)
]
NSLayoutConstraint.activate(blackViewConstraint)
}
// MARK: - Button Events
// MARK: - Navigation
// MARK: - Network Manager calls
// MARK: - Extensions
}
@available(iOS 13.0.0, *)
struct WorkbookViewControllerPreview: PreviewProvider {
static var previews: some View {
WorkbookViewController().toPreview()
}
}
아래와 같은 뷰를 구성해보세요.
CollectionView / StackView / TableView 등.. 다양한 뷰를 사용하여 만들어보시는 것 추천드립니다!
프레임만 비슷하게 구성해도 괜찮아요~ 디테일한 부분은 나중에 잡아가도록 합시다!..
[과제 1]
[과제 2]
디테일한 부분까지 모두 구현하고 싶은 분들은 아래 Extension을 사용해보세요~
//
// UIImage+Extension.swift
// AutoLayout-Study
//
// Created by Kyungsoo Lee on 10/19/23.
//
import UIKit
extension UIImage {
// UIButton에 UIImage를 넣을 때, 이미지의 크기를 조정하는 함수
func resizeImage(image: UIImage, toSize size: CGSize) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
image.draw(in: CGRect(origin: CGPoint.zero, size: size))
let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return resizedImage
}
// UIImage의 cornerRadius를 설정할 수 있도록 해주는 함수
func setCornerRadius(with radius: CGFloat) -> UIImage {
let format = UIGraphicsImageRendererFormat()
format.scale = scale
let renderer = UIGraphicsImageRenderer(size: size, format: format)
return renderer.image { rendererContext in
let rect = CGRect(origin: .zero, size: size)
let path = UIBezierPath(roundedRect: rect,
byRoundingCorners: .allCorners,
cornerRadii: CGSize(width: radius, height: radius))
path.close()
let cgContext = rendererContext.cgContext
cgContext.saveGState()
path.addClip()
draw(in: rect)
cgContext.restoreGState()
}
}
}
<aside> 👾 리버의 예제코드 : https://github.com/UMC-iOS-5th/UIKit-Study/tree/Liver/Week 5/Liver/AutoLayout-Study
</aside>
<aside> 🔥 <Auto Layout 참고자료>
</aside>