xib로 재사용 가능한 UIView 만들기 (및 스토리 보드에서로드)

xib로 재사용 가능한 UIView 만들기 (및 스토리 보드에서로드)

---

좋아, 이것에 대해 StackOverflow에 수십 개의 게시물이 있지만 솔루션에 대해서는 특별히 명확하지 않습니다. UIViewxib 파일과 함께 사용자 지정을 만들고 싶습니다 . 요구 사항은 다음과 같습니다.

• 별도 없음 UIViewController– 완전히 독립적 인 수업
• 뷰의 속성을 설정 / 가져올 수 있도록 클래스의 콘센트

이 작업에 대한 현재 접근 방식은 다음과 같습니다.

1. 우세하다 -(id)initWithFrame:

   -(id)initWithFrame:(CGRect)frame {
       self = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class])
                                             owner:self
                                           options:nil] objectAtIndex:0];
       self.frame = frame;
       return self;
   }
   

2. -(id)initWithFrame:내 뷰 컨트롤러에서 프로그래밍 방식으로 인스턴스화

   MyCustomView *myCustomView = [[MyCustomView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
   [self.view insertSubview:myCustomView atIndex:0];
   

이것은 잘 작동합니다 (불러 오지 않고 [super init]로드 된 펜촉의 내용을 사용하여 단순히 객체를 설정하는 것은 약간 의심스러워 보입니다. 이 경우 에도 잘 작동 하는 하위 뷰 를 추가 하라는 조언이 여기에 있습니다 ). 그러나 스토리 보드에서도 뷰를 인스턴스화 할 수 있기를 원합니다. 따라서 다음을 수행 할 수 있습니다.

1. 배치 UIView스토리 보드에서 부모 뷰
2. 사용자 정의 클래스를 다음으로 설정하십시오. MyCustomView

3. 재정의 -(id)initWithCoder:– 가장 자주 본 코드는 다음과 같은 패턴에 적합합니다.

   -(id)initWithCoder:(NSCoder *)aDecoder {
       self = [super initWithCoder:aDecoder];
       if (self) {
           [self initializeSubviews];
       }
       return self;
   }
   
   -(id)initWithFrame:(CGRect)frame {
       self = [super initWithFrame:frame];
       if (self) {
           [self initializeSubviews];
       }
       return self;
   }
   
   -(void)initializeSubviews {
       typeof(view) view = [[[NSBundle mainBundle]
                            loadNibNamed:NSStringFromClass([self class])
                                   owner:self
                                 options:nil] objectAtIndex:0];
       [self addSubview:view];
   }
   

물론 위의 접근 방식을 사용하든 프로그래밍 방식으로 인스턴스화하든 파일에서 펜촉을 -(id)initWithCoder:입력 -(void)initializeSubviews하고로드 할 때 모두 재귀 적으로 호출되므로 이것은 작동하지 않습니다 .

여기 , 여기 , 여기 및 여기 와 같은 몇 가지 다른 SO 질문이 이에 대해 다룹니다 . 그러나 주어진 답변 중 어느 것도 문제를 만족스럽게 해결하지 못합니다.

• 일반적인 제안은 UIViewController에 전체 클래스를 포함하고 거기에서 nib로드를 수행하는 것 같지만 래퍼처럼 다른 파일을 추가해야하므로 나에게 차선책으로 보입니다.

누구든지이 문제를 해결하는 방법에 대한 조언을 제공 UIView하고 최소한의 번거 로움 / 얇은 컨트롤러 래퍼없이 사용자 지정 작업 콘센트를 얻을 수 있습니까? 아니면 최소한의 상용구 코드로 작업을 수행하는 대안적이고 깨끗한 방법이 있습니까?

---

귀하의 문제는 loadNibNamed:(의 자손)에서 전화 하고 initWithCoder:있습니다. loadNibNamed:내부적으로 initWithCoder:. 스토리 보드 코더를 재정의하고 항상 xib 구현을로드하려면 다음 기술을 제안합니다. 뷰 클래스에 속성을 추가하고 xib 파일에서 미리 정의 된 값 (사용자 정의 런타임 속성에서)으로 설정합니다. 이제 호출 후 [super initWithCoder:aDecoder];속성 값을 확인하십시오. 미리 결정된 값이면을 호출하지 마십시오 [self initializeSubviews];.

따라서 다음과 같습니다.

-(instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];

    if (self && self._xibProperty != 666)
    {
        //We are in the storyboard code path. Initialize from the xib.
        self = [self initializeSubviews];

        //Here, you can load properties that you wish to expose to the user to set in a storyboard; e.g.:
        //self.backgroundColor = [aDecoder decodeObjectOfClass:[UIColor class] forKey:@"backgroundColor"];
    }

    return self;
}

-(instancetype)initializeSubviews {
    id view =   [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:self options:nil] firstObject];

    return view;
}

---

이 QA (많은 경우)는 실제로 역사적인 관심사입니다.

요즘 iOS에서는 수년 동안 모든 것이 단지 컨테이너보기 일뿐입니다. 여기에 전체 자습서

(실제로 Apple은 얼마 전에 마침내 Storyboard References를 추가 하여 훨씬 쉽게 만들었습니다.)

다음은 모든 곳에 컨테이너 뷰가있는 일반적인 스토리 보드입니다. 모든 것이 컨테이너 뷰입니다. 앱을 만드는 방법입니다.

(호기심으로 KenC의 대답은 실제로 "자신에게 할당"할 수 없기 때문에 일종의 래퍼 뷰에 xib를로드하는 데 사용 된 방법을 정확히 보여줍니다.)

---

Swift 출시로 상황을 업데이트하기 위해 이것을 별도의 게시물로 추가하고 있습니다. LeoNatan이 설명하는 접근 방식은 Objective-C에서 완벽하게 작동합니다. 그러나 더 엄격한 컴파일 시간 검사 self는 Swift의 xib 파일에서로드 할 때 할당되는 것을 방지 합니다.

결과적으로 self를 완전히 바꾸지 않고 xib 파일에서로드 된 뷰를 사용자 정의 UIView 하위 클래스의 하위 뷰로 추가하는 것 외에는 옵션이 없습니다. 이것은 원래 질문에 설명 된 두 번째 접근 방식과 유사합니다. 이 접근 방식을 사용하는 Swift 클래스의 대략적인 개요는 다음과 같습니다.

@IBDesignable // <- to optionally enable live rendering in IB
class ExampleView: UIView {

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

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

    func initializeSubviews() {
        // below doesn't work as returned class name is normally in project module scope
        /*let viewName = NSStringFromClass(self.classForCoder)*/
        let viewName = "ExampleView"
        let view: UIView = NSBundle.mainBundle().loadNibNamed(viewName,
                               owner: self, options: nil)[0] as! UIView
        self.addSubview(view)
        view.frame = self.bounds
    }

}

이 접근 방식의 단점은 Objective-C에서 LeoNatan이 설명하는 접근 방식을 사용할 때 존재하지 않는 뷰 계층 구조에 추가 중복 레이어를 도입한다는 것입니다. 그러나 이것은 필요한 악으로 받아 들여질 수 있으며 Xcode에서 사물을 설계하는 근본적인 방식의 산물로 간주 될 수 있습니다 (일관되게 작동하는 방식으로 사용자 정의 UIView 클래스를 UI 레이아웃과 연결하는 것이 너무 어려워서 여전히 미쳐 보입니다. 스토리 보드와 코드 모두에서) – self초기화 기에서 wholesale을 대체 하는 것은 본질적으로 뷰당 두 개의 뷰 클래스를 갖는 것도 그렇게 좋지 않은 것처럼 보이지만 작업을 수행하는 특별히 해석 가능한 방법처럼 보이지 않았습니다.

그럼에도 불구하고이 접근 방식의 한 가지 행복한 결과는에 할당 할 때 올바른 동작을 보장하기 위해 더 이상 뷰의 사용자 정의 클래스를 인터페이스 빌더의 클래스 파일로 설정할 필요가 없으므로 발행시 self재귀 호출 이 중단됩니다 ( xib 파일의 사용자 정의 클래스, 사용자 정의 버전이 아닌 일반 바닐라 UIView가 대신 호출됩니다).init(coder aDecoder: NSCoder)loadNibNamed()init(coder aDecoder: NSCoder)

xib에 직접 저장된 뷰에 대한 클래스 사용자 정의를 할 수는 없지만 뷰의 파일 소유자를 사용자 정의 클래스로 설정 한 후에도 아울렛 / 액션 등을 사용하여 뷰를 '부모'UIView 하위 클래스에 연결할 수 있습니다.

이 접근 방식을 사용하여 이러한 뷰 클래스의 구현을 단계별로 보여주는 비디오 는 다음 비디오에서 찾을 수 있습니다 .

---

1 단계. self스토리 보드에서 바꾸기

메서드 self에서 교체 initWithCoder:하면 다음 오류가 발생하여 실패합니다.

'NSGenericException', reason: 'This coder requires that replaced objects be returned from initWithCoder:'

대신 디코딩 된 객체를 awakeAfterUsingCoder:(아님 awakeFromNib)으로 바꿀 수 있습니다 . 처럼:

@implementation MyCustomView
- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class])
                                          owner:nil
                                        options:nil] objectAtIndex:0];
}
@end

2 단계. 재귀 호출 방지

물론 재귀 호출 문제도 발생합니다. (스토리 보드 디코딩-> awakeAfterUsingCoder:-> loadNibNamed:-> awakeAfterUsingCoder:-> loadNibNamed:-> ...)
따라서 현재 awakeAfterUsingCoder:는 스토리 보드 디코딩 과정 또는 XIB 디코딩 과정에서 호출되는지 확인해야합니다 . 이를 수행하는 방법에는 여러 가지가 있습니다.

a) @propertyNIB에서만 설정된 private 을 사용하십시오 .

@interface MyCustomView : UIView
@property (assign, nonatomic) BOOL xib
@end

'MyCustomView.xib'에서만 "사용자 정의 런타임 속성"을 설정합니다.

장점 :

• 없음

단점 :

• 단순히 작동하지 않음 : 이후에setXib: 호출됩니다. awakeAfterUsingCoder:

b) self하위보기가 있는지 확인

일반적으로 xib에는 하위보기가 있지만 스토리 보드에는 없습니다.

- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    if(self.subviews.count > 0) {
        // loading xib
        return self;
    }
    else {
        // loading storyboard
        return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class])
                                              owner:nil
                                            options:nil] objectAtIndex:0];
    }
}

장점 :

• Interface Builder에는 속임수가 없습니다.

단점 :

• 스토리 보드에는 하위보기가있을 수 없습니다.

c) loadNibNamed:통화 중 정적 플래그 설정

static BOOL _loadingXib = NO;

- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    if(_loadingXib) {
        // xib
        return self;
    }
    else {
        // storyboard
        _loadingXib = YES;
        typeof(self) view = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class])
                                                           owner:nil
                                                         options:nil] objectAtIndex:0];
        _loadingXib = NO;
        return view;
    }
}

장점 :

• 단순한
• Interface Builder에는 속임수가 없습니다.

단점 :

• 안전하지 않음 : 정적 공유 플래그는 위험합니다.

d) XIB에서 개인 서브 클래스 사용

예를 들어, _NIB_MyCustomView의 하위 클래스로 선언하십시오 MyCustomView. 그리고 XIB _NIB_MyCustomView대신 사용 MyCustomView하십시오.

MyCustomView.h :

@interface MyCustomView : UIView
@end

MyCustomView.m :

#import "MyCustomView.h"

@implementation MyCustomView
- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    // In Storyboard decoding path.
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class])
                                          owner:nil
                                        options:nil] objectAtIndex:0];
}
@end

@interface _NIB_MyCustomView : MyCustomView
@end

@implementation _NIB_MyCustomView
- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    // In XIB decoding path.
    // Block recursive call.
    return self;
}
@end

장점 :

• 명시 적 if으로하지 않습니다MyCustomView

단점 :

• _NIB_xib 인터페이스 빌더의 접두사 트릭
• 상대적으로 더 많은 코드

e) 스토리 보드에서 하위 클래스를 자리 표시 자로 사용

d)XIB의 원래 클래스 인 Storyboard의 하위 클래스와 비슷 하지만 사용합니다.

여기에서 우리 MyCustomViewProto는 MyCustomView.

@interface MyCustomViewProto : MyCustomView
@end
@implementation MyCustomViewProto
- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    // In storyboard decoding
    // Returns MyCustomView loaded from NIB.
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self superclass])
                                          owner:nil
                                        options:nil] objectAtIndex:0];
}
@end

장점 :

• 매우 안전
• 깨끗한; 에 추가 코드가 없습니다 MyCustomView.
• 다음 if과 같은 명시 적 검사 없음d)

단점 :

• 스토리 보드에서 하위 클래스를 사용해야합니다.

e)가장 안전하고 깨끗한 전략 이라고 생각 합니다. 그래서 우리는 그것을 여기서 채택합니다.

STEP3. 속성 복사

loadNibNamed:'awakeAfterUsingCoder :' 이후 self에는 스토리 보드의 디코딩 된 인스턴스 에서 여러 속성을 복사해야합니다 . frame그리고 autolayout / autoresize 속성은 특히 중요합니다.

- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    typeof(self) view = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class])
                                                       owner:nil
                                                     options:nil] objectAtIndex:0];
    // copy layout properities.
    view.frame = self.frame;
    view.autoresizingMask = self.autoresizingMask;
    view.translatesAutoresizingMaskIntoConstraints = self.translatesAutoresizingMaskIntoConstraints;

    // copy autolayout constraints
    NSMutableArray *constraints = [NSMutableArray array];
    for(NSLayoutConstraint *constraint in self.constraints) {
        id firstItem = constraint.firstItem;
        id secondItem = constraint.secondItem;
        if(firstItem == self) firstItem = view;
        if(secondItem == self) secondItem = view;
        [constraints addObject:[NSLayoutConstraint constraintWithItem:firstItem
                                                            attribute:constraint.firstAttribute
                                                            relatedBy:constraint.relation
                                                               toItem:secondItem
                                                            attribute:constraint.secondAttribute
                                                           multiplier:constraint.multiplier
                                                             constant:constraint.constant]];
    }

    // move subviews
    for(UIView *subview in self.subviews) {
        [view addSubview:subview];
    }
    [view addConstraints:constraints];

    // Copy more properties you like to expose in Storyboard.

    return view;
}

마지막 해결책

보시다시피 이것은 약간의 상용구 코드입니다. 이를 '카테고리'로 구현할 수 있습니다. 여기서는 일반적으로 사용되는 UIView+loadFromNib코드를 확장 합니다.

#import <UIKit/UIKit.h>

@interface UIView (loadFromNib)
@end

@implementation UIView (loadFromNib)

+ (id)loadFromNib {
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self)
                                          owner:nil
                                        options:nil] objectAtIndex:0];
}

- (void)copyPropertiesFromPrototype:(UIView *)proto {
    self.frame = proto.frame;
    self.autoresizingMask = proto.autoresizingMask;
    self.translatesAutoresizingMaskIntoConstraints = proto.translatesAutoresizingMaskIntoConstraints;
    NSMutableArray *constraints = [NSMutableArray array];
    for(NSLayoutConstraint *constraint in proto.constraints) {
        id firstItem = constraint.firstItem;
        id secondItem = constraint.secondItem;
        if(firstItem == proto) firstItem = self;
        if(secondItem == proto) secondItem = self;
        [constraints addObject:[NSLayoutConstraint constraintWithItem:firstItem
                                                            attribute:constraint.firstAttribute
                                                            relatedBy:constraint.relation
                                                               toItem:secondItem
                                                            attribute:constraint.secondAttribute
                                                           multiplier:constraint.multiplier
                                                             constant:constraint.constant]];
    }
    for(UIView *subview in proto.subviews) {
        [self addSubview:subview];
    }
    [self addConstraints:constraints];
}

이것을 사용하여 다음 MyCustomViewProto과 같이 선언 할 수 있습니다 .

@interface MyCustomViewProto : MyCustomView
@end

@implementation MyCustomViewProto
- (id)awakeAfterUsingCoder:(NSCoder *)aDecoder {
    MyCustomView *view = [MyCustomView loadFromNib];
    [view copyPropertiesFromPrototype:self];

    // copy additional properties as you like.

    return view;
}
@end

XIB :

스토리 보드 :

결과:

---

잊지 마세요

두 가지 중요한 사항 :

1. .xib의 파일 소유자를 사용자 정의보기의 클래스 이름으로 설정하십시오.
2. Don't set the custom class name in IB for the .xib's root view.

I came to this Q&A page several times while learning to make reusable views. Forgetting the above points made me waste a lot of time trying to find out what was causing infinite recursion to happen. These points are mentioned in other answers here and elsewhere, but I just want to reemphasize them here.

My full Swift answer with steps is here.

---

There is a solution which is much more cleaner than the solutions above: https://www.youtube.com/watch?v=xP7YvdlnHfA

No Runtime properties, no recursive call problem at all. I tried it and it worked like a charm using from storyboard and from XIB with IBOutlet properties (iOS8.1, XCode6).

Good luck for coding!

참고 URL : https://stackoverflow.com/questions/21898190/creating-a-reusable-uiview-with-xib-and-loading-from-storyboard