IOS九宫格设计源码(外加添加删除功能)

设计思路

1.先动态添加一个UIView用于存放所有的格子(每一个格子用UIImageView代替)

2.动态生成格子,每一个格子都有不同的frame,设置每一个格子的frame是做九宫格的关键

3.我们可以总结的规律是每一行Y值不变,X值:(间距+宽度) * (个数 % 3)

3.1.每一列的规律是Y值(间距 + 高度) (个数/3),X值:(间距+宽度) (个数 % 3),X值不变

4.而间距的个数为(行的格子个数-1),行的每个间距大小是(1创建的UIView的宽度 减去行商品的个数乘以商品的宽度)然后除以间距的个数,表达式为marginy = (view1.frame.size.width - shopy 乘以 x) / (x-1);

5根据规律和margin值,我们就可以在循环中创建UIImageView了,表达式为for (int i=0,i<9,i++){imageview.frame = CGRectMake( i%x(marginx + shopx), i/x (marginy + shopy), shopx, shopy);}

以下是九宫格代码的实现(外加添加删除功能)

#import "ViewController.h"

@interface ViewController ()

//定义一个index记录已经使用的格子的数量
@property (nonatomic, assign) int index;

//定义一个变量记录九宫格所有格子的数量
@property (nonatomic, assign) int number;

//定义两个变量记录添加按钮的Tag值和删除按钮的Tag值
@property (nonatomic, assign) int addTag;
@property (nonatomic, assign) int delTag;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //创建九宫格容器
    [self designWithX:4 andY:4 andShopx:80 andShopy:80 andRectX:10 andRectY:200 andRectWidth:350 andRectHeight:350];

    //设置添加按钮
    [self addButtonWithRectX:50 andRectY:50 andRectWidth:70 andRectHeight:70 andNameNormal:@"add.png" andNameHighHighted:@"add_highlighted.png" andNameDisable:@"add_disabled.png" andTag:20 andAdd:YES];

    //设置删除按钮
    [self addButtonWithRectX:250 andRectY:50 andRectWidth:70 andRectHeight:70 andNameNormal:@"remove.png" andNameHighHighted:@"remove_highlighted.png" andNameDisable:@"remove_disabled.png" andTag:21 andAdd:NO];

    //初始化当前已使用的格子数量为0
    _index = 0;
    //初始化的时候因为未有格子被使用,_index的值为0,所以初始化要设置删除按钮不可用
    UIButton *btn2 =(UIButton *)[self.view viewWithTag:21];
    btn2.enabled =NO;
}

/**
 *  生成九宫格的方法
 *
 *  @param x         行存放商品的个数
 *  @param y         列存放商品的个数
 *  @param shopx     商品的宽
 *  @param shopy     商品的高
 *  @param rectX      容纳商品的UIView的X轴坐标
 *  @param rectY      容纳商品的UIView的Y轴坐标
 *  @param rectWidth  容纳商品的UIView的宽
 *  @param rectHeight 容纳商品的UIView的高
 */
- (void)designWithX:(int)x andY:(int)y andShopx:(int)shopx andShopy:(int)shopy
           andRectX:(int)rectX andRectY:(int)rectY andRectWidth:(int)rectWidth andRectHeight:(int)rectHeight
{
    _number = x * y;

    //先创建一个view容器
    CGRect rect = CGRectMake(rectX, rectY, rectWidth, rectHeight);
    UIView * view1 = [[UIView alloc]initWithFrame:rect];
    view1.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:view1];

    //定义行之间的边距和列之间的边距
    int marginx =0 ,marginy = 0;
    marginx = (view1.frame.size.width - shopx * x) / (x-1);
    marginy = (view1.frame.size.height - shopy * y) / (y-1);

    //利用for循环排列九宫格
      for (int i=0; i<_number; i++) {
        //创建存放商品的Image View,长和宽分别是shopx,shopy
        UIImageView *imageview = [[UIImageView alloc]init];
        imageview.frame = CGRectMake( i%x * (marginx + shopx), i/x * (marginy + shopy), shopx, shopy);
        imageview.backgroundColor = [UIColor blackColor];
        //给每个imageview的Tag赋值
        imageview.tag = i+1;
        [view1 addSubview:imageview];

    }


}

//添加按钮和删除按钮的单击方法
- (void)addOrDelete:(UIButton *)btn1
{
    //根据传进来的Tag值判断当前点击的是添加按钮还是删除按钮
    if (btn1.tag == _addTag)
    {
        //点击添加,使用了一个格子,_index要加1
        _index++;

    //因为UIImageView的Tag值和_index保持一致,所以我们可以根据_index的值拿到指定的UIImageView,给这个UIImageView加图片
        NSString *path = [[NSBundle mainBundle]pathForResource:@"danjianbao.png" ofType:nil];
        UIImage *imageshop = [[UIImage alloc]initWithContentsOfFile:path];
        UIImageView *view2 =(UIImageView *)[self.view viewWithTag:_index];
        view2.image = imageshop;
    }
    else if(btn1.tag == _delTag)
    {
        UIImageView *view2 =(UIImageView *)[self.view viewWithTag:_index];
        view2.image =nil;
        _index--;
    }
    else return;

    //若当前没有格子被使用即_index的值为0的时候,则删除按钮不可用
    if (_index == 0) {
        UIButton *btn2 =(UIButton *)[self.view viewWithTag:21];
        btn2.enabled =NO;
    }
    else
    {
    UIButton *btn2 =(UIButton *)[self.view viewWithTag:21];
       btn2.enabled =YES;
    }

    //若当前的所有格子都用完之后(即_index等与_number)的时候,添加按钮不可用
    if(_index ==_number)
    {
        UIButton *btn3 =(UIButton *)[self.view viewWithTag:20];
        btn3.enabled =NO;
    }
    else
    {
        UIButton *btn3 =(UIButton *)[self.view viewWithTag:20];
        btn3.enabled =YES;
    }
}

/**
 *  动态生成按钮并设置正常,高亮和不可用状态下显示的图片,并添加单击事件,要注意接收得图片名称必须加上后缀
 *
 *  @param x               按钮的x轴坐标
 *  @param y               按钮的y轴坐标
 *  @param width           按钮的宽度
 *  @param height          按钮的高度
 *  @param nameNormal      按钮在正常状态下的图片
 *  @param nameHighLighted 按钮在高亮状态下显示的图片
 *  @param nameDiszble     按钮在不可按的状态下显示的图片
 *  @param myTag           按钮的Tag值
 *  @param buttonTag       是否为添加按钮
 */
- (void)addButtonWithRectX:(int)x andRectY:(int)y andRectWidth:(int)width andRectHeight:(int)height andNameNormal:(NSString *)nameNormal andNameHighHighted:(NSString *)nameHighLighted andNameDisable:(NSString *)nameDiszble andTag:(int)myTag andAdd:(BOOL)buttonTag
{
    //创建一个UIButton
    UIButton *btn1 = [[UIButton alloc]init];
    //自定义UIButton的fram
    btn1.frame = CGRectMake(x, y, width, height);
    //设置UIButton的Tag值
    btn1.tag = myTag;

    //设置UIButton正常状态下显示的image图片
    NSString *path1 = [[NSBundle mainBundle]pathForResource:nameNormal ofType:nil];
    UIImage *imageNormal = [[UIImage alloc]initWithContentsOfFile:path1];
    [btn1 setImage:imageNormal forState:UIControlStateNormal];

    //设置UIButton高亮状态下显示的image图片
    NSString *path2 = [[NSBundle mainBundle]pathForResource:nameHighLighted ofType:nil];
    UIImage *imageHighLighted = [[UIImage alloc]initWithContentsOfFile:path2];
    [btn1 setImage:imageHighLighted forState:UIControlStateHighlighted];

    //设置UIButton不可按状态下显示的image图片
    NSString *path3 = [[NSBundle mainBundle]pathForResource:nameDiszble ofType:nil];
    UIImage *imageDisable = [[UIImage alloc]initWithContentsOfFile:path3];
    [btn1 setImage:imageDisable forState:UIControlStateDisabled];

    //将按钮添加到view中
    [self.view addSubview:btn1];
    //动态给按钮添加单击事件
    [btn1 addTarget:self action:@selector(addOrDelete:) forControlEvents:UIControlEventTouchUpInside];

    //将按钮的Tag值保存到全局变量中,在addOrDelete:方法中将会用到
    if (buttonTag) {
        _addTag =myTag;
    }
    else
    {
        _delTag = myTag;
    }
}

@end