轉(zhuǎn)自Haven's blog

iOS開發(fā)的這些年里,，有的人用代碼創(chuàng)建UI，有的人用xib創(chuàng)建UI,。到底是用xib還是代碼來創(chuàng)建UI,這個問題以前也有過很多爭論,，我只想說一點(diǎn)，各有各的優(yōu)點(diǎn),。如果能夠?qū)烧呷诤县炌?，那將是更有?yōu)勢。筆者開發(fā)過程中,，UI能用xib就盡量用xib（能用storyboard就用storyboard, 一個storyboard里最好別裝太多的UIViewController,，這在結(jié)隊(duì)開發(fā)中將不利）。本文主要介紹使用xib的一些技術(shù),，即在xib中布局UI,然后xib與code相結(jié)合,，快速UI開發(fā)介紹,。本文主要講解的也就是加載xib的技術(shù)。

還是老方法,，用代碼說話,，首先創(chuàng)建一個Single Page工程，命名為:LoadNibViewDemo,。

1.直接加載xib中的UIView

創(chuàng)建一個View1.xib, 隨便設(shè)一個背景色,，加一個標(biāo)識UILabel, 這樣好知道是這個view是哪一個view. 你可以在這個view上加作意的subview，我只是說明原理,，所以這兒并沒有加作何subview. 最終我的View1如下圖：

由于View1會放到其它View上作為subview,，所以這兒size是Freeform, Status Bar是:None。

將下面代碼放到viewDidLoad中：

//1 
 
NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"View1" owner:nil options:nil]; //&1 
 
UIView *v = [views lastObject]; 
 
CGRect r = v.frame; 
 
r.origin.y += 80; 
 
v.frame = r; 
 
[self.view addSubview:v]; 

&1這行代碼就是加載View1.xib,， 然后將xib中的UIView實(shí)保存到views中,， 由于xib中我們只拖入了一個view, 所以這兒lastObject就返回這個view的實(shí)例，這樣便加載了xib中的UIView. 接著將這個UIView addSubview到其它view上,，運(yùn)行效果如圖： 

首先我們?yōu)閂iewController創(chuàng)建一個IBOutlet屬性：

@property (nonatomic, weak) IBOutlet UIView *referencedView; 

接著同上面介紹的一樣創(chuàng)建一個View2.xib, 如下圖：

File’s Owner中,，我們設(shè)為ViewController, 這樣我們就可以與實(shí)例變量_referencedView建立關(guān)聯(lián)了,如圖：

接著在viewDidLoad中，在剛才加入的代碼下面添加如下代碼：

// 2 
 
[[NSBundle mainBundle] loadNibNamed:@"View2" owner:self options:nil]; 
 
r = _referencedView.frame; 
 
r.origin.y = v.frame.size.height + v.frame.origin.y; 
 
_referencedView.frame = r; 
 
[self.view addSubview:_referencedView]; 

與//1中的代碼有點(diǎn)類似,，只不過owner屬性為self了,。這樣一來，loadNibNamed后,，就會實(shí)例化與之關(guān)聯(lián)的變量_referencedView, 運(yùn)行程序你將會看到效果： 

3.Class Owner建立變量關(guān)聯(lián)

其實(shí)這個原理與上面2說的一樣的,，只不過這兒我們特別定義一個class來作為xib的Owner， 要所有需要關(guān)系的view都可以聲明在這個Owner中,，這樣方便代碼管理與維護(hù),。

這里我們聲明一個NSObject的子類FileOwner, 然后再在FileOnwer中聲明IBOutLet的關(guān)聯(lián)變量：

@property (nonatomic, weak) IBOutlet UIView *view; 

同理創(chuàng)建一個View3.xib, File’s Owner設(shè)為FileOwner, 并建立view關(guān)聯(lián)： 

接著在viewDidLoad結(jié)尾處添加以下代碼:

// 3 
 
FileOwner *owner = [FileOwner new]; 
 
[[NSBundle mainBundle] loadNibNamed:@"View3" owner:owner options:nil]; 
 
r = owner.view.frame; 
 
r.origin.y = _referencedView.frame.origin.y + _referencedView.frame.size.height; 
 
owner.view.frame = r; 
 
[self.view addSubview:owner.view]; 

運(yùn)行效果： 

 

為了代碼簡單，我們增加一個UIView Category方法：

+(id)loadFromNibNamed:(NSString*) nibName { 
 
    return [FileOwner viewFromNibNamed:nibName]; 
 
} 

其中FileOwner的class 方法：

+(id)viewFromNibNamed:(NSString*) nibName { 
 
    FileOwner *owner = [self new]; 
 
    [[NSBundle mainBundle] loadNibNamed:nibName owner:owner options:nil]; 
 
    return owner.view; 
 
} 

這樣加載xib的代碼就會變得更簡單,。

同理,，我們創(chuàng)建一個View4.xib, File’s Owner設(shè)為FileOwner, 并建立view關(guān)聯(lián)：

接著在viewDidLoad尾添加代碼：

// 4 
 
UIView *v4 = [UIView loadFromNibNamed:@"View4"]; 
 
r = v4.frame; 
 
r.origin.y = owner.view.frame.origin.y + owner.view.frame.size.height; 
 
v4.frame = r; 
 
[self.view addSubview:v4]; 

運(yùn)行效果：

5. 自定義UIView類

在4Category的基礎(chǔ)上，我們再引入自定義UIView類,，并在xib中與之關(guān)聯(lián),。首先我們創(chuàng)建一個UIView字類UIView5。

接著,，我們創(chuàng)建一個View5.xib, File’s Owner設(shè)為FileOwner, 并建立view關(guān)聯(lián)： 

接著增加一個UIView的Category方法：

+(id)loadFromNib { 
 
    return [self loadFromNibNamed:NSStringFromClass(self)]; 
 
} 

在viewDidLoad尾加入代碼：

// 5 
 
View5 *v5 = [View5 loadFromNib]; 
 
r = v5.frame; 
 
r.origin.y = v4.frame.origin.y + v4.frame.size.height; 
 
v5.frame = r; 
 
[self.view addSubview:v5]; 

動行效果：

 

6.設(shè)置Onwer為UIViewController

首先,，我們創(chuàng)建一個View6.xib, File’s Owner設(shè)為UIViewController. 這樣UIViewController的view屬性關(guān)聯(lián)我們xib中的UIView  

接著在viewDidLoad中添加代碼：

// 6 
 
UIView *v6 = [[UIViewController alloc] initWithNibName:@"View6" bundle:nil].view; 
 
r = v6.frame; 
 
r.origin.y = v5.frame.origin.y + v5.frame.size.height; 
 
v6.frame = r; 
 
[self.view addSubview:v6]; 

動行效果： 

 

說了這么多，是時候做一下總結(jié)了,，其實(shí)其本是兩個方法,，一個是沒有File’s Onwer直接加載xib中的UIView，二是通過File’s Onwer關(guān)聯(lián)變量加載xib中的UIView,。 然后就是一些Category提供簡單接口而已,。大家可以再細(xì)細(xì)品味一下上面所介紹的內(nèi)容,。

大家可以看我源碼中UIView+Ext的Category方法中還提供了一個方法：+ (id)loadFromNibNoOwner;它應(yīng)是方法5與方法1的組合，在此我就不細(xì)說了,。 都是由上面兩個基本方法演變出來的,。

7. xib link xib

大家有沒有想過在xib中l(wèi)ink其它xib？ 很可惜蘋果不支持這個功能,。但是我們可以通過一點(diǎn)技巧實(shí)現(xiàn)這個功能,。下而我就簡單介紹一下。

先說一下原理,，加載xib的UIView,，如果這個UIView是自定義的UIView（即xib中關(guān)聯(lián)了UIView的子類），如下圖： 

那么在加載顯示這個view的時候會觸發(fā)一些方法,，如：

- (id)initWithCoder:(NSCoder *)aDecoder 
 
- (id)awakeAfterUsingCoder:(NSCoder*)aDecoder 

我們就在這兒作些文章,，在這兒用前面介紹的方法加載想要的的xib中UI實(shí)例替換掉原來返回的實(shí)例。

首先我寫了一個UIView的了類SubView,，代碼很容易理解：

#import "SubView.h" 
#include "UIView+Ext.h" 
 
@implementation SubView 
 
- (id)initWithFrame:(CGRect)frame 
{ 
    self = [super initWithFrame:frame]; 
    if (self) { 
        // Initialization code 
    } 
    return self; 
} 
 
 
- (id) awakeAfterUsingCoder:(NSCoder*)aDecoder { 
    BOOL theThingThatGotLoadedWasJustAPlaceholder = ([[self subviews] count] == 0); 
    if (theThingThatGotLoadedWasJustAPlaceholder) { 
        SubView* theRealThing = [[self class] loadFromNibNoOwner]; 
       
        // pass properties through 
        [self copyUIPropertiesTo:theRealThing]; 
         
        //auto layout 
        self.translatesAutoresizingMaskIntoConstraints = NO; 
        theRealThing.translatesAutoresizingMaskIntoConstraints = NO; 
       
        return theRealThing; 
    } 
    return self; 
} 
 
-(void) copyUIPropertiesTo:(UIView *)view 
{ 
    // reflection did not work to get those lists, so I hardcoded them 
    // any suggestions are welcome here 
     
    NSArray *properties = 
    [NSArray arrayWithObjects: @"frame",@"bounds", @"center", @"transform", @"contentScaleFactor", @"multipleTouchEnabled", @"exclusiveTouch", @"autoresizesSubviews", @"autoresizingMask", @"clipsToBounds", @"backgroundColor", @"alpha", @"opaque", @"clearsContextBeforeDrawing", @"hidden", @"contentMode", @"contentStretch", nil]; 
     
    // some getters have 'is' prefix 
    NSArray *getters = 
    [NSArray arrayWithObjects: @"frame", @"bounds", @"center", @"transform", @"contentScaleFactor", @"isMultipleTouchEnabled", @"isExclusiveTouch", @"autoresizesSubviews", @"autoresizingMask", @"clipsToBounds", @"backgroundColor", @"alpha", @"isOpaque", @"clearsContextBeforeDrawing", @"isHidden", @"contentMode", @"contentStretch", nil]; 
     
    for (int i=0; i<[properties count]; i++) 
    { 
        NSString * propertyName = [properties objectAtIndex:i]; 
        NSString * getter = [getters objectAtIndex:i]; 
         
        SEL getPropertySelector = NSSelectorFromString(getter); 
         
        NSString *setterSelectorName = 
        [propertyName stringByReplacingCharactersInRange:NSMakeRange(0,1) withString:[[propertyName substringToIndex:1] capitalizedString]]; 
         
        setterSelectorName = [NSString stringWithFormat:@"set%@:", setterSelectorName]; 
         
        SEL setPropertySelector = NSSelectorFromString(setterSelectorName); 
         
        if ([self respondsToSelector:getPropertySelector] && [view respondsToSelector:setPropertySelector]) 
        { 
            NSObject * propertyValue = [self valueForKey:propertyName]; 
             
            [view setValue:propertyValue forKey:propertyName]; 
        } 
    }     
} 
 
@end 

創(chuàng)建一個EmbeddedView.xib,，我們想在其它xib中直接link這個EmbeddedView.xib, 還需要創(chuàng)建一個SubView的了類EmbeddedView。

我的xib信息是這樣的：

一切就緒后,，運(yùn)行： 

xib可以快速布署UI, 可以提高開發(fā)速度哦,。 隨便在此預(yù)告一下下一篇教程的內(nèi)容:多Storyboard協(xié)作開發(fā)。

終于這個教程寫完了,，完整的Demo可以在此下載:LoadNibViewDemo,。希望大家多多支持，你們的支持將是我源源不斷的動力,。