1、创建xib文件
想要随意改变view的大小必须设置view的size为FreeForm
2、在手机根目录下找到xib文件(开发时是xib文件,存到手机中是nib文件)
// 1.1> 找到应用的根目录
NSBundle *rootBundle = [NSBundle mainBundle]; // //NSLog(@"%@", [mainBundle bundlePath]);
// 1.2> 在应用程序根目录下取搜索对应的Xib(nib)文件
return [[rootBundle loadNibNamed:@"CZAppView" owner:nil options:nil] lastObject];
loadNibNamed方法返回的是一个数组(因为一个xib文件中可以创建多个控件,虽然在这里我们只有一个控件)
app的排列规律
appX = marginX + (appW + marginX) * colIndex; // colIndex: app所在的列索引
appY = marginTop + (appH + marginY) * rowIndex; // rowIndex:app所在行的索引
关键代码:
- (void)viewDidLoad {
[super viewDidLoad];
// 假设每行的应用的个数
int columns = 3;
// 获取控制器所管理的view的宽度
CGFloat viewWidth = self.view.frame.size.width;
// 每个应用的宽和高
CGFloat appW = 75;
CGFloat appH = 90;
CGFloat marginTop = 30; // 第一行距离顶部的距离
CGFloat marginX = (viewWidth - columns * appW) / (columns + 1);
CGFloat marginY = marginX; // 假设每行之间的间距与marginX相等
for (int i = 0; i < self.apps.count; i++) {
// 获取当前这个应用的数据字典
CZApp *appModel = self.apps[i];
// 创建view
CZAppView *appView = [CZAppView appView];
// 2.2 设置appView的frame属性
// 计算每个单元格所在的列的索引
int colIdx = i % columns;
// 计算每个单元格的行索引
int rowIdx = i / columns;
CGFloat appX = marginX + colIdx * (appW + marginX);
CGFloat appY = marginTop + rowIdx * (appH + marginY);
appView.frame = CGRectMake(appX, appY, appW, appH);
// 3. 将appView加到self.view(控制器所管理的那个view)
[self.view addSubview:appView];
// 设置数据
// 把模型数据设置给“自定义view”的model属性
// 然后重写model属性的set方法, 在set方法中解析模型对象中的属性, 并把属性值设置给自定义view的各个子控件
appView.model = appModel;
}
}
#import <UIKit/UIKit.h>
@class CZApp;
@interface CZAppView : UIView
@property (nonatomic, strong) CZApp *model;
// 为自定义view封装一个类方法, 这个类方法的作用就是创建一个view对象
+ (instancetype)appView;
@end
#import "CZAppView.h"
#import "CZApp.h"
@interface CZAppView ()
@property (weak, nonatomic) IBOutlet UIImageView *imgViewIcon;
@property (weak, nonatomic) IBOutlet UILabel *lblName;
@property (weak, nonatomic) IBOutlet UIButton *btnDownload;
- (IBAction)btnDownloadClick:(UIButton *)sender;
@end
@implementation CZAppView
+ (instancetype)appView
{
// 1. 通过xib创建每个应用(UIView)
// 通过动态加载xib文件创建里面的view
// 1.1> 找到应用的根目录
NSBundle *rootBundle = [NSBundle mainBundle]; // //NSLog(@"%@", [mainBundle bundlePath]);
// 1.2> 在应用程序根目录下取搜索对应的Xib(nib)文件
return [[rootBundle loadNibNamed:@"CZAppView" owner:nil options:nil] lastObject];
}
// 重写model属性的set方法
- (void)setModel:(CZApp *)model
{
// 先赋值
_model = model;
// 解析模型数据, 把模型数据赋值给UIView中的各个子控件
self.imgViewIcon.image = [UIImage imageNamed:model.icon];
self.lblName.text = model.name;
}
// 下载按钮的单击事件
- (IBAction)btnDownloadClick:(UIButton *)sender {
// 1. 禁用当前被点击的按钮
sender.enabled = NO;
// 2. 弹出一个消息提醒框(这个消息提醒框其实就是一个UILabel)
UILabel *lblMsg = [[UILabel alloc] init];
// 2.1 设置lblMsg的显示文字
lblMsg.text = @"正在下载...";
// 2.2 设置lblMsg的背景色
lblMsg.backgroundColor = [UIColor blackColor];
// 2.3 设置lblMsg的frame
CGFloat viewW = self.superview.frame.size.width;
CGFloat viewH = self.superview.frame.size.height;
CGFloat msgW = 200;
CGFloat msgH = 30;
CGFloat msgX = (viewW - msgW) / 2;
CGFloat msgY = (viewH - msgH) * 0.5;
lblMsg.frame = CGRectMake(msgX, msgY, msgW, msgH);
// 2.4 设置label的文字颜色
lblMsg.textColor = [UIColor redColor];
// 2.5 设置label居中显示
lblMsg.textAlignment = NSTextAlignmentCenter;
// 2.6 设置文字粗体
lblMsg.font = [UIFont boldSystemFontOfSize:17];
// 2.7 设置Label的透明度
lblMsg.alpha = 0.0; // 一开始把透明度设置为0, 然后通过动画的方式慢慢的改变透明度
// 2.8 设置Label为"圆角"
// 设置四个角的“半径”
lblMsg.layer.cornerRadius = 10;
// 把多余的部分裁剪掉
lblMsg.layer.masksToBounds = YES;
// 开启一个动画, 这个动画要执行1.5秒钟
[UIView animateWithDuration:1.5 animations:^{
// 动画代码: 将透明度变成0.6
lblMsg.alpha = 0.6;
} completion:^(BOOL finished) {
// 当上面的动画执行完毕以后执行这个代码
if (finished) {
// 这个代码的含义是, 隔一段时间后再启动另外一个动画
// 这个动画的执行时间是1.5秒钟, 但是这个动画会在1.0秒之后再开始执行
// UIViewAnimationOptionCurveLinear表示是匀速执行动画
[UIView animateWithDuration:1.5 delay:1.0 options:UIViewAnimationOptionCurveLinear animations:^{
// 这个动画的代码
lblMsg.alpha = 0;
} completion:^(BOOL finished) {
if (finished) {
// 当Label的透明度变成0以后, 再把这个Label从view中移除
[lblMsg removeFromSuperview];
}
}];
}
}];
// 3. 把lblMsg加到控制器所管理的那个view上
[self.superview addSubview:lblMsg];
}
@end