iOS学习笔记——第四天

iOS学习笔记——第四天

今日学习概述

今日接着完善昨日购物车的功能，主要学习四块内容：添加用于显示图片和文字的UIImageView和UILabel、设置数据、数据的存储和自定义控件。

添加用于显示图片和文字的UIImageView和UILabel

代码如下

//5.创建商品的UIImageView对象
    UIImageView *iconView = [[UIImageView alloc] init];
    iconView.frame = CGRectMake(0, 0, width, width);
    iconView.backgroundColor = [UIColor greenColor];
    [imageView1 addSubview:iconView];
    //6.创建商品的UILabel对象
    UILabel *productsLabel = [[UILabel alloc] init];
    productsLabel.frame = CGRectMake(0, width, width, height - width);
    productsLabel.backgroundColor = [UIColor redColor];
    [imageView1 addSubview:productsLabel];

设置数据

方式一（不可取，数据相同）

 iconView.image = [UIImage imageNamed:@"4"];
    productsLabel.text = @"麦基";

方式二（不可取，太冗余）

switch (index) {
        case 0:
            iconView.image = [UIImage imageNamed:@"4"];
            productsLabel.text = @"麦基";
            break;
        case 1:
            iconView.image = [UIImage imageNamed:@"5"];
            productsLabel.text = @"杜兰特";
            break;
        case 2:
            iconView.image = [UIImage imageNamed:@"6"];
            productsLabel.text = @"库里";
            break;
        case 3:
            iconView.image = [UIImage imageNamed:@"7"];
            productsLabel.text = @"利文斯顿";
            break;
        case 4:
            iconView.image = [UIImage imageNamed:@"8"];
            productsLabel.text = @"伊戈达拉";
            break;
        case 5:
            iconView.image = [UIImage imageNamed:@"9"];
            productsLabel.text = @"博古特";
            break;
        default:
            break;
    }

方式三（数组：两个数据之间没有联系，容易出错）

NSArray *productsName = @[@"麦基", @"杜兰特", @"库里", @"利文斯顿", @"伊戈达拉", @"博古特"];
    NSArray *imageName = @[@"4", @"5", @"6", @"7", @"8", @"9"];
    iconView.image = [UIImage imageNamed:imageName[index]];
    productsLabel.text = productsName[index];

方式四(数组+字典)

 NSArray *dataArr = @[
                                         @{@"name":@"麦基", @"icon":@"4"},
                                         @{@"name":@"杜兰特", @"icon":@"5"},
                                         @{@"name":@"库里", @"icon":@"6"},
                                         @{@"name":@"利文斯顿", @"icon":@"7"},
                                         @{@"name":@"伊戈达拉", @"icon":@"8"},
                                         @{@"name":@"博古特", @"icon":@"9"},
                                         ];
    NSDictionary *dic = dataArr[index];
    iconView.image = [UIImage imageNamed:dic[@"icon"]];
    productsLabel.text = dic[@"name"];

效果图如下：

//方式五（懒加载）
在数据用到的时候加载，并且只加载一次。
首先定义一个全局变量（记得用strong）

@property(nonatomic, strong) NSArray *dataArr;

然后重写get方法实现懒加载。

- (NSArray *) dataArr{
    if(_dataArr == nil){
        self.dataArr = @[
                        @{@"name":@"麦基", @"icon":@"4"},
                        @{@"name":@"杜兰特", @"icon":@"5"},
                        @{@"name":@"库里", @"icon":@"6"},
                        @{@"name":@"利文斯顿", @"icon":@"7"},
                        @{@"name":@"伊戈达拉", @"icon":@"8"},
                        @{@"name":@"博古特", @"icon":@"9"},
                        ];
    }
    return _dataArr;
}

懒加载的作用

• 用到的时候再加载
• 全局只会被加载一次
• 全局都可以使用

懒加载的过程

• 重写成员变量的get方法
• 在get方法中判断：
  1> 如果为空，加载数据
  2> 如果不为空，就直接返回数据

数据的存储

直接将数据写在代码里面，不是一种合理的做法。如果数据经常修改，就要经常翻开对应的代码进行修改，造成代码扩展性低。因此，可以考虑将经常变动的数据放在文件中进行存储，程序启动后从文件中读取最新的数据。如果要变动数据，直接修改数据文件即可，不用修改代码。一般可以使用属性列表文件存储NSArray或者NSDictionary之类的数据，这种“属性列表文件”的扩展名是plist，因此也称为“plist文件”。

写入plist文件

NSArray *personalInfo = @[
                                                  @{@"name":@"cos", @"age":@22},
                                                  @{@"name":@"curry", @"age":@30},
                                                  @{@"name":@"kobe", @"age":@41},
                                                  ];
        BOOL flag = [personalInfo writeToFile:@"/Users/cos/Desktop/personalInfo.plist" atomically:YES];
        if (flag){
            NSLog(@"写入成功");
        }

从plist文件中读取数据

        NSArray *personalInfo = [NSArray arrayWithContentsOfFile:@"/Users/cos/Desktop/personalInfo.plist"];
        NSLog(@"%@",personalInfo);

结合到购物车

- (NSArray *) dataArr{
    if(_dataArr == nil){
        //加载数据
        //1.获取全路径
        NSString *dataPath = [[NSBundle mainBundle] pathForResource:@"productsData.plist" ofType:nil];
        self.dataArr = [NSArray arrayWithContentsOfFile:dataPath];
    }
    return _dataArr;
}

将字典转成模型
先创建商品类Products，再遍历数组进行赋值。

//字典转模型
        //创建临时数组
        NSMutableArray *tempArray = [NSMutableArray array];
        for(NSDictionary *dict in self.dataArr){
            //创建products对象
            Products *product = [[Products alloc] init];
            product.name = dict[@"name"];
            product.icon = dict[@"icon"];
            //把模型装入数组
            [tempArray addObject:product];
        }
        self.dataArr = tempArray;
    }

自定义控件

自己定义每个商品的控件（UIImageView+UILabel）。新建一个类，声明文件代码如下：

#import "ProductsView.h"
@interface ProductsView()
//图片控件
@property (nonatomic, weak) UIImageView *iconView;
//标题控件
@property (nonatomic, weak) UILabel *productsLabel;

@end

@implementation ProductsView
//初始化子控件（不要设置frame）
- (instancetype) init{
    if(self = [super init]){
        //1.创建商品的UIImageView对象
        UIImageView *iconView = [[UIImageView alloc] init];
        //iconView.frame = CGRectMake(0, 0, width, width);
        iconView.backgroundColor = [UIColor greenColor];
        [self addSubview:iconView];
        self.iconView = iconView;
        
        //2.创建商品的UILabel对象
        UILabel *productsLabel = [[UILabel alloc] init];
        //productsLabel.frame = CGRectMake(0, width, width, height - width);
        productsLabel.backgroundColor = [UIColor redColor];
        productsLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:productsLabel];
        self.productsLabel = productsLabel;
    }
    return self;
}

//布局子控件
- (void)layoutSubviews{
    //0.一定要调用super
    [super layoutSubviews];
    
    //1.获取当前控件尺寸
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    
    //2.设置子控件的frame
    self.iconView.frame = CGRectMake(0, 0, width, width);
    self.productsLabel.frame = CGRectMake(0, width, width, height - width);

}

@end

调用控件的代码如下：

  ProductsView *productsView = [[ProductsView alloc] init];
    productsView.frame = CGRectMake(x, y, width, height);
    [self.imageView addSubview:productsView];