您的位置:首页 > 产品设计 > UI/UE

UI基础第三天(代码)

2016-05-23 07:47 435 查看

项目:应用管理

方法:

懒加载
测试数据
动态生成

实现:

在ViewController中声明属性data,重写get方法进行懒加载

@interface ViewController ()
//创建存储应用程序数据的数组
@property (nonatomic,strong) NSArray *data;
@end

//1.懒加载
-(NSArray*) data{
    if (_data == nil){
        //加载数据
        _data = [SSData arrayDate];
    }
    return _data;
}


封装数据模型
@interface SSData : NSObject
//应用图片
@property (nonatomic,copy) NSString *photo;
//应用名字
@property (nonatomic,copy) NSString *name;
//对象的构建方法
-(instancetype) initWithDic:(NSDictionary*)dic;
//类的构建方法
+(instancetype) dataWithDic:(NSDictionary*)dic;
//加载数据
+(NSArray*)arrayDate;
@end

@implementation SSData
//对象的构建方法
-(instancetype) initWithDic:(NSDictionary*)dic{
    if (self=[self init]) {
        self.photo = dic[@"icon"];
        self.name = dic[@"name"];
    }
    return  self;
}
//类的构建方法
+(instancetype) dataWithDic:(NSDictionary*)dic{
    return [[self alloc] initWithDic:dic];
}
//加载数据
+(NSArray*)arrayDate{
    
    NSBundle *bundle = [NSBundle mainBundle];
    //1.1获取路径
    NSString *path = [bundle pathForResource:@"app" ofType:@"plist"];
    //1.2加载数据
    NSArray *dataDic = [NSArray arrayWithContentsOfFile:path];
    //1.3创建可变数组
    NSMutableArray *dataArray = [NSMutableArray array];
    //1.4字典转模型
    for (NSDictionary *dic in dataDic) {
        SSData *data = [[SSData alloc] initWithDic:dic];
        [dataArray addObject:data];
    }
    return dataArray;
}
@end

用XIB搭建九宫格的一部分
         


创建UIView的子类关联XIB

@class SSData;
@interface SSView : UIView
@property (nonatomic,strong) SSData *data;
//新建子View
+(instancetype)buildView;
@end
#import "SSView.h"
#import "SSData.h"

@interface SSView()

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

//点击事件
- (IBAction)buttonClick:(UIButton*)sender;
@end

@implementation SSView

//新建子View
+(instancetype)buildView{
    
    NSBundle *bundle = [NSBundle mainBundle];
    SSView *view = [[bundle loadNibNamed:@"SSView" owner:nil options:nil] lastObject];
    return view;
}

//重写setter方法,初始化子控件
-(void)setData:(SSData *)data{
    //不要漏掉,漏掉在点击事件时调用就取不到数据
    _data = data;
    //添加应用图片
    self.imageView.image = [UIImage imageNamed:data.photo];
    //添加应用名称
    self.nameLabel.text = data.name;
}

//点击事件
- (IBAction)buttonClick:(UIButton*)sender {
    //下载时取消和用户的交互
    self.superview.userInteractionEnabled = NO;
    //提示正在下载
    UILabel *tipView = [[UILabel alloc] init];
    //self(自定义view).superview(控制器的根view)
    [self.superview addSubview:tipView];
    tipView.text = [NSString stringWithFormat:@"正在下载:%@",self.data.name];
    //frame
    CGFloat tipW = 200;
    CGFloat tipH = 25;
    CGFloat tipX = (self.superview.frame.size.width - tipW) / 2;
    CGFloat tipY = (self.superview.frame.size.height - tipH) / 2;
    tipView.frame = CGRectMake(tipX, tipY, tipW, tipH);
    //设置属性
    tipView.backgroundColor = [UIColor grayColor];
    tipView.textAlignment = NSTextAlignmentCenter;
    //透明度
    tipView.alpha = 0;
    //圆角
    tipView.layer.cornerRadius = 5;
    tipView.layer.masksToBounds = YES; //剪裁超过bounds的部分
    //动画效果
    [UIView animateWithDuration:1.0 animations:^{
        tipView.alpha = 0.9;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1.0 delay:3.0 options:UIViewAnimationOptionCurveLinear animations:^{
            tipView.alpha = 0;
        } completion:^(BOOL finished) {
            //从父view中移除
            [tipView removeFromSuperview];
            //下载完成后禁用
            sender.enabled = NO;
            //下载完成允许用户交互
            self.superview.userInteractionEnabled = YES;
        }];
    }];
}
@end


在ViewController中编写动态生成九宫格的方法

- (void)viewDidLoad {
[super viewDidLoad];
//2.测试数据
//NSLog(@"%@",self.data);

//3.动态生成九宫格
[self buildView];
}

//动态生成九宫格
-(void)buildView{

for (int i = 0; i < self.data.count; i++) {
//3.1.动态生成九宫格
//3.1.1.创建子view
SSView *view = [SSView buildView];
[self.view addSubview: view];

//3.1.2.计算frame
//子view的宽
CGFloat viewWidth = 100;
//子view的高
CGFloat viewHeight = 100;
//子view的横向间距  =  (父view的宽度- 3 * 子view的宽度) / 4
CGFloat viewMarginX = ( self.view.frame.size.width - 3 * viewWidth ) / 4;
//子view的纵向间距 =  20
CGFloat viewMarginY = 20;
//当前子view的行号 = 当前遍历到得索引值 / 总列数
NSInteger  viewRow = i / 3;
//当前子view的列号 = 当前遍历到得索引值 % 总列数
NSInteger viewColumn = i % 3;
//子view横坐标的公式 =  子view的横向间距  +  列号 * (子view的横向间距+ 子view的宽度)
CGFloat viewX = viewMarginX + viewColumn * (viewMarginY + viewWidth);
//子view纵坐标的公式 = 30 + 行号 * (子view的纵向间距+ 子view的高度)
CGFloat viewY = 30 + viewRow * (viewMarginY + viewHeight);
//给子view的frame赋值
view.frame = CGRectMake(viewX, viewY, viewWidth, viewHeight);

//3.2.获取数据
SSData *data = self.data[i];

//3.3.向九宫格添加数据
view.data = data;
}
}

测试结果

          
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息