iOS 【UIKit-使用XIB自定义布局】

我们通常使用storyboard进行自定义布局，孰不知，还有XIB这个好帮手。XIB中可以包含多个自定义视图，但是通常只保存一个。就像是将stroyboard中的多个自定义视图拆开来。storyboard是重量级的，能够描述一个应用程序的所有界面。而XIB是轻量级的，在Xcode 4.0之前，是主要的图形界面搭建工具，现在也是主流的界面开发工具，适合开发小块的自定义视图。所以说使用XIB对自定义布局非常有帮助。下面为大家介绍一个例子。

首先我们来看一下项目成果图：

我们发现上面的图标五花八门，但是结构类似，所以我们可以用XIB来定义其中一个元素，然后批量生产。

我们创建一个XIB文件。

此时选择Empty，不过选择View也是可以的。（通常是Empty）

然后我们在建好XIB文件后，用控件创建图中其中一个元素。

我们发现其中一个元素中包含三部分，分别是一个Image View、一个Label和一个Button。这三部分都是放在一个View的上面。在上面的列表中我们也可以看到，View是父层，而Image View、Label、Button是子层。

我们根据之前代码中的一些参数，设置好他们的长宽和坐标，这里不再说明。

需要注意一个小地方，创建View的时候，是这个样子的。如下图：

View控件的右上角有个电池，显然我们不需要。我们可以修改一个参数——Status Bar。

将其设置为None后，就不会有电池了。

然后我们将设置好的XIB自定义视图于代码关联。

我先将代码copy在下面，然后一句一句的来解释。

        //        调用XIB视图        UIView *appView = [[[NSBundle mainBundle]loadNibNamed:@"AppView" owner:nil options:nil]firstObject];                //        测试代码        NSLog(@"%@",[[NSBundle mainBundle]loadNibNamed:@"AppView" owner:nil options:nil]);                appView.frame = CGRectMake(x, y, kAppViewW, kAppViewH);                [self.view addSubview:appView];                //        实现内部细节        AppInfo *appInfo1 = self.appList[i];                //        ①UIImageView （应用程序图标）        UIImageView *icon = appView.subviews[0];//我们共添加了三个视图（Image View、Label、Button），以数组的形式存储，iamgeView视图        是数组中第一个元素                //        设置图像        icon.image = [UIImage imageNamed:appInfo1.icon];                //        ②UILabel （应用程序名称）        UILabel *label = appView.subviews[1];        //        设置应用程序名称        label.text = appInfo1.name;                //        ③UIButton （下载按钮）        UIButton *button = appView.subviews[2];                //        给按钮添加监听方法        button.tag = i;        [button addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];

首先我们来看这句话

//        调用XIB视图        UIView *appView = [[[NSBundle mainBundle]loadNibNamed:@"AppView" owner:nil options:nil]firstObject];

这句话很有意思，最后是一个firstObject，也就是说返回的是数组中的第一个元素。然后将这个元素赋给appView。也就是说XIB中我们自定义的视图是以一个一个的数组元素的形式来存储的。我们现在来测试一下。我们在XIB中先拖入多个插件。

        //        测试代码        NSLog(@"%@",[[NSBundle mainBundle]loadNibNamed:@"AppView" owner:nil options:nil]);

我们看到了我们的测试代码，先用NSBundle读取的全路径，然后调用了loadNibNamed:方法，显然这个方法返回的是一个数组，方法中有三个参数：

name：nib文件的名称（也可以叫xib，这和乔老爷子有关～）

owner：指定name参数所指代的nib文件的File's owner（File's owner是该nib文件所对应的类）

options：当nib文件开始时所需要的数据

我们将name设置为我们的AppView（不加后缀），然后将owner、options可以先暂时设为nil。

这样我们再来看一下测试代码的输出结果：

2015-10-18 10:14:34.165 05-九宫格（修改）[3557:151396] (    "<UIView: 0x7b6020e0; frame = (0 0; 80 90); autoresize = RM+BM; layer = <CALayer: 0x7b6bb520>>",    "<UITableViewCell: 0x7b0d3350; frame = (0 0; 320 44); clipsToBounds = YES; layer = <CALayer: 0x7b0d14b0>>",    "<UICollectionReusableView: 0x7b717a10; frame = (0 0; 320 50); clipsToBounds = YES; opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7b788060>>",    "<UIDatePicker: 0x7aea0630; frame = (0 0; 139 110); autoresize = W+BM; layer = <CALayer: 0x7ae90c20>>",    "<UIPickerView: 0x7e051a70; frame = (0 0; 190 109); clipsToBounds = YES; autoresize = RM+BM; layer = <CALayer: 0x7e051b80>>")

显然输出了5个控件，顺序和我们拖入时在边栏显示的顺序是一样的。

也就是说每一个控件都是一个数组中的元素。

下面设置内部的一些细节的时候，我们只是设置了XIB中无法区别的部分（也就是每个图标特有的部分），比如说图片和应用程序的名称。一些字体大小、对其格式什么的，都是通用的，所以我们可以直接在XIB中设置，这样一来代码量减少了很多。

好了，讲了一部分，我们对上面的代码应该进行一些优化，了解的同学可能知道，上面我们也提及过在xib文件中，视图是以数组的形式存储的，这一点就非常的不方便了。一旦视图的顺序发生了改变，那么就会出错。

所以我们建议将xib封装一下。

首先新建一个Cocoa Touch Class，然后选择继承自UIView，因为我们是自定义视图，所以要继承自UIView。

然后设置关联的类。

设置好了之后我们就可以连线了。

然后跳转到ViewController.m中进行代码的配置。

这样修改过这几个地方之后，就和xib文件中控件的顺序无关了，这样就对xib自定义视图进行了很好的封装。