九宫格计算

作者: 飞翔的道长 | 来源:发表于2016-03-09 23:17 被阅读457次
  • 列号的计算方法为当前要添加的位置索引和总列数取模(求余)
  • 行号的计算方法为当前要添加的位置索引和总列数取商(除法)
  • 计算思路

    • 利用控件的索引index计算出控件所在的行号和列好
    • 利用列号计算控件的x值
    • 利用行号计算控件的y值
- (void)add
{
    
    //定义容器的宽
    CGFloat shopW = 50;
    //定义容器的高
    CGFloat shopH = 70;
    //指定列数
    int clos = 3;
    //计算列间距(整体宽度减掉列数乘以单个容器的宽度再除以列数减一)
    CGFloat cloMargin = (self.shopsView.frame.size.width - clos * shopW) / (clos - 1);
    //行间距
    CGFloat rowMargin = 10;
    //索引
    NSUInteger index = self.shopsView.subviews.count;
    //列数(取模)
    NSInteger col = index % clos;
    //x坐标值(当前列数乘以容器的宽加列间距)
    CGFloat shopX = col * (shopW + cloMargin);
    
    //行数(取商)
    NSInteger row = index / clos;
    //y坐标值(当前列数乘以容器的高加行间距)
    CGFloat shopY = row * (shopH + rowMargin);
    
    UIView *shopView = [[UIView alloc] init];
    shopView.backgroundColor = [UIColor redColor];
    
    // 添加图片
    UIImageView *iconView = [[UIImageView alloc] init];
    iconView.image = [UIImage imageNamed:@"danjianbao"];
    iconView.frame = CGRectMake(0, 0, 50, 50);
    [shopView addSubview:iconView];
    
    // 添加文字
    UILabel *label = [[UILabel alloc] init];
    label.text = @"单肩包";
    label.frame = CGRectMake(0, 50, 50, 20);
    label.font = [UIFont systemFontOfSize:11];
    label.textAlignment = NSTextAlignmentCenter;
    [shopView addSubview:label];
    
    shopView.frame = CGRectMake(shopX, shopY, shopW, shopH);
    [self.shopsView addSubview:shopView];
}

相关文章

  • 九宫格算法

    //九宫格算法。 /* 计算步骤 1,确定每个app的宽和高 2,计算marginX,marginY, margi...

  • UI基础(二)—— 应用管理

    先介绍几个九宫格小算法算法 计算行索引NSInteger rowIndex = i / kColumn; 计算列索...

  • 九宫格的计算

    九宫格的计算就是要知道行数和列数

  • 详解自动布局(Masonry)实现九宫格

    以前写TimeLine中照片九宫格布局是直接计算frame,今天想用自动布局实现。 九宫格布局 使用自动布局,首先...

  • 指示器隐藏

    ##九宫格 -利用空间索引计算出控件所在的行号和列好 -利用列好计算X -利用行号计算Y ##HUB -其他说法,...

  • 九宫格 布局

    例子1 例子2 3.万能公式 计算九宫格高度

  • iOS(UI)

    ## 九宫格计算思路 - 利用控件的索引index计算出控件所在的行号和列号 - 利用列号计算控件的x值 - 利用...

  • UI基础4 九宫格计算 HUD Plist文件 Bundle

    九宫格计算思路 利用控件索引index计算出控件所在的行号和列号 利用列号计算控件的x值 利用行号计算控件的y值 ...

  • flutter九宫格看图加强版

    九宫格看图,效果如下图 获得每行显示的个数 计算高度

  • iOS回炉笔记整理1

    九宫格计算思路 利用控件的索引index计算出控件所在的行号和列号 利用列号计算控件的x值 利用行号计算控件的y值...

网友评论

    本文标题:九宫格计算

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