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的子空間中添加相應的圖檔資訊、圖檔描述、按鍵名稱，就可以得到開始所看到的效果；