03-UI 图片浏览,九宫格,应用管理界面搭建

最终效果图:



ViewController.m文件

#import "ViewController.h"

#import "HMAppView.h"
#import "HMAppModel.h"
@interface ViewController ()
/// 保存所有数据
@property (nonatomic, strong) NSArray *appData;
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// 1.加载数据
[self loadAppData];

// 格子的宽和高
CGFloat appW = 100;
CGFloat appH = 120;
// 格子之间间距
CGFloat margin = 10;
// 列数
NSInteger columnCount = 3;

// 最左边边距 = (屏幕的宽 - (三个格子的宽) - (列数 - 1) * 间距) * 0.5;
CGFloat leftMargin = (self.view.bounds.size.width - (appW * columnCount) -(columnCount - 1) * margin) * 0.5;

// 顶部边距
CGFloat topMargin = leftMargin;

for (NSInteger i = 0; i < self.appData.count; i++) {

// 创建appView
HMAppView *appView = [HMAppView appView];

// 计算列号
NSInteger col = i % columnCount;

// 计算格子的X =  leftMargin + (格子的宽 + 格子之间间距) * col"列号"
CGFloat appX = leftMargin + (appW + margin) * col;

// 计算行号
NSInteger row = i / columnCount;

// 计算格子的Y = topMargin + (格子的高 + 间距) * 行号
CGFloat appY = topMargin + (appH + margin) * row;

// 设置格子的frame
appView.frame = CGRectMake(appX, appY, appW, appH);

// 把appView添加到父控件上
[self.view addSubview:appView];

// 给appView传模型数据
appView.appModel = self.appData[i];

}
}
}

#pragma mark - 加载数据
- (void)loadAppData {
// 加载plist文件
NSArray *dictArr = [NSArray arrayWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"apps.plist" withExtension:nil]];

// 创建可变数组用来保存所有模型对象
NSMutableArray *arrM = [NSMutableArray array];

// 遍历数组中的字典,把字典换成模型对象
for (NSDictionary *dict in dictArr) {

// 字典转模型
HMAppModel *appModel = [HMAppModel appModelWithDict:dict];

// 把处理好的模型添加到数组
[arrM addObject:appModel];

}
// 把装有模型的数组赋值给控制器的属性
_appData = arrM;
}
@end

/** 用xib自定义视图的步骤:

1.创建一个xib文件用来描述局部视图 “freeform”

2.向xib中拖入相应的子控件,并且设置好frame

3.创建一个类,用来管理xib文件”管理xib文件的类名,最好和xib文件名称一样”,管理xib的类,要继承至什么取决于,xib文件中最上层”顶层”视图的类型

4.指定xib文件中最上层”顶层”视图的class,不指定class无法连线

5.把需要设置数据及监听点击的控件连线到管理xib类的.m中去

6.在管理xib类的.h中定义一个属性,用来接收控制器传递的模型数据,”strong”,在.m中重写此属性的set方法,在此方法给控件设置数据

7.在管理xib类的.h中声明一个类方法,把加载xib的细节封装在管理xib类里面

*/



HMAppView.h文件

#import <UIKit/UIKit.h>

@class HMAppModel;
@interface HMAppView : UIView
// 用来接收控制器传递过来的数据
//@property (nonatomic, strong) NSDictionary *dict;

// 模型属性
@property (nonatomic, strong) HMAppModel *appModel;

// 声明一个用来加载xib创建appView的方法
+ (instancetype)appView;
@end

HMAppView.m文件

#import "HMAppView.h"
#import "HMAppModel.h"

@interface HMAppView ()
/// 图标
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
/// 名称
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;

@end
@implementation HMAppView

+ (instancetype)appView {
// 加载xib文件
UINib *nib = [UINib nibWithNibName:@"HMAppView" bundle:nil];
// 把xib文件转换成控件
return [[nib instantiateWithOwner:nil options:nil] firstObject];

}

// 重写set方法拦截数据传递过程,只要set方法调用就说明有人给属性赋值了
//- (void)setDict:(NSDictionary *)dict {
//    _dict = dict;
//
//    self.iconView.image = [UIImage imageNamed:dict[@"icon"]];
//
//    self.nameLabel.text = dict[@"name"];
//
//
//}

// 重写模型属性的set方法给子控件设置数据
- (void)setAppModel:(HMAppModel *)appModel {
_appModel = appModel;

self.iconView.image = [UIImage imageNamed:appModel.icon];

self.nameLabel.text = appModel.name;
}

@end

HMAppModel.h文件

#import <Foundation/Foundation.h>

@interface HMAppModel : NSObject
/// 名称
@property (nonatomic, copy) NSString *name;
/// 图标名称
@property (nonatomic, copy) NSString *icon;

+ (instancetype)appModelWithDict:(NSDictionary *)dict;
@end

HMAppModel.m文件

@implementation HMAppModel
+ (instancetype)appModelWithDict:(NSDictionary *)dict {
// 创建模型对象
id obj = [[self alloc] init];
// 用KVC给对象中的属性赋值
[obj setValuesForKeysWithDictionary:dict];

return obj;

}