iOS
XIB 파일의 사용자 정의 UIView

비고

배선 요소

XIB 파일 만들기

Xcode 메뉴 모음> 파일> 새로 만들기> 파일.
iOS, 사용자 인터페이스를 선택한 다음 "보기"를 선택하십시오.

XIB에 이름을 지정하십시오 (예, 우리는 포켓몬 예제 doing를하고 있습니다).
타겟을 확인 하고 "만들기"를 누르 십시오 .

보기 디자인하기

일을 더 쉽게하려면 다음을 설정하십시오.

• 크기 : 자유형
• 상태 표시 줄 : 없음
• 톱 바 : 없음
• 하단 바 : 없음

Size Inspector를 클릭하고 뷰의 크기를 조정하십시오.
이 예제에서는 너비가 321이고 높이가 256입니다.

아래에 표시된 것처럼 XIB 파일에 일부 요소를 놓습니다.
여기에서는 이미지보기 (256x256)와 스위치를 추가 할 것입니다.

"자동 레이아웃 문제 해결"(오른쪽 하단)을 클릭하고 "모든보기"에서 "누락 된 제약 조건 추가"를 선택하여 자동 레이아웃 제약 조건을 추가하십시오.

"Assistant Editor보기"(오른쪽 위)를 클릭하고 "미리보기"를 클릭하여 변경 사항을 미리 봅니다.
"더하기"버튼을 클릭하여 iPhone 화면을 추가 할 수 있습니다.
미리보기는 다음과 같습니다.

UIView의 서브 클래스

XIB 파일을 관리 할 클래스를 만듭니다.
Xcode 메뉴 모음> 파일> 새로 만들기> 파일.
iOS / Source / Cocoa Touch Class를 선택하십시오. "다음"을 누르십시오.

클래스에 XIB 파일 (Pokemon)과 이름이 같은 이름을 지정하십시오.
하위 클래스 유형으로 UIView를 선택한 다음 "다음"을 누르십시오.

다음 창에서 대상을 선택하고 "만들기"를 누르십시오.

"File 's Owner"속성을 통해 Pokemon.xib를 Pokemon.swift에 연결하십시오.

Xcode에서 Pokemon.xib 파일을 클릭하십시오.
"파일 소유자"콘센트를 클릭하십시오.
"Identity inspector"(오른쪽 위)에서 클래스를 최근 생성 된 Pokemon.swift 파일로 설정하십시오.

POKEMONS !!!

예! 일부 Pokemons를 프로젝트에 드래그 앤 드롭하여 "인프라"를 마무리하십시오.
여기에서는 두 개의 PGN 파일 인 256x256을 투명하게 추가합니다.

이미 코드를 보여주세요.

알았어, 알았어.
Pokemon.swift 클래스에 코드를 추가 할 차례입니다.

실제로는 매우 간단합니다.

1. 필요한 초기화 프로그램 구현
2. XIB 파일로드
3. XIB 파일을 표시 할보기 구성
4. 위의보기 표시

Pokemon.swift 클래스에 다음 코드를 추가합니다.

import UIKit

class Pokemon: UIView {
    
    // MARK: - Initializers
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    // MARK: - Private Helper Methods
    
    // Performs the initial setup.
    private func setupView() {
        let view = viewFromNibForClass()
        view.frame = bounds

        // Auto-layout stuff.
        view.autoresizingMask = [
            UIViewAutoresizing.flexibleWidth,
            UIViewAutoresizing.flexibleHeight
        ]

        // Show the view.
        addSubview(view)
    }
    
    // Loads a XIB file into a view and returns this view.
    private func viewFromNibForClass() -> UIView {
        
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        /* Usage for swift < 3.x
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        */

        return view
    }
}

@IBDesignable 및 @IBInspectable

클래스에 @IBDesignable 을 추가하면 인터페이스 작성기에서 @IBDesignable 을 라이브 렌더링 할 수 있습니다.
클래스의 속성에 @IBInspectable 을 추가하면 해당 속성을 수정하자마자 Interface Builder에서 사용자 정의보기가 변경되는 것을 볼 수 있습니다.

우리의 커스텀 뷰의 Image View 를 "Inspectable"로 만들어 봅시다.

먼저 Pokemon.xib 파일의 Image View 를 Pokemon.swift 클래스에 연결합니다.

outlet imageView 호출하고 다음 코드를 추가합니다 (클래스 이름 앞에 @IBDesignable ).

@IBDesignable class Pokemon: UIView {
    
    // MARK: - Properties
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBInspectable var image: UIImage? {
        get {
            return imageView.image
        }
        set(image) {
            imageView.image = image
        }
    }

    // MARK: - Initializers
    ...

사용자 정의보기 사용

메인 스토리 보드 파일에 UIView를 드래그하십시오.
보기 크기를 200x200로 조정하십시오. 중앙 집중화.
Identity inspector (오른쪽 위)로 가서 Class to Pokemon을 설정하십시오.

포켓몬을 선택하려면, 속성 검사기 (오른쪽 위)로 가서 멋진 @IBInspectable 이미지 속성을 사용하여 이전에 추가 한 포켓몬 이미지 중 하나를 선택하십시오.

이제 사용자 정의 포켓몬보기를 복제하십시오.
크기를 150x150으로 지정하십시오.
다른 포켓몬 이미지를 선택하십시오.

이제 우리는 자체 포함하는 사용자 정의 UI 요소에 더 많은 로직을 추가 할 것입니다.
이 버튼을 통해 포켓몬을 활성화 / 비활성화 할 수 있습니다.

[전환] 단추에서 Pokemon.swift 클래스로 IBAction 을 만듭니다.
switchTapped 와 같은 액션을 호출하십시오.
다음 코드를 추가하십시오.

// MARK: - Actions

@IBAction func switchTapped(sender: UISwitch) {
    imageView.alpha = sender.on ? 1.0 : 0.2
}

// MARK: - Initializers
...

최종 결과:

너 끝났어!
이제 복잡한 사용자 정의보기를 만들어 원하는 곳 어디에서나 재사용 할 수 있습니다.
이렇게하면 코드가 독립적 인 UI 요소로 분리되는 동시에 생산성이 향상됩니다.

최종 프로젝트는 Github에서 복제 할 수 있습니다.
( Swift 3.1로 업데이트 됨 )

XIB를 사용하여 사용자 지정 재사용 가능한 UIView를 만드는 방법

다음 예제에서는 XIB에서 뷰를 초기화하는 단계를 보여줍니다.

이는 복잡한 작업이 아니지만 예외를 피하면서 처음부터 올바르게 수행하기 위해 정확한 단계를 따라야합니다.

loadNibNamed는 어떻게 작동합니까?

주요 단계는 다음과 같습니다.

1. XIB 생성
2. 클래스 .h 및 .m을 만듭니다.
3. .h에 아울렛 정의
4. .h와 XIB 사이에 콘센트 연결

첨부 된 스크린 샷보기 :

5. .m 파일의 initWithCoder 함수 내에서 loadNibNamed를 호출하십시오. 이것은 UIView 객체를 스토리 보드 / 부모 UIView XIB 파일에 직접 배치하고 사용자 정의보기로 정의 할 수 있도록하기 위해 필요합니다. 스토리 보드 / 상위 XIB를로드 한 후에는 다른 초기화 코드가 필요하지 않습니다. 사용자 정의보기는 XCode에 제공된 다른 기본 제공 Objective C보기 오브젝트처럼 다른보기에 추가 될 수 있습니다.