iOS开发：九宫格灵活布局

实现一行不同格子数的九宫格布局。

预览

思路

• 手动添加UI控件
• 用除法和求余运算计算格子坐标

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    
    //parse the json file
    NSString* path = [[NSBundle mainBundle] pathForResource:@"LifeService" ofType:@"json"];
    NSData *jsonData = [[NSData alloc] initWithContentsOfFile:path];
    
    NSError *error;
    
    id jsonObj = [NSJSONSerialization JSONObjectWithData:jsonData
                                                 options:NSJSONReadingMutableContainers error:&error];
    
    if (!jsonObj || error)
        NSLog(@"JSON parse failed!");
    
    self.squareData = [jsonObj objectForKey:@"Record"];
    
    //set view background color
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    //setup the square layout
    for(int i = 0; i < square_count; i++)
    {
        //comput the row and col index
        int row = i/col_count;
        int col = i%col_count;
        
        //comput the size and position
        float block_size = (self.view.frame.size.width - block_space*col_count)/col_count;
        float x = block_space/2 + col*(block_size + block_space);
        float y = TOP_MARGIN + block_space/2 + row*(block_size + block_space);
        
//        NSLog(@"%f %f", x, y);
        
        UIView *block = [[UIView alloc] init];
        block.frame = CGRectMake(x, y, block_size, block_size);
        block.backgroundColor = [UIColor whiteColor];
        
        UIButton *button = [[UIButton alloc] init];
        button.frame = CGRectMake(0, 0, block_size, block_size);
        
        //set button image
        [button setImage:[UIImage imageNamed:[self.squareData[i] objectForKey:@"imgLogo"]] forState:UIControlStateNormal];
        
        [button addTarget:self action:@selector(onClick:) forControlEvents:UIControlEventTouchUpInside];
        
        //set button title
        [button setTitle:[self.squareData[i] objectForKey:@"title"] forState:UIControlStateNormal];
//        [button setBackgroundColor:[UIColor greenColor]];

        [block addSubview:button];
        
        //add the button to the block
        [self.view addSubview:block];
    }
}

源代码下载

csdn： 九宫格

github： SquareLayout