Nested use of IOS development Xib

Source: Internet
Author: User

Recently the company project needs to use Xib nested XIB to layout the interface, studied for a long time to achieve!!!

Share to everyone, hope to help more developers ...

There are two ways of customizing the interface in development

One: Pure code implementation

Suitable for a single, extremely complex interface, such as: Custom Playback Video Interface ...

Two: Xib realization

Suitable for multiple interfaces with a common one UIView component, multiple interfaces common use, this time using Xib custom view

#pragma mark-xib Custom View

Step One:

Create EYRedView.h and EYREDVIEW.M and eyredview.xib three files

As shown in the following:

Step Two:

Associate the Eyredview.xib file with the Eyredview class.

As shown in the following:

Step Three:

Drag the required components into the EYREDVIEW.XIB and set the constraints using the AutoLayout automatic layout (a UILabel and a uitextfiled are set in the figure, and the automatic layout is completed)

Step Four:

Providing a class method to the outside world in EYRedView.h

In EYRedView.h

+ (instancetype) Redview;


+ (instancetype) redview {  //  mode one:returnclass]) Owner:[self alloc]  Options:nil] Lastobject];  //  Way two  //  return [[Uinib Nibwithnibname:nsstringfromclass ([self class]) Bundle: Nil] Instantiatewithowner:nil Options:nil].firstobject; }  

How to use

In the Viewdidload in the controller

Eyredview * Redview == CGRectMake (0); [ Self.view Addsubview:redview];


Note: use Xib to customize the view you must set the frame!!! otherwise the size of the redview is the size set in Xib

Nesting of Xib #pragma mark-xib

The need now is to add a blue view to the red view and this blue view also wants to use XIB to define

PS: This blue view needs to be used in many xib, so use xib to define

Step One:

Create EYBlueView.h and EYBLUEVIEW.M and eyblueview.xib three files

Step Two:

Associating eyblueview.xib with the Eyblueview class in another way (PS: You cannot use the method above, you need to use the following method)

As shown in the following:

Step Three:

Eyblueview.xib add UIButton and Uitextfield and two controls, and use AutoLayout Auto layout to set constraints

PS: Normal Drag line will be able to get the control

Step Four:

Eyredview.xib Drag a UIView set to Eyblueview type, use automatic layout to set a good location

As shown in the following:

Step Five:

-(Instancetype) Initwithcoder: (Nscoder * = [super Initwithcoder:adecoder];  if   //  load as normal view  UIView *view = [[Uinib NIBWITHNIBNAME:NSSTRINGFROMCLA SS ([Self class  ]) Bundle:nil]        Instantiatewithowner:self Options:nil].firstobject;  //  set location (be sure to set)  View.frame = self.bounds;          //  add to yourself      [Self addsubview:view];  return   

The results are as follows:

The Perfect realization!

PS: The following can be selected implementation (recommended implementation, so that others use this custom view will have more ways)

In EYBlueView.h

+ (instancetype) Blueview;


+(instancetype) Blueview {//Way One    return[[[NSBundle Mainbundle] Loadnibnamed:nsstringfromclass ([Selfclass]) Owner:[self alloc] options:nil] lastobject]; //Mode two//return [[Uinib Nibwithnibname:nsstringfromclass ([self class]) Bundle:nil] Instantiatewithowner:nil Options:nil]. Firstobject;}-(Instancetype) initWithFrame: (CGRect) frame { self=[Super Initwithframe:frame]; if(self) {UIView* view = [[NSBundle mainbundle] Loadnibnamed:nsstringfromclass ([Selfclass]) owner:self options:nil].firstobject; View.frame=Self.bounds;    [Self addsubview:view]; }    returnSelf ;}

This allows others to use the two methods above to load the Eyblueview with code!!!!!!

More Content-Blog navigation One piece of the week yo!!!

Have any questions about iOS development! Welcome to the message below!!! or mail Although I'm not sure I can answer it, I'll ask iOS developers!!! Answers to your questions!!!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: