UI基础九宫格

一：九宫格图片展示公式
    子view的横向间距 = (父view的宽度- 3 * 子view的宽度) / 4 子view的纵向间距 = 20

    当前子view的行号 = 当前遍历到得索引值 / 总列数 当前子view的列号 = 当前遍历到得索引值 % 总列数

    当前子view的列号 = 当前遍历到得索引值 % 总列数

    子view横坐标的公式 = 子view的横向间距 + 列号 * (子view的横向间距+ 子view的宽度)

    子view纵坐标的公式 = 50 + 行号 * (子view的纵向间距+ 子view的高度) 

 

二：代码示例：

#import "ViewController.h"

@interface ViewController ()
// 1,创建接受模型数据的数组
@property (nonatomic, strong) NSArray *appInfos;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 创建九宫格
    [self createView];
    
}

#pragma mark - 创建九宫格
- (void)createView
{
    // 1,
    // 1,1 列数
    int colnumCount = 3;
    CGFloat subViewWH= 100;
    CGFloat marginX = (self.view.frame.size.width - 3*subViewWH) / (colnumCount + 1);
    for (int i = 0; i<self.appInfos.count; i++) {
        
        // 计算行、列
        int row = i/colnumCount;
        int col = i%colnumCount;
        
        // 创建subView
        UIView *subView = [[UIView alloc] init];
//        subView.backgroundColor = [UIColor redColor];
        [self.view addSubview:subView];
        
        // 确定subView的frame
        CGFloat subViewX = marginX + (marginX + subViewWH) * col;
        CGFloat subViewY = 30 + (marginX + subViewWH) * row;
        subView.frame = CGRectMake(subViewX, subViewY, subViewWH, subViewWH);
#warning 将子控件添加到一个定义的view中的好处
        
        // 数据
        NSDictionary *appInfo = self.appInfos[i];
        // 创建子控件
        [self creatSubView:subView appInfo:appInfo];
        
        
    }
}

#pragma mark - 创建子控件
- (void)creatSubView:(UIView *)subView appInfo:(NSDictionary *)appInfo
{
    
    // 1,创建图片
    UIImageView *iconView = [[UIImageView alloc] init];
    [subView addSubview:iconView];
    
    // 1,1计算frame
    CGFloat iconViewWH = 60;
    CGFloat iconViewX = (subView.frame.size.width - iconViewWH) * 0.5;
    CGFloat iconViewY = 0;
    iconView.frame = CGRectMake(iconViewX, iconViewY, iconViewWH, iconViewWH);
    
    // 1,2添加数据
    iconView.image = [UIImage imageNamed:appInfo[@"icon"]];
    
    // 2,创建名称
    UILabel *titleView = [[UILabel alloc] init];
    [subView addSubview:titleView];
    
    titleView.textAlignment = NSTextAlignmentCenter;
//    titleView.numberOfLines = 0;
    titleView.font = [UIFont systemFontOfSize:13];

    
    CGFloat titleViewX = 0;
    CGFloat titleViewY = CGRectGetMaxY(iconView.frame);
    CGFloat titleViewW = subView.frame.size.width;
    CGFloat titleViewH = 20;
    titleView.frame = CGRectMake(titleViewX, titleViewY, titleViewW, titleViewH);
    
    titleView.text = appInfo[@"name"];
    
    // 3,创建按钮
    UIButton *downView = [UIButton buttonWithType:UIButtonTypeCustom];
    [subView addSubview:downView];
    [downView setTitle:@"下载" forState:UIControlStateNormal];
    [downView setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
    [downView setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted" ] forState: UIControlStateHighlighted];
#warning 设置按钮字体
    // 设置按钮字体
    downView.titleLabel.font = [UIFont systemFontOfSize:13];
    
    CGFloat downViewX = iconViewX;
    CGFloat downViewY = CGRectGetMaxY(titleView.frame);
    CGFloat downViewW = iconViewWH;
    CGFloat downViewH = 20;
    downView.frame = CGRectMake(downViewX, downViewY, downViewW, downViewH);
}

#pragma mark - 懒加载模型数据
- (NSArray *)appInfos
{
    if (!_appInfos) {
#warning NSBundle         //    NSLog(@"%@", NSHomeDirectory());


        // 1,重plist中读取数据
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        NSArray *appInfo = [NSArray arrayWithContentsOfFile:path];
        _appInfos = appInfo;
//        NSLog(@"%@", _appInfos);
    }
    return _appInfos;
}

@end

运行效果

NSBundle的位置在 /Users/apple/Library/Developer/CoreSimulator/Devices/41F08730-2536-41FA-AAFD-4988F77D34D2/data/Containers

    注意：Library为隐藏文件

    代码设置按钮的字体：btn.titleLabel.font