首页 > 代码库 > UI基础九宫格

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

UI基础九宫格