[iOS基础控件 - 4.3] xib的使用

浏览数：31 / 时间：2015年06月11日

A.storyboard和xib

1.storyboard: 相对xib较重量级，控制整个应用的所有界面

2.xib: 轻量级，一般用来描述局部界面

B.使用

1.新建xib文件

New File ==> User Interface ==> Empty

2.打开新建的xib文件，出现可视化窗口

（1）拖入一个UIView （不是UIViewController）

（2）设置大小：开启可自定义尺寸 ==> 定义尺寸

（3）拖入图标图片、名字、下载按钮，调整设置

3.在代码中获取xib中的view，并设置数据

（1）从xib获取view

a.方法1:

1         // 1.获取xib中的view, xib中可以同时定义多个view，注意名字不带扩展名
2         NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app" owner:nil options:nil];
3         UIView *appView = [viewArray lastObject];

b.方法2:

1         UINib *nib = [UINib nibWithNibName:@"app" bundle:[NSBundle mainBundle]];
2         NSArray *viewArray = [nib instantiateWithOwner:nil options:nil];
3         UIView *appView = [viewArray lastObject];

（2）取出View中的元素，设置图片

a.方法1，使用SubView数组：

1         // 3.设置图片
2         UIImageView *iconView = appView.subviews[2];
3         iconView.image = [UIImage imageNamed:appData.icon];

注意：按照教程是按照下图的顺序排列数组元素（imageView应该是subviews[0]，但是实际编程发现却不是，所以此方法并不稳定）

b.方法2，使用tag：

1         // 3.设置图片
2         UIImageView *iconView = [appView viewWithTag:1];
3         iconView.image = [UIImage imageNamed:appData.icon];

（3）设置名字

1         // 4.设置名字
2         UILabel *nameLabel = [appView viewWithTag:2];
3         nameLabel.text = appData.name;

（4）下载按钮已经在xib中定义好，不必使用代码

C.实现代码

  1 #import "ViewController.h"
  2 #import "App.h"
  3 
  4 #define ICON_KEY @"icon"
  5 #define NAME_KEY @"name"
  6 #define APP_WIDTH 85
  7 #define APP_HEIGHT 90
  8 #define MARGIN_HEAD 20
  9 #define ICON_WIDTH 50
 10 #define ICON_HEIGHT 50
 11 #define NAME_WIDTH APP_WIDTH
 12 #define NAME_HEIGHT 20
 13 #define DOWNLOAD_WIDTH (APP_WIDTH - 20)
 14 #define DOWNLOAD_HEIGHT 20
 15 
 16 @interface ViewController ()
 17 
 18 /** 存放应用信息 */
 19 @property(nonatomic, strong) NSArray *apps; // 应用列表
 20 
 21 @end
 22 
 23 @implementation ViewController
 24 
 25 - (void)viewDidLoad {
 26     [super viewDidLoad];
 27     // Do any additional setup after loading the view, typically from a nib.
 28     
 29     [self loadApps];
 30 }
 31 
 32 - (void)didReceiveMemoryWarning {
 33     [super didReceiveMemoryWarning];
 34     // Dispose of any resources that can be recreated.
 35 }
 36 
 37 #pragma mark 取得应用列表
 38 - (NSArray *) apps {
 39     if (nil == _apps) {
 40         // 1.获得plist的全路径
 41         NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
 42         
 43         // 2.加载数据
 44         NSArray *dictArray  = [NSArray arrayWithContentsOfFile:path];
 45         
 46         // 3.将dictArray里面的所有字典转成模型，放到新数组中
 47         NSMutableArray *appArray = [NSMutableArray array];
 48         for (NSDictionary *dict in dictArray) {
 49             // 3.1创建模型对象
 50             App *app = [App appWithDictionary:dict];
 51             
 52             // 3.2 添加到app数组中
 53             [appArray addObject:app];
 54         }
 55         
 56         _apps = appArray;
 57     }
 58 
 59     return _apps;
 60 }
 61 
 62 #pragma mark 加载全部应用列表
 63 - (void) loadApps {
 64     int appColumnCount = [self appColumnCount];
 65     int appRowCount = [self appRowCount];
 66     
 67     CGFloat marginX = (self.view.frame.size.width - APP_WIDTH * appColumnCount) / (appColumnCount + 1);
 68     CGFloat marginY = (self.view.frame.size.height - APP_HEIGHT * appRowCount) / (appRowCount + 1) + MARGIN_HEAD;
 69     
 70     int column = 0;
 71     int row = 0;
 72     for (int index=0; index<self.apps.count; index++) {
 73         App *appData = self.apps[index];
 74 
 75         // 1.获取xib中的view, xib中可以同时定义多个view，注意名字不带扩展名
 76 //        NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app" owner:nil options:nil];
 77 //        UIView *appView = [viewArray lastObject];
 78         
 79         UINib *nib = [UINib nibWithNibName:@"app" bundle:[NSBundle mainBundle]];
 80         NSArray *viewArray = [nib instantiateWithOwner:nil options:nil];
 81         UIView *appView = [viewArray lastObject];
 82         
 83         // 2.定义每个app的位置、尺寸
 84         CGFloat appX = marginX + column * (marginX + APP_WIDTH);
 85         CGFloat appY = marginY + row * (marginY + APP_HEIGHT);
 86         appView.frame = CGRectMake(appX, appY, APP_WIDTH, APP_HEIGHT);
 87         
 88         // 3.设置图片
 89         UIImageView *iconView = [appView viewWithTag:1];
 90         iconView.image = [UIImage imageNamed:appData.icon];
 91         
 92         // 4.设置名字
 93         UILabel *nameLabel = [appView viewWithTag:2];
 94         nameLabel.text = appData.name;
 95         
 96         // 5.加入此app信息到总view
 97         [self.view addSubview:appView];
 98         
 99         column++;
100         if (column == appColumnCount) {
101             column = 0;
102             row++;
103         }
104     }
105 }
106 
107 
108 #pragma mark 计算列数
109 - (int) appColumnCount {
110     int count = 0;
111     count = self.view.frame.size.width / APP_WIDTH;
112     
113     if ((int)self.view.frame.size.width % (int)APP_WIDTH == 0) {
114         count--;
115     }
116     
117     return count;
118 }
119 
120 #pragma mark 计算行数
121 - (int) appRowCount {
122     int count = 0;
123     count = (self.view.frame.size.height - MARGIN_HEAD) / APP_HEIGHT;
124     
125     if ((int)(self.view.frame.size.height - MARGIN_HEAD) % (int)APP_HEIGHT == 0) {
126         count--;
127     }
128     
129     return count;
130 }
131 
132 @end