iOS之九宫格设计（纯代码）

ViewController.m 构建大体框架；添加按钮是视图；通过模型属性给商品视图中的控件赋值数据

#import "ViewController.h"
#import "ShopsView.h"
#import "ShopModel.h"


@interface ViewController ()

//增加按钮
@property (strong, nonatomic) UIButton *addBtn;

//删除按钮
@property (strong, nonatomic) UIButton *removeBtn;

//显示界面
@property (strong, nonatomic) UIView *bigView;

//商品信息小界面
@property (strong, nonatomic) ShopsView *shopsView;

//商品集合
@property (strong, nonatomic) NSMutableArray *shops;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view addSubview:self.addBtn];
    
    [self.view addSubview:self.removeBtn];
    
    [self.view addSubview:self.bigView];
    

}

#pragma mark - 懒加载

-(UIButton *)addBtn
{
    if (!_addBtn) {
        _addBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _addBtn.frame = CGRectMake(50, 50, 80, 80);
        [_addBtn setImage:[UIImage imageNamed:@"add"] forState:UIControlStateNormal];
        [_addBtn setImage:[UIImage imageNamed:@"add_highlighted"] forState:UIControlStateHighlighted];
        [_addBtn setImage:[UIImage imageNamed:@"add_disabled"] forState:UIControlStateDisabled];
        
        [_addBtn addTarget:self action:@selector(add) forControlEvents:UIControlEventTouchUpInside];
    }
    return _addBtn;
}




-(UIButton *)removeBtn
{
    if (!_removeBtn) {
        _removeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _removeBtn.frame = CGRectMake(self.view.bounds.size.width-130, 50, 80, 80);
        [_removeBtn setImage:[UIImage imageNamed:@"remove"] forState:UIControlStateNormal];
        [_removeBtn setImage:[UIImage imageNamed:@"remove_highlighted"] forState:UIControlStateHighlighted];
        [_removeBtn setImage:[UIImage imageNamed:@"remove_disabled"] forState:UIControlStateDisabled];
        
        [_removeBtn addTarget:self action:@selector(remove) forControlEvents:UIControlEventTouchUpInside];
    }
    return _removeBtn;
}


- (UIView *)bigView
{
    if (!_bigView) {
        _bigView = [[UIView alloc] init];
        _bigView.frame = CGRectMake(50, 150, self.view.frame.size.width-100, 400);
        _bigView.backgroundColor = [UIColor cyanColor];
    }
    return _bigView;
}


-(NSMutableArray *)shops
{
    if (!_shops) {
        //将解析的模型数组赋给shops数据源
        _shops = [NSMutableArray arrayWithArray:[ShopModel arrayWithDict]];
    }
    return _shops;
}


-(ShopsView *)shopsView
{
    if (!_shopsView) {
        _shopsView = [[ShopsView alloc] init];
    }
    return _shopsView;
}


#pragma mark - 方法实现
- (void)add
{
    //超出父控件范围，清除痕迹
    self.bigView.clipsToBounds = YES;
    
    //随机设置子控件的宽高
    CGFloat shopW = 70;
    CGFloat shopH = 90;
    
    //每行的列数
    int cols = 3;
    
    //根据父控件中子控件的数量设置下标
    NSUInteger index = self.bigView.subviews.count;
    
    
    ShopModel *shopModel = self.shops[index];
    
    //根据index设置子控件移动量
    CGFloat lengthX = (self.bigView.frame.size.width-cols*shopW)/(cols-1);
    CGFloat lengthY = 20;
    
    //设置子控件的x/y位置
    CGFloat shopX = (index % cols) * (lengthX + shopW);
    CGFloat shopY = (index / cols) * (lengthY + shopH);
    
    //实例化子控件对象，设置其frame的值，并添加到父控件中
    self.shopsView = [[ShopsView alloc] init];
    self.shopsView.backgroundColor = [UIColor orangeColor];
    self.shopsView.frame = CGRectMake(shopX, shopY, shopW, shopH);
    
    //通过模型属性给对应数据赋值
    UIImage *image = [UIImage imageNamed:shopModel.icon];
    self.shopsView.imageView.image = image;
    self.shopsView.label.text = shopModel.name;
    
    //将商品的小视图加载到父视图上
    [self.bigView addSubview:self.shopsView];
    
    //检查按钮的状态（可用、禁用）
    [self checkCount];
}

//从父视图上删除子视图（从最后往前删除）
- (void)remove
{
    
    [self.bigView.subviews.lastObject removeFromSuperview];
    
    [self checkCount];
}



- (void)checkCount
{
    //当子控件个数小于6（自己设计的一个值）的时候，增加按钮可用，反之禁用
    self.addBtn.enabled = (self.bigView.subviews.count < 6);
    //当子控件个数大于0的时候，删除按钮可用，反之禁用
    self.removeBtn.enabled = (self.bigView.subviews.count > 0);
}

在ShopsView.m中，构建商品视图，其中包含图片和文字

#import "ShopsView.h"

@implementation ShopsView

#pragma mark - 初始化
- (instancetype)init
{
    self = [super init];
    if (self) {
        [self addSubview:self.imageView];
        [self addSubview:self.label];
        
    }
    return self;
}

#pragma mark - 懒加载
-(UIImageView *)imageView
{
    if (!_imageView) {
        _imageView = [[UIImageView alloc] init];
        _imageView.backgroundColor = [UIColor redColor];
    }
    return _imageView;
}

-(UILabel *)label
{
    if (!_label) {
        _label = [[UILabel alloc] init];
        _label.backgroundColor = [UIColor yellowColor];
        _label.textAlignment = NSTextAlignmentCenter;
        _label.font = [UIFont systemFontOfSize:10];
    }
    return _label;
}

//这个方法专门用来布局子控件，一般在这里设置子控件的frame
//当控件本身的尺寸发生改变的时候，系统会自动调用这个方法
- (void)layoutSubviews
{
    [super layoutSubviews]; //一定要调用此方法
    
    CGFloat Width = self.frame.size.width;
    CGFloat Height = self.frame.size.height;
    self.imageView.frame = CGRectMake(0, 0, Width, Width);
    self.label.frame = CGRectMake(0, Width, Width, Height-Width);
}

在shopModel.m中，进行模型解析，返回一个存放模型对象的数组

#import "ShopModel.h"

@implementation ShopModel

//模型解析
- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        self.name = dict[@"name"];
        self.icon = dict[@"icon"];
    }
    return self;
}


//将解析的模型对象遍历添加到数组中存储
+ (NSMutableArray *)arrayWithDict
{

    NSString *path = [[NSBundle mainBundle] pathForResource:@"shops.plist" ofType:nil];
    NSArray *array = [NSArray arrayWithContentsOfFile:path];
    NSMutableArray *arrayM = [NSMutableArray array];
    for (NSDictionary *dic in array) {
        ShopModel *shop = [[ShopModel alloc] initWithDict:dic];
        [arrayM addObject:shop];
    }
    return arrayM;
}

商品增加满了的时候

 

商品删除为空的时候

 

PS：基本操作可以实现，有待改进的地方还有很多。

转载于:https://www.cnblogs.com/chixuedong/p/5239706.html