iOS九宫格布局

作者: wuhao丶 | 来源:发表于2017-06-14 14:22 被阅读2900次

    本文要跟大家分享的是一个简单九宫格算法,可以帮你自动计算间距,对控件(Button/Label/imageView...)或view进行有序排列。Demo

    由于可以定义列数/宽高,请自行设计应用场景。

    推荐(这才是主要目的,哈哈):好用的分类集合(让开发更简单) 

    示例

    代码解读

    一、首先在控制器中定义几个宏(图1)

    图1 宏

    宽度:定义将要添加的这些控件的宽度。

    高度:定义将要添加的这些控件的高度。

    列数:你想让这些控件排成几列。

    ps:这里所说的控件也可以是view。

    二、九宫格形式添加控件 ,以添加图片为例(图2)

    图2 九宫格形式

    1. 代码要放在一个for循环里

    循环的次数代表将要创建图片个数,不要忘了这个for循环

    for (int i = 0; i < pictures.count; i++)

    2. 首先创建控件,并添加到视图上

    UIImageView *imageView = [[UIImageView alloc] init];

    imageView.image = [UIImage imageNamed:pictures[i]];

    [self.view addSubview:imageView];

    3. 然后计算本张图片应该放在第几行和第几列。

    NSInteger row = i / COL_COUNT;

    NSInteger col = i % COL_COUNT;

    4. 计算图片平均排列的间距

    CGFloat margin = (self.view.bounds.size.width - (PIC_WIDTH * COL_COUNT)) / (COL_COUNT + 1);

    5. 计算图片所在的x和y坐标

    CGFloat picX = margin + (PIC_WIDTH + margin) * col;

    CGFloat picY = margin + (PIC_HEIGHT + margin) * row;

    6. 定义这张图片的frame

    imageView.frame = CGRectMake(picX, picY, PIC_WIDTH, PIC_HEIGHT);


    至此九宫格形式添加完毕,其中的图片内容可以是网络加载或本地加载。

    控制器初始化时把图片放到一个数组里,控件的总数根据这个数组得到。

    我做了一个本地加载图片的Demo


    github地址:https://github.com/remember17 

    相关文章

      网友评论

      • 9808f2c53707:加点触控加点算法,一个消消乐就到手了:stuck_out_tongue:
        wuhao丶:@万里皓月25 :smiley:说的不错

      本文标题:iOS九宫格布局

      本文链接:https://www.haomeiwen.com/subject/aqzkqxtx.html