ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [UIKit] .xib μ‚¬μš©ν•˜κΈ°
    iOS/πŸ›  μ΄μŠˆμ™€ ꢁ금증 2022. 5. 30. 22:05

    μ•ˆλ…•ν•˜μ„Έμš” πŸ₯·πŸ»

    이번 μ‹œκ°„μ—λŠ” xib μ‚¬μš©λ²•μ„ μ •λ¦¬ν•˜λ €κ³  ν•©λ‹ˆλ‹€.

    μ˜ˆμ‹œκ°€ λ˜λŠ” 상황은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

     

    뢉은색 μ‚¬κ°ν˜•κ³Ό λ ˆμ΄λΈ”μ„ μ„œλΈŒλ·°λ‘œ κ°–λŠ” μ»€μŠ€ν…€ λ·°

     

     

    뢉은 색 μ‚¬κ°ν˜•μ˜ UIView 와 "RED" λΌλŠ” UILabel 을 μ„œλΈŒλ·°λ‘œ κ°€μ§€λŠ”

    UIView λ₯Ό μž¬μ‚¬μš©ν•˜κΈ° μœ„ν•΄ RedView.xib 와 RedView.swift νŒŒμΌμ„ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.

     

    이 xib λ₯Ό λ‹€λ₯Έ κ³³μ—μ„œ μ‚¬μš©ν•˜κ³  μ‹Άλ‹€λ©΄?

    크게 두가지 방법이 μžˆμŠ΅λ‹ˆλ‹€.

    1. xib 파일의 File's Owner 에 μ»€μŠ€ν…€ 클래슀λ₯Ό λ“±λ‘ν•˜μ—¬ μ‚¬μš©ν•˜κΈ°

    2. xib 파일의 뷰에 μ»€μŠ€ν…€ 클래슀 λ₯Ό λ“±λ‘ν•˜μ—¬ μ‚¬μš©ν•˜κΈ°

     

    방법 1.  File's Owner μ— μ»€μŠ€ν…€ 클래슀λ₯Ό λ“±λ‘ν•˜μ—¬ μ‚¬μš©ν•˜κΈ°

    1. xib 파일의 File's Owner 에 μ»€μŠ€ν…€ 클래슀λ₯Ό λ“±λ‘ν•©λ‹ˆλ‹€.

     

    2. xib λ₯Ό μ‚¬μš©ν•  μŠ€ν† λ¦¬λ³΄λ“œμ— UIView λ₯Ό μ›ν•˜λŠ” 곳에 λ°°μΉ˜ν•˜κ³ , Custom Class λ₯Ό RedView 둜 μ§€μ •ν•΄μ€λ‹ˆλ‹€.

    autolayout 은 μ˜λ„μ— 따라 μ„€μ •ν•˜λ©΄ λ©λ‹ˆλ‹€.

    μ €λŠ” RedView λ‚΄λΆ€μ—μ„œ 크기 μ œμ•½μ„ μž‘μ•„μ£ΌκΈ° λ•Œλ¬Έμ—

    μΈν„°νŽ˜μ΄μŠ€ λΉŒλ”μ—μ„œ μ €λ ‡κ²Œ λΉ¨κ°„μƒ‰μœΌλ‘œ λ‚˜μ™€λ„ λŸ°νƒ€μž„μ—μ„œλŠ” λ¬Έμ œκ°€ μ—†μŠ΅λ‹ˆλ‹€.

        private func setUpSubviews() {
         ...
         // Autolayout 을 λ”°λ‘œ μž‘μ•„μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.
            
         redView.translatesAutoresizingMaskIntoConstraints = false
            
         redView.leadingAnchor.constraint(equalTo: redView.superview!.leadingAnchor).isActive = true
         redView.trailingAnchor.constraint(equalTo: redView.superview!.trailingAnchor).isActive = true
         redView.topAnchor.constraint(equalTo: redView.superview!.topAnchor).isActive = true
         redView.bottomAnchor.constraint(equalTo: redView.superview!.bottomAnchor).isActive = true
        }

     

    3. ν•΄λ‹Ή μŠ€ν† λ¦¬λ³΄λ“œμ˜ VC κ°€ 화면에 λ“±μž₯ν•˜κΈ° 직전에, UIKit 은 RedView 의 init(coder:) λ₯Ό ν˜ΈμΆœν•©λ‹ˆλ‹€.

    λ§Œμ•½ μŠ€ν† λ¦¬λ³΄λ“œλ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³  μ½”λ“œλ‘œ UIλ₯Ό μƒμ„±ν•˜λŠ” 방식을 μ‚¬μš©ν•œλ‹€λ©΄ init(frame:) 을 μ•„λž˜μ™€ 같이 μ»€μŠ€ν…€ν•˜λ©΄ λ©λ‹ˆλ‹€.

     

    μš°λ¦¬λŠ” 이 init(coder:) λ₯Ό μ»€μŠ€ν…€ν•  κ²ƒμž…λ‹ˆλ‹€.

    ꡬ체적으둜, 이 init(coder:) μ—μ„œ xib 에 μ•„μΉ΄μ΄λΈŒλœ λ·° 계측을 λΆˆλŸ¬μ™€μ„œ RedView 에 λ„£μ–΄μ€λ‹ˆλ‹€.

    μ•„μΉ΄μ΄λΈŒλœ λ·° 계측

    이 λ•Œ, nib 을 λΆˆλŸ¬μ˜€λŠ” 두 가지 api κ°€ μžˆμŠ΅λ‹ˆλ‹€.

    1. UINib 을 μ‚¬μš©ν•œλ‹€.

    UINib 을 μ‚¬μš©ν•˜λŠ” 방법

    2. Bundle.main.loadnib(_:owner:options:) 을 μ‚¬μš©ν•©λ‹ˆλ‹€.

    Bundle.main.loadNibNamed λ₯Ό μ‚¬μš©ν•˜λŠ” 방법

     

    이 λ•Œ redView λ₯Ό λ°”μΈλ”©ν•˜λŠ” μ½”λ“œμ—μ„œ as? UIView λ₯Ό ν•΄μ•Ό μ •μƒμ μœΌλ‘œ μΊμŠ€νŒ…μ΄ λ©λ‹ˆλ‹€.

    xib μ—μ„œ 뷰에 μ»€μŠ€ν…€ 클래슀λ₯Ό λ”°λ‘œ 지정해주지 μ•Šμ•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

    즉 as? RedView λŠ” μΊμŠ€νŒ…μ— μ‹€νŒ¨ν•©λ‹ˆλ‹€.

     

    λ˜ν•œ, xib 에 1개 μ΄μƒμ˜ View λ₯Ό λ„£μ–΄λ΄€λ‹€λ©΄ nib.first 와 같은 접근은 μˆ˜μ •λ˜μ–΄μ•Όν•©λ‹ˆλ‹€.

    μœ„μ˜ 두 API 은 λͺ¨λ‘ 배열을 λ¦¬ν„΄ν•œλ‹€λŠ” 것을 λ¦¬λ§ˆμΈλ“œν•΄μ•Όν•©λ‹ˆλ‹€.

    ν•œκ°œμ˜ xib 에 μ •μ˜λœ 3개의 View

     

    3. κ²°κ³Ό

    μ›ν•˜λŠ”λŒ€λ‘œ 잘 κ·Έλ €μ‘ŒμŠ΅λ‹ˆλ‹€.

    μœ„μ—μ„œ μž‘μ„±ν•œ μ½”λ“œλ₯Ό ν™œμš©ν•˜μ—¬ 이제 λ‹€μ–‘ν•œ κ³³μ—μ„œ μž¬μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.


     

    방법 2: 뷰에 μ»€μŠ€ν…€ 클래슀 λ₯Ό λ“±λ‘ν•˜μ—¬ μ‚¬μš©ν•˜κΈ°

     

    1. 뷰에 직접 μ»€μŠ€ν…€ 클래슀λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.

     

    2. VC ν˜Ήμ€ μ›ν•˜λŠ” κ³³, μ›ν•˜λŠ” μ‹œμ μ— 직접 μƒμ„±ν•˜μ—¬ λ„£μ–΄μ€λ‹ˆλ‹€.

    이 λ•Œ, 1 μ—μ„œ μ»€μŠ€ν…€ 클래슀λ₯Ό RedView 둜 μ„€μ •ν•˜μ˜€κΈ° λ•Œλ¬Έμ— as? RedView 둜 λ°”λ‘œ μΊμŠ€νŒ…μ΄ κ°€λŠ₯ν•©λ‹ˆλ‹€.

        override func viewDidLoad() {
            super.viewDidLoad()
            
            let nib = UINib(nibName: "RedView", bundle: .main)
                
            guard let redView = nib.instantiate(withOwner: self).first as? RedView else { return }
            
            view.addSubview(redView)
            
     	redView.translatesAutoresizingMaskIntoConstraints = false
            
          redView.leadingAnchor.constraint(equalTo: redView.superview!.leadingAnchor).isActive = true
          redView.trailingAnchor.constraint(equalTo: redView.superview!.trailingAnchor).isActive = true
          redView.topAnchor.constraint(equalTo: redView.superview!.topAnchor).isActive = true
          redView.bottomAnchor.constraint(equalTo: redView.superview!.bottomAnchor).isActive = true

     

    3. κ²°κ³Ό

    Autolayout 은 같은 μ½”λ“œλ₯Ό μ‚¬μš©ν•˜μ˜€λŠ”λ° μ™œ κ²°κ³ΌλŠ” 방법 1κ³Ό λ‹€λ₯ΌκΉŒμš”?

    λ·° κ³„μΈ΅μ˜ 차이가 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

    방법 1 을 μ‚¬μš©ν•˜λ©΄ xib 에 μ •μ˜λœ λ·° 계측에 UIView κ°€ ν•œλ²ˆ 더 μœ„μ— λž˜ν•‘λœ ꡬ쑰가 λ©λ‹ˆλ‹€.

    방법 2λŠ”  xib 에 μ •μ˜λœ λ·° 계측 κ·ΈλŒ€λ‘œλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.


    μ˜€λŠ˜λ„ λ‚˜λŠ” μ„±μž₯ν–ˆλ‹€!!πŸ”₯

     

    πŸ€– [Back to the Basics] πŸ’»
    μ£Όλ‹ˆμ–΄ iOS 개발자 우짱의 기술 λΈ”λ‘œκ·Έμž…λ‹ˆλ‹€.

     

    [μ°Έκ³  자료 πŸ™‡πŸ»‍♂️]

    https://medium.com/a-day-of-a-programmer/xibλ₯Ό-μ‚¬μš©ν•œ-uiview-custom-μ œλŒ€λ‘œ-μ΄ν•΄ν•˜κΈ°-348a9b789496

    https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/LoadingResources/Introduction/Introduction.html

    λŒ“κΈ€

μ–΄μ œλ³΄λ‹€ λ°œμ „ν•œ λ‚˜