IOS-九宫格坐标计算

九宫格在IOS中是很常都会用到，所以对于九宫格的算法也就必须要掌握，这方便以后的快速开发。在这里只是简单的实现，如何创建出所需要的视图界面。

一、开发出类似效果

二、分析

注意看每一个uiview的x和y的坐标。

三、实现

1、根据需要创建出九宫格的视图

- (void)viewDidLoad {
    [super viewDidLoad];

#define kSIZE     15    // 个数
#define kViewW    80    // 小视图的宽
#define kViewH    80    // 小视图的高
#define kColCount 3     // 一行的个数
#define kStart    20    // 状态栏的高度

    CGFloat marginX = (self.view.bounds.size.width - kColCount * kViewW) / (kColCount + 1);             // x间距   
    CGFloat marginY = 20;    // y间距
    for (int i=0; i<kSIZE; i++) {
        // 行
        // 0，1，2
        // 3，4，5
        // 6, 7, 8
        // 9, 10, 11
        int kLine = i % kColCount;
        
        //列
        // 0,3,6
        // 1,4,7
        // 2,5,8
        int kQueue = i / kColCount;

        int x = marginX + kLine * (kViewW+marginX);
        int y = kStart + marginY + kQueue * (kViewH+marginY);
        <span style="color: rgb(52, 149, 175); font-family: Menlo; font-size: 14px;">UIView</span> *viewImage = [[UIImageView alloc] initWithFrame:CGRectMake(x, y,kViewW, kViewH)];
        [viewImage setBackgroundColor:[UIColor blueColor]];
        [self.view addSubview:viewImage];

    }


}

效果：

2、在上面的UIView子控件中添加一个图片显示、一个描述以及一个按键

- (void)viewDidLoad {
    [super viewDidLoad];

#define kSIZE     15    // 个数
#define kViewW    80    // 小视图的宽
#define kViewH    80    // 小视图的高
#define kColCount 3     // 一行的个数
#define kStart    20    // 状态栏的高度

    CGFloat marginX = (self.view.bounds.size.width - kColCount * kViewW) / (kColCount + 1);             // x间距   
    CGFloat marginY = 20;    // y间距
    for (int i=0; i<kSIZE; i++) {
        // 行
        // 0，1，2
        // 3，4，5
        // 6, 7, 8
        // 9, 10, 11
        int kLine = i % kColCount;
        
        //列
        // 0,3,6
        // 1,4,7
        // 2,5,8
        int kQueue = i / kColCount;

        int x = marginX + kLine * (kViewW+marginX);
        int y = kStart + marginY + kQueue * (kViewH+marginY);
        UIView *viewImage = [[UIImageView alloc] initWithFrame:CGRectMake(x, y,kViewW, kViewH)];
        [viewImage setBackgroundColor:[UIColor blueColor]];
        [self.view addSubview:viewImage];

#pragma mark - 实现视图内部的细节
        // 1、UIImageView
        // 注意这个icon是嵌套在appView中的
        UIImageView *icon = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kViewW, 50)];
        icon.backgroundColor = [UIColor redColor];
        // 是添加到appsView这个视图中
        [appsView addSubview:icon];
        
        // 2、UILable
        // 注意lable的y可以通过icon.fram来获取
        UILabel *lable = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(icon.frame), kViewW, 15)];
        lable.backgroundColor = [UIColor yellowColor];
        [appsView addSubview:lable];
        
        // 3、UIButton
        UIButton *downl = [[UIButton alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(lable.frame), kViewW, 15)];
        downl.backgroundColor = [UIColor purpleColor];
        [appsView addSubview:downl];
    }


}

效果：

3、在相应的UIView的子空间中添加相应的图片信息、图片描述、按键名称，就可以得到开始所看到的效果；