[iOS - swift] Custom View (xib)

.xib파일과 .swift파일 생성

MyView.xib

//
//  MyView.swift
//  TestSwfit
//
//  Created by 김종권 on 2020/11/01.
//  Copyright © 2020 jongkwon kim. All rights reserved.
//

import Foundation
import UIKit

@IBDesignable
class MyView: UIView {

}

.xib파일에서 UI기본 설정

(초기화면)

• FIle's Owner에 클래스 정의

• Safe Area 체크 해제

• Size를 Freeform으로 설정

• 드래그하여 크기 조절 후 디자인 커스텀 (하단의 검은색 bar는 다른 파일 클릭한 다음 다시 이 파일 클릭하면 사라짐)

MyView.swift 코드 작성

• xib, nib 파일 개념 참고: ios-development.tistory.com/311

//
//  MyView.swift
//  TestSwfit
//
//  Created by 김종권 on 2020/11/01.
//  Copyright © 2020 jongkwon kim. All rights reserved.
//

import Foundation
import UIKit

@IBDesignable
class MyView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        xibSetup()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        // xibSetup() // 하면 storyboard에서 실시간(컴파일타임)에 inspector창에서 변경해도 확인 불가
    }

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

    func xibSetup() {
        guard let view = loadViewFromNib(nib: "MyView") else {
            return
        }
        view.frame = bounds
        view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(view)
    }

    func loadViewFromNib(nib: String) -> UIView? {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: nib, bundle: bundle)
        return nib.instantiate(withOwner: self, options: nil).first as? UIView
    }
}

• 결과 (.storyboard에서 UIView를 배치한 후 class설정 하면 완료)

custom view - @IBOutlet 커스텀 다루는 방법

• View안에 시간정보가 있는 커스텀 뷰 만들기
• nib 객체를 통해 UIView를 얻은 후 이 객체에 대해 @IBOutlet 적용 -> 현재 View에 가득 채우면 완성

@IBDesignable
class MainView: UIView {
    @IBOutlet weak var lblRemainMinute: UILabel!
    
    @IBInspectable
    var remainTime: String = "남은시간 5분" {
        didSet {
            lblRemainMibute.text = remainTime
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadViewFromNib()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadViewFromNib()
    }
    
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
    }
    
    func loadViewFromNib() {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: RemainMinuteView.className, bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView
        view.frame = bounds
        view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.layer.cornerRadius = view.bounds.height / 2
        view.clipsToBounds = true
        self.addSubview(view)
        self.view.backgroundColor = .clear
    }
    
}

// commonExtension
extension NSObject {
   var className: String {
       return String(describing: type(of: self))
   }
}

* 사용 시 주의사항:

- 적절한 anchor를 사용해야 동적으로 변하는 뷰 구현 가능 (아래 링크 참고)
- width, height에 관한 constraint를 주지 않고 intrinsic size로 사용하여 내부 내용에 따라 동적으로 크기가 변할 수도록 사용 

(ios-development.tistory.com/391)