search

iOS-Children-Study / Growth-Study

성장로드맵 체크포인트 기반 스터디 레포입니다.
1 stars 0 forks source link

허규영_0524 #9

Open Naryuko opened 1 year ago

Naryuko commented 1 year ago

Auto Layout

스토리보드, xib

Human Interface Guideline

Naryuko commented 1 year ago

priority를 알고 있다

UILayoutPriority The layout priority is used to indicate to the constraint-based layout system which constraints are more important, allowing the system to make appropriate tradeoffs when satisfying the constraints of the system as a whole.

image

view.centerY = superView.centerY, view.top = superView.top + 100이라는 동시에 만족될 수 없는 constraint가 적용되어 있지만 view.centerY = superView.centerY의 priority가 더 높아 가운데 정렬이 되어 있다.


TMI

  1. constraint의 isActive를 통해 layout을 조정할 때에는 @IBOutlet으로 연결한 constraint는 weak로 선언하면 안됩니다. isActive = false가 되는 순간 strong reference가 없어져 nil이 됩니다.
image
  1. 여러 constraint를 생성해 놓은 다음 priority를 조정하는 것으로 view의 위치를 변경할 수도 있습니다. (단, 성능상으로는 좋지 않다고 알고 있습니다)

https://github.com/iOS-Children-Study/Growth-Study/assets/55742167/15587c85-18d9-433d-946f-1bb61592c846

Naryuko commented 1 year ago

ContentHuggingPriority와 ContentCompressionResistancePriority를 알고 있다.

image

intrinsicContentSize

The natural size for the receiving view, considering only properties of the view itself.

  Intrinsic Contet Size Width Intrinsic Contet Size Height
UIView X X
UISlider O X
UILabel, UIButton, UISwitch, UITextField O O
TextView, ImageView Content에 따라 변화함

ContentHuggingPriority

Returns the priority with which a view resists being made larger than its intrinsic size.

ContentCompressionResistancePriority

Returns the priority with which a view resists being made smaller than its intrinsic size.

image
Naryuko commented 1 year ago

StackView에 Auto Layout으로 구현된 CustomView를 추가할 수 있다.

image

Distribution

spacing

alignment

UIStackView에 오토레이아웃을 이용해 View 추가하는 방법

image

https://github.com/iOS-Children-Study/Growth-Study/assets/55742167/abe7bdcd-3e02-408d-8536-91c7b0f5f736

참고

Naryuko commented 1 year ago

스토리보드, xib를 이용해 UI를 설계, 구현할 수 있다.

Storyboard

let storyboard = UIStoryboard(name: storyboardName, bundle: Bundle)
let viewController = storyboard.instantiateViewController(identifier: storyboardID

XIB

File Owner의 Custom Class 사용

  1. 다음과 같이 File’s Owner에 Custom Class 적용
image
  1. Custom Class에서 xib 파일을 nib 형태로 불러오는 코드 작성
    • loadNibNamed 사용
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }

    func setup() {
        guard let nibFile = Bundle.main.loadNibNamed("CustomView", owner: self, options: nil) else { return }
        // custom class 이름이 xib 파일 이름과 같을 경우 다음과 같이도 사용 가능
        let name = String(describing: type(of: self))
        guard let nibFile = Bundle.main.loadNibNamed(name, owner: self, options: nil) else { return }

        guard let nibView = nibFile.first as? UIView else { return }

        nibView.frame = self.bounds
        nibView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.addSubview(nibView)
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }

    func setup() {
        let nibFile = UINib(nibName: "customView", bundle: Bundle.main)
        // custom class 이름이 xib 파일 이름과 같을 경우 다음과 같이도 사용 가능
        let name = String(describing: type(of: self))
        let nibFile = UINib(nibName: name, bundle: Bundle.main)

        guard let nibView = nibFile.instantiate(withOwner: self, options: nil).first as? UIView else { return }

        nibView.frame = self.bounds
        nibView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.addSubview(nibView)
    }

View의 Custom Class 사용

  1. 다음과 같이 xib파일의 view에 직접 custom class 적용
image
  1. view를 불러오고 싶은 곳에서 뷰를 불러오는 코드를 작성
        guard let nibFile = Bundle.main.loadNibNamed("customView", owner: self, options: nil) else { return }
        guard let nibView = nibFile.first as? CustomView else { return }
Naryuko commented 1 year ago

UI가 어느 시점에 로드되는지 알고 있다.

image

  1. View controller - init(coder:)

    • view controller를 초기화한다. 스토리보드를 이용하는 경우 nib파일에서 불려온다.

  2. View controller - awakeFromNib()

    • nib 파일에서 로드되어 초기화가 완료되었다는 것을 알려준다. 이 method가 불렸을 때 이 view controller와 관련된 Outlet, Action들이 모두 연결되었다는 것이 보장된다.

  3. View controller - willMove(toParentViewController:)

    • parent view controller가 child view controller를 추가할 때 child view controller에서 불리게 된다.

  4. View controller - loadView()

    • View를 로드하거나 만들어 View controller의 view 프로퍼티에 할당한다.
    • 스토리에보드에 view가 존재할 경우 nib파일로부터 로드하지만, 그렇지 않은 경우 plain한 view를 만들게 된다,
    • 스토리보드로 view를 만들 경우 이 메소드를 override하면 안 된다. 오직 새로운 view를 만들어 할당할 경우에만 override 가능하다.

  5. View - init(coder:)

    • view를 초기화한다.

  6. View - layerClass

    • view의 layer를 그리는 데 쓰이는 기본적인 CALayer 인스턴스를 반환한다.

  7. View - setNeedsDisplay()

  8. View - translatesAutoresizingMaskIntoConstraints

    • Auto resizing mask를 constraint로 변환한다.

  9. View -addConstraints(_:)

    • 여러 번 addConstraint(_:)를 호출해 view에 constraint를 추가한다.
    • constraint의 isActive = true일 경우 이 method와 결과가 같다.

  10. View - willMove(toSuperview:)

    • view에게 super view가 바뀐다는 것을 알려주는 method로, init(coder:)가 완료된 뒤 호출된다.
    • 기본적으로 super view가 바뀌는 것을 알려주는 역할만 수행하며, override할 경우 super view가 바뀔 때의 작업을 정의할 수 있다.

  11. View -didMoveToSuperview()

    • view의 superview 변경이 완료된 후 호출된다.

  12. View - awakeFromNib()

    • view가 nib파일로부터 로드/생성되었다는 의미이다.
    • outlet, action 연결이 모두 완료되었음을 보장한다.

  13. View controller - viewDidLoad()

    • view 로드가 모두 끝났다는 의미이다.
    • 커스텀 초기화 작업들을 이 곳에서 해 주면 된다.

  14. View controller - viewWillAppear()

    • view controller의 View가 곧 화면에 노출될 것임을 알려주는 것으로, 곧 view가 view hierarchy에 포함될 것이라는 뜻이다.
    • view가 보이기 전 view를 꾸밀 수 있는 마지막 지점이다.

  15. View - willMove(toWindow:)

    • view가 새로운 view hierarchy에 들어가게 되므로 VIew hierarchy의 Root에 해당하는 UIWindow가 바뀐다는 의미이다.
    • 기본적으로 window 객체가 바뀌는 것만을 알려주며 이 method를 Override하는 경우 window 객체가 바뀔 때 수행할 작업을 정의할 수 있다,.

  16. View - needsUpdateConstraints()

  17. View - didMoveToWindow()

    • window 객체 변경이 완료되었다고 알려주는 method이다.

  18. View - translatesAutoresizingMaskIntoConstraints

    • 여러 번 호출되며 constraints를 다시 update한다.

  19. View - updateConstraints()

  20. View -intrinsicContentSize

    • 고유 size를 return하여 view layout에 반영한다.

  21. View controller - updateViewConstraints()

    • view controller가 가지고 있는 View들의 constraint를 갱신한다.

  22. View controller - viewWillLayoutSubviews()

    • view controller의 view가 이제 subviews들을 배치(layout)하기 시작할 때 호출되는 method이다.

  23. View - layoutSubviews()

  24. View - alignmentRectInsets

    • 커스텀 뷰가 contents를 고려해 inset을 맞출 때 물어보는 것으로, frame만 고려하는 것이 아니라 view의 Contents를 기반으로 view의 정렬을 맞추게 된다.

  25. View controller - viewDidLayoutSubviews()

  26. View - draw(_:)

    • 전달된 CGRect 값으로 view를 그린다.

  27. View controller - viewDidAppear()

    • view가 화면에 나타난 이후 호출된다.

  28. View controller - didMove(toParentViewController:)

    • parent view controller에 자신(child view controller)가 더해졌다는 것을 의미한다.
    • view가 모두 구성되고 보여진 이후 parent view controller에 더해지는 것을 알 수 있다.

참고

Naryuko commented 1 year ago

2x, 3x 등의 해상도에 따른 이미지 지원과 벡터 이미지(PDF) 원리

비트맵 이미지 (png)

Platform Scale factors
iOS @2x and @3x
iPadOS @2x
macOS, tvOS @1x and @2x
watchOS @2x

Vector 이미지

image

TMI

Screen size Image scale
38mm 90%
40mm 100%
41mm 106%
42mm 100%
44mm 110%
45mm 119%
49mm 119%
Naryuko commented 1 year ago

색 공간의 이해(RGB, sRGB, P3, HSV 등)

TMI

UIGraphicsGetImageFromCurrentImageContext sRGB(default)
UIGraphicsImageRenderer Display P3(default), sRGB 
// 애플에서 정의한 format enum
extension UIGraphicsImageRendererFormat {
    @available(iOS 12.0, *)
    public enum Range : Int {
        case unspecified
        case automatic
        case extended // Display P3 항상 사용
        case standard // sRGB 항상 사용
    }
}

let format = UIGraphicsImageRendererFormat.default()
format.preferredRange = .automatic

// imageRenderer 생성시 색 공간을 설정한 format을 넘겨주어 sRGB color space 사용 가능
let imageRenderer = UIGraphicsImageRenderer(size: size, format: format)

참고