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

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.获取xib中的view, xib中可以同时定义多个view，注意名字不带扩展名
        NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app" owner:nil options:nil];
        UIView *appView = [viewArray lastObject];

 

b.方法2:

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

 

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

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

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

 

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

 

b.方法2，使用tag：

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

 

（3）设置名字

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

 

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

 

 

C.实现代码

#import "ViewController.h"
#import "App.h"

#define ICON_KEY @"icon"
#define NAME_KEY @"name"
#define APP_WIDTH 85
#define APP_HEIGHT 90
#define MARGIN_HEAD 20
#define ICON_WIDTH 50
#define ICON_HEIGHT 50
#define NAME_WIDTH APP_WIDTH
#define NAME_HEIGHT 20
#define DOWNLOAD_WIDTH (APP_WIDTH - 20)
#define DOWNLOAD_HEIGHT 20

@interface ViewController ()

/** 存放应用信息 */
@property(nonatomic, strong) NSArray *apps; // 应用列表

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    [self loadApps];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark 取得应用列表
- (NSArray *) apps {
    if (nil == _apps) {
        // 1.获得plist的全路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        
        // 2.加载数据
        NSArray *dictArray  = [NSArray arrayWithContentsOfFile:path];
        
        // 3.将dictArray里面的所有字典转成模型，放到新数组中
        NSMutableArray *appArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            // 3.1创建模型对象
            App *app = [App appWithDictionary:dict];
            
            // 3.2 添加到app数组中
            [appArray addObject:app];
        }
        
        _apps = appArray;
    }

    return _apps;
}

#pragma mark 加载全部应用列表
- (void) loadApps {
    int appColumnCount = [self appColumnCount];
    int appRowCount = [self appRowCount];
    
    CGFloat marginX = (self.view.frame.size.width - APP_WIDTH * appColumnCount) / (appColumnCount + 1);
    CGFloat marginY = (self.view.frame.size.height - APP_HEIGHT * appRowCount) / (appRowCount + 1) + MARGIN_HEAD;
    
    int column = 0;
    int row = 0;
    for (int index=0; index<self.apps.count; index++) {
        App *appData = self.apps[index];

        // 1.获取xib中的view, xib中可以同时定义多个view，注意名字不带扩展名
//        NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app" owner:nil options:nil];
//        UIView *appView = [viewArray lastObject];
        
        UINib *nib = [UINib nibWithNibName:@"app" bundle:[NSBundle mainBundle]];
        NSArray *viewArray = [nib instantiateWithOwner:nil options:nil];
        UIView *appView = [viewArray lastObject];
        
        // 2.定义每个app的位置、尺寸
        CGFloat appX = marginX + column * (marginX + APP_WIDTH);
        CGFloat appY = marginY + row * (marginY + APP_HEIGHT);
        appView.frame = CGRectMake(appX, appY, APP_WIDTH, APP_HEIGHT);
        
        // 3.设置图片
        UIImageView *iconView = [appView viewWithTag:1];
        iconView.image = [UIImage imageNamed:appData.icon];
        
        // 4.设置名字
        UILabel *nameLabel = [appView viewWithTag:2];
        nameLabel.text = appData.name;
        
        // 5.加入此app信息到总view
        [self.view addSubview:appView];
        
        column++;
        if (column == appColumnCount) {
            column = 0;
            row++;
        }
    }
}


#pragma mark 计算列数
- (int) appColumnCount {
    int count = 0;
    count = self.view.frame.size.width / APP_WIDTH;
    
    if ((int)self.view.frame.size.width % (int)APP_WIDTH == 0) {
        count--;
    }
    
    return count;
}

#pragma mark 计算行数
- (int) appRowCount {
    int count = 0;
    count = (self.view.frame.size.height - MARGIN_HEAD) / APP_HEIGHT;
    
    if ((int)(self.view.frame.size.height - MARGIN_HEAD) % (int)APP_HEIGHT == 0) {
        count--;
    }
    
    return count;
}

@end