IOS之UI--小实例项目--添加商品和商品名

UI综合小实例

• 内容大纲：
  • 1、懒加载
  • 2、项目动态图展示
  • 3、项目思路
  • 4、源代码

1、懒加载

通过重写set-get方法中的get方法，并结合if语句实现有且仅有一次的懒加载

2、项目动态图展示

3、项目思路

前期准备工作：资源拷贝，storyboard添加按钮的控件，按钮连线略过 直接上代码思路：

商品图片icon+商品名称label -> 都添加到UIView的实例对象imageView上
imageView逐步按照九宫格算法添加到较大的UIView的实例对象imageViews上
imageViews添加到默认就有的父控件View上。

另外九宫格算法：就是获取(x,y)坐标的算法。不难，好好思考。
最后就是数据加载和优化上使用前面提到的懒加载。

4、源代码

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *removeBtn;
@property (weak, nonatomic) IBOutlet UIButton *addBtn;

@property (weak, nonatomic) IBOutlet UIView *shopsView;

@property (nonatomic,assign)float viewWidth;
@property (nonatomic,assign)float viewHeight;

@property (nonatomic,strong)NSArray *shops;

@end

@implementation ViewController

-(NSArray*) shops{
    
    if (_shops == nil) {
        _shops = @[
                   @{
                       @"icon" : @"danjianbao",
                       @"name" : @"单肩包"
                       },
                   @{
                       @"icon" : @"liantiaobao",
                       @"name" : @"链条包"
                       },
                   @{
                       @"icon" : @"qianbao",
                       @"name" : @"钱包"
                       },
                   @{
                       @"icon" : @"shoutibao",
                       @"name" : @"手提包"
                       },
                   @{
                       @"icon" : @"shuangjianbao",
                       @"name" : @"双肩包"
                       },
                   @{
                       @"icon" : @"xiekuabao",
                       @"name" : @"斜挎包"
                       }
                   ];
    }
    return _shops;
}

- (void)viewDidLoad {
    //获取View的宽和高
    self.viewWidth = self.shopsView.frame.size.width;
    self.viewHeight = self.shopsView.frame.size.height;
//    self.removeBtn.isEnabled = ;
    
}

//凡是涉及到九宫格的，肯定是和行和列号相关联系的。所以一开始就可以从行和列号开始下手
- (IBAction)add {
    
    /*=================抽离出常用的变量===================*/
    //图片的宽高
    NSInteger picWidth = 70;
    NSInteger picHeight = 70;
    //文字的宽高
    NSInteger txtWidth = 70;
    NSInteger txtHeight = 30;
    
    
    //创建一个商品和一段文字组合的父控件
    UIView *shopView = [[UIView alloc] init];
    
    //添加一个图片
    
    //1先获取行和列号(第几张，商品的索引->然后计算获取行和列)
    NSUInteger index = self.shopsView.subviews.count;
    NSLog(@"子控件的个数是：%lu",(unsigned long)index);
    //行号
    NSUInteger i = index % 3 ;
    //列号
    NSUInteger j = index / 3 ;
    
    NSLog(@"即将添加的子控件的位置：(%lu,%lu)",(unsigned long)i,(unsigned long)j);
    //求出x
    CGFloat x = i * self.viewWidth / 3.0;
    //求出y
    CGFloat y = j * self.viewHeight / 3.0;
    NSLog(@"即将添加的子控件的坐标：(%f,%f)",x,y);
    
    
    //将商品父控件添加到View中
    shopView.frame = CGRectMake(0, 0, 70, 100);
    //将这个商品父控件添加到shopsView
    [self.shopsView addSubview:shopView];
    
    NSDictionary* dic = self.shops[index];
    NSString* qianbao = dic[@"icon"];
    NSLog(@"%@",qianbao);
    NSString* text = dic[@"name"];
    NSLog(@"%@",text);
    
    UIImageView* iconView = [[UIImageView alloc] init];
    UIImage* image = [UIImage imageNamed:qianbao];
    iconView.image = image;
    iconView.frame = CGRectMake(x, y, picWidth, picHeight);
    [shopView addSubview:iconView];
    
    UILabel *nameLabel = [[UILabel alloc] init];
    nameLabel.textAlignment = NSTextAlignmentCenter;
    nameLabel.text = text;
    nameLabel.frame = CGRectMake(x, y+70, txtWidth, txtHeight);
    [shopView addSubview:nameLabel];
    
    

    self.addBtn.enabled = (self.shopsView.subviews.count < 6);
    self.removeBtn.enabled = (self.removeBtn.subviews.count > 0);

}
/*===============设置remove按钮的状态===============*/

//添加一个图片和文字的方法
//-(ui)
- (IBAction)remove {
    //这里需要设置，如果没有商品，就应该取消按钮的可点击状态
    [self.shopsView.subviews.lastObject removeFromSuperview];
    self.removeBtn.enabled = (self.shopsView.subviews.count != 0);
    self.addBtn.enabled = (self.shopsView.subviews.count < 6);
}

@end