ios开发之UI基础--应用管理xib-九宫格布局

ios开发之UI基础--应用管理xib-九宫格布局

一.要求:完成下面界面

二.分析

三.创建模型数据

#import <Foundation/Foundation.h>

@interface YelloModel : NSObject

// name 是用来表示 label上的文本的
@property (nonatomic, strong) NSString *name;

// icon 是用来表示图片的
@property (nonatomic, strong) NSString *icon;


// 定义一个方法， 用来接受字典， 然后进行内部数据操作
- (void)setDataWith:(NSDictionary *)dict;

// 定义一个类方法， 用来处理数据
// id 和 instacetype 都可以作为返回值， instacnetype 会检测返回值的具体类型
+ (instancetype)dataWithDicitonary:(NSDictionary *)dict;


@end
#import "YelloModel.h"

@implementation YelloModel


- (void)setDataWith:(NSDictionary *)dict {
self.name = dict[@"name"];
self.icon = dict[@"icon"];
}

+ (instancetype)dataWithDicitonary:(NSDictionary *)dict {
YelloModel *model = [[YelloModel alloc] init];

model.name = dict[@"name"];
model.icon = dict[@"icon"];

return model;
}
@end
 

四.自定义xib界面加载数据 创建代理属性

#import <UIKit/UIKit.h>

// 头文件， 要尽量少的去导入别的头文件
@class YelloModel;

// 创建协议
@protocol YellowViewProtocol <NSObject>

- (void)yellowViewDidClicked;

@end

@interface YelloView : UIView


@property (nonatomic, strong) YelloModel *yellowModel;


// 定义了代理的属性
@property (nonatomic, assign) id<YellowViewProtocol> delegate;


@end
#import "YelloView.h"
#import "YelloModel.h"

@interface YelloView()

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

@property (weak, nonatomic) IBOutlet UILabel *labe;
@property (weak, nonatomic) IBOutlet UIButton *button;

@end

@implementation YelloView

- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {

}

return self;
}


// 点击下载按钮调用的方法
- (IBAction)didClickDownLoadButton:(id)sender {


// 通知代理 respondsToSelector 它会检测， 代理有没有实现 yellowViewDidClicked 方法
// 如果不这么写， 代理者没有实现yellowViewDidClicked 方法， 就会崩掉
if ([self.delegate respondsToSelector:@selector(yellowViewDidClicked)]) {
[self.delegate yellowViewDidClicked];
}
}

- (void)setYellowModel:(YelloModel *)yellowModel {
// 先赋值
_yellowModel = yellowModel;

// 再进行赋值
self.imageView.image = [UIImage imageNamed:yellowModel.icon];

self.labe.text = yellowModel.name;
}


@end

#import "ViewController.h"
#import "YelloModel.h"
#import "YelloView.h"

@interface ViewController ()<YellowViewProtocol>

@property (nonatomic, strong) NSMutableArray *dataArray;

@end

@implementation ViewController

// 懒加载
- (NSArray *)dataArray {
if (nil == _dataArray) {

// 实例化 数组
_dataArray = [NSMutableArray array];

// 1. 读取plist 文件路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];

// 2. 读取plist内容到数组
NSArray *tempArray = [NSArray arrayWithContentsOfFile:path];

// 想把tempArray数组里面的字典换成 YelloModel

NSInteger count = tempArray.count;

for (int i = 0; i < count; i++) {
// 取出字典
NSDictionary *dict = tempArray[i];

// 1. 实例化 YellowModel 对象
// YelloModel *model = [[YelloModel alloc] init];
// model.name = dict[@"name"];
// model.icon = dict[@"icon"];
// [model setDataWith:dict];

YelloModel *model = [YelloModel dataWithDicitonary:dict];

// 2. 把model 对象添加到dataArray
[_dataArray addObject:model];
}


}

return _dataArray;
}

- (void)viewDidLoad {
[super viewDidLoad];


// 最好放到一个方法里
//[self setupUI];

[self setYellowView];

// self.dataArray; 通过 dataArray的get方法， 得到dataArry对象


}

- (void)setYellowView {
// 列数
int column = 3;

// yellowView的宽高
CGFloat yellowViewWidht = 90;
CGFloat yellowViewHeight = 95;

// 计算边距
CGFloat margin = (self.view.frame.size.width - column * yellowViewWidht) / (column +1);

// 定义索引
int index = 0;

for (int i = 0; i < self.dataArray.count; i++) {
// 行的索引
int rowIndex = i / column;

// 列的索引
int columnIndex = i % column;


// yellowView 的x
CGFloat yellowViewX = (columnIndex + 1) * margin + columnIndex * yellowViewWidht;

// yellowView 的y
CGFloat yellowViewY = (rowIndex + 1) * margin + rowIndex * yellowViewHeight;

// 1. 取得xib文件
NSArray *nibArray = [[NSBundle mainBundle] loadNibNamed:@"YellowView" owner:nil options:nil];

// 2. 取到实例化的view
YelloView *yellowView = nibArray.lastObject;


// 设置 控制器成为代理者
yellowView.delegate = self;

[yellowView setFrame:CGRectMake(yellowViewX, yellowViewY, yellowViewWidht, yellowViewHeight)];

YelloModel *model = self.dataArray[index++];



yellowView.yellowModel = model;

// 添加到控制器的view上
[self.view addSubview:yellowView];
}
}


- (void)yellowViewDidClicked {


// 1. 创建view
UIView *coverView = [[UIView alloc] initWithFrame:self.view.frame];

// 2. 设置颜色
coverView.backgroundColor = [UIColor blackColor];

// 3. 设置透明度
// alpha 透明度的意思， 从0 - 1 0 表示完全透明， 1 完全不透明
coverView.alpha = 0;

// 4. 添加label
CGFloat superViewHeight = self.view.frame.size.height;

UILabel *downLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, superViewHeight/2, self.view.frame.size.width, 20)];

// 设置文字
downLabel.text = @"下载中...";

// 文字居中
downLabel.textAlignment = NSTextAlignmentCenter;

// 设置文字颜色
downLabel.textColor = [UIColor whiteColor];

// 添加到coverView
[coverView addSubview:downLabel];

// 添加coverView 到 superView
[self.view addSubview:coverView];


[UIView animateWithDuration:1 // 执行动画的时间
delay:0 // 这个动画延迟多长时间后执行
options:UIViewAnimationOptionCurveEaseInOut // 动画的效果
animations:^{ // 执行动画

coverView.alpha = 0.6;

} completion:^(BOOL finished) { // 完成动画后执行

[UIView animateWithDuration:1 delay:2 options:UIViewAnimationOptionCurveEaseInOut animations:^{
coverView.alpha = 0;

} completion:nil];

}];
}


@end

执行效果图