[iOS - swift] Custom View (only code)

* custom view (xib) 참고: ios-development.tistory.com/391

 

만들 커스텀 뷰

custom view 생성 접근

• stored property를 사용하며 클로저를 통해 개별 컴포넌트의 속성과 translatesAutoresizingMaskIntoConstraints = false로 설정
• init(frame:)과 init(coder:)에서 각각 setupLayout()을 호출하여, 개별 컴포넌트들의 레이아웃 결정
  - xib를 이용하면 이부분에서 nib를 이용하여 view를 새로 생성하는 과정이 있지만 코드로만 할 경우 필요 x

custom view 생성

class SampleView: UIView {
    // component 속성 정의
    
    // init
    
    // setupLayout
}

• 개별 컴포넌트를 stored property와 클로저를 통해 정의
  - 개별 컴포넌트의 속성 정의
  - translateAutoresizingMaskIntoConstraints = false로 지정

class SampleView: UIView {
    let imageView: UIImageView = {
        let view = UIImageView()
        view.translateAutoresizingMaskIntroConstraints = false
        view.image = UIImage(systemName: "pencil")
        return view
    }()
    
    let descriptionLabel: UILabel = {
        let label = UILabel()
        label.translateAutoresizingMaskIntoConstraints = false
        label.text = "description"
        return label
    }()
   
}

• 초기화 구문 작성
  - init(frame:)
  - init(coder:)

class SampleView: UIView {
    // componet ... 

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayout()
    }
   
}

• 개별 컴포넌트 들의 setupLayout

class SampleView: UIView {
    // component
    
    // init
    
    func setupView() {
        backgroundColor = .orange
        addSubview(imageView)
        addSubview(descriptionLabel)
        
        NSLayoutConstraint.activate([
            imageView.widthAnchor.constraint(equalToConstaint: 24),
            imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor),
            imageView.leadingAnchor.constraint(equalTo: leadingAnchor, constraint: 12),
            imageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            descriptionLabel.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constraint: 12),
            descriptionLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constraint: -12),
            descriptionLabel.topAnchor.constraint(equalTo: topAnchor, constant: 16),
            descriptionLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16)
        ])
    }
}

custom view 사용

• 사용하려는 ViewController에 stored-property와 클로저를 이용하여 초기화

class ViewController: UIViewController {
    let sampleView: SampleView = {
        let view = SampleView()
        view.translateAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
    }
    
    private func setupView() {
        view.addSubview(sampleView)
        NSLayoutConstraint.activate([
            sampleView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 8),
            sampleView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 16),
            sampleView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -16)
        ])
    }
}