xcode中xib使用之轻松学习

1.创建xib文件

          在工程目录中New Files，选择user interface类型中的empty创建一个空的interface builder document文件。文件名没有强制的要求，最好使用  前缀＋plist文件名＋View  命名。

          步骤：

                   1.选择New File

                  2.选择User interface 中的empty类型

                  3.前缀＋plist文件名＋View  命名并create生成xib文件。

2.向xib文件编辑器中添加控件

           跟据分析需求向xib中调用添加控件。

           这里我们以应用程序图标举例：

                   图标分析：

                   由图标可知，该自定义视图由view、image view、label、button四个控件组成。

                   在xib中调用控件搭建图标视图，如：

3.创建xib文件对应的视图模型类

           创建xib文件的视图模型类。模型类文件由.h和.m文件组成，文件名字没有强制要求，最好与xib文件名保持一致。

                  步骤：

                          1.选择New File

                          2.选择source类型中的cocoa touch class类型

                          3.命名并next，后在默认路径保存create创建即可

                                 ，

3.模型类与xib视图中控件连线定义属性

           根据图标视图操作要求连线创建相应的IBOutlet属性和IBAction方法。私有属性定义在.m文件中的类扩展中，公有属性定义在.h文件中。属性中存储管理使用weak，线程管理使用nonatomic，IBAction和IBOutlet表示与xib视图对应的链接，属性类型与xib中相应的控件类型保持一致。属性名没有强制要求，最好使用有意义的英文单词命名，多个单词使用时，第一个单词小写，其它单词首字母大写。

           根据图标生成相应的属性和方法，如：

            HMAppView.h文件代码：                      

           #import <UIKit/UIKit.h>

           @interface HMAppView : UIView

           @end

      HMAppView.m文件代码：

           #import "HMAppView.h"

           @interface HMAppView()

           @property (weak, nonatomic) IBOutlet UIImageView *iconView;

           @property (weak, nonatomic) IBOutlet UILabel *label;

           @end

           @implementation HMAppView

            /** 按钮监听方法 */

           - (IBAction)click:(UIButton *)button

           {}

           @end

4.在viewController.m文件中加载xib自定义视图

           HMViewController.m文件代码：

           #import "HMViewController.h"

           #import "HMAppView.h"

           @interface HMViewController ()

           @end

           @implementation HMViewController

           - (void)viewDidLoad

           {

                [super viewDidLoad];

                // 从XIB来加载自定义视图

                HMAppView *appView = [[[NSBundle mainBundle] loadNibNamed:@"HMAppView" owner:nil options:nil] lastObject];

                // 设置视图位置

                appView.frame = CGRectMake(150, 150, 150, 150);

                [self.view addSubview:appView];

           }

           @end

    运行结果为：

5.补充

     注意上面的程序必须加载图片资源，其演示与输出皆为加载了图片资源的运行结果。

     images.xcassets为Xcode工程中的一个资源文件夹，可以将频繁使用的图片等加载到该文件夹。

         如：