一、item宽度相等
1.1、按钮实现
- 确定所需的一列item的最大个数
static NSInteger const corlmax = 4;
- 确定item之间的间距
static CGFloat const margin = 20;
- 计算item的宽度
[UIScreen mainScreen].bounds.size.width-(corlmax - 1) * margin) / corlmax
- 循环创建按钮，根据按钮将要分布所在的行和所在的列确定x,y
int row=i/corlmax;//所在行
int col=i%corlmax;//所在列
CGFloat x= (itemWH+margin)col;
CGFloat y =(itemWH+margin)row;
按钮的总行数： Rows = (count - 1) / cols + 1
按钮的总宽度：width=总列数一个宽度+（总列数-1）间距
按钮的总高度：height=总行数一个宽度+（总行数-1）间距
#import "ViewController.h"
static NSInteger const corlmax = 4;
static CGFloat const margin = 20;
#define itemWH ([UIScreen mainScreen].bounds.size.width-(corlmax - 1) * margin) / corlmax
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
for (int i = 0; i < 10; i++) {
int row=i/corlmax;//所在行
int col=i%corlmax;//所在列
//创建按钮
UIButton *btn= [UIButton buttonWithType:UIButtonTypeCustom];
btn.backgroundColor=[UIColor redColor];
CGFloat x= (itemWH+margin)*col;
CGFloat y =(itemWH+margin)*row;
btn.frame=CGRectMake(x, y, itemWH, itemWH);
[self.view addSubview:btn];
}
}
1.2、UICollectionview实现
#import "ViewController.h"
static NSInteger const cols = 4;
static CGFloat const margin = 10;
#define itemWH ([UIScreen mainScreen].bounds.size.width - 20-(cols - 1) * margin) / cols
static NSString * const ID = @"cell";
@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property (nonatomic, weak) UICollectionView *collectionView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 设置item尺寸
layout.itemSize = CGSizeMake(itemWH, itemWH);
layout.minimumInteritemSpacing = margin;
layout.minimumLineSpacing = margin;
// 创建UICollectionView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 375, 667) collectionViewLayout:layout];
[self.view addSubview:collectionView];
collectionView.backgroundColor=[UIColor whiteColor];
_collectionView = collectionView;
collectionView.dataSource = self;
collectionView.delegate=self;
collectionView.scrollEnabled = NO;
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 20;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 从缓存池取
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
cell.backgroundColor=[UIColor redColor];
return cell;
}
1.3、补充：根据item的个数动态确定collectionview高度
collectionView高度 = rows * itemWH
1.确定item的个数
NSInteger count = _squareItems.count;
2.获得collectionview的总行数
NSInteger rows = (count - 1) / cols + 1;
// Rows = (count - 1) / cols + 1，collectionview万能公式计算总行数
3.// 设置collectioView高度
self.collectionView.frame=CGRectMake(0, 0, 375, rows*itemWH);
二、item宽度不相等
2.1、标签实现
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
CGFloat linemargin = 15;
CGFloat itemmargin = 10;
CGFloat y = 50;
NSArray *arr = @[@"测试",@"测试测试",@"ceshiceshiceshi",@"cccc",@"dddffkkkkf",@"2344",@"rrrrr",@"ffffffffffff",@"0000",@"lopp[[[eoeoeeoro"];
CGRect lastFrame = CGRectZero;
for (int i=0; i<10; i++) {
UILabel *lable = [[UILabel alloc]init];
lable.text = arr[i];
lable.font = [UIFont systemFontOfSize:18];
CGFloat width = [self getWidthWithText:arr[i] height:40 font:18];
lable.backgroundColor = [UIColor redColor];
[self.view addSubview:lable];
if (i==0) {
lable.text = arr[i];
lable.frame = CGRectMake(0, y, width, 40);
}else{
CGFloat x = CGRectGetMaxX(lastFrame) + itemmargin;
if (x+width>[UIScreen mainScreen].bounds.size.width) {
x = 0;
y = CGRectGetMaxY(lastFrame)+linemargin;
}
lable.frame = CGRectMake(x, y, width, 40);
}
lastFrame = lable.frame;
}
}
//根据高度度求宽度 text 计算的内容 Height 计算的高度 font字体大小
-(CGFloat)getWidthWithText:(NSString *)text height:(CGFloat)height font:(CGFloat)font{
CGRect rect = [text boundingRectWithSize:CGSizeMake(MAXFLOAT, height)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:font]}
context:nil];
return rect.size.width;
}
2.2、collectionFlowout布局
import UIKit
protocol CustomFlowLayoutDelgate:AnyObject{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize
}
class CustomFlowLayout: UICollectionViewLayout{
weak var delegate:CustomFlowLayoutDelgate?
var attributes = [UICollectionViewLayoutAttributes]()
var itemSpacing = 0.0
var lineSpacing = 0.0
var sectionSpacing = 0.0
var rectHeight:CGFloat {
get{
return lastAttributes?.frame.maxY ?? 0
}
}
private var lastAttributes:UICollectionViewLayoutAttributes?
override var collectionViewContentSize: CGSize{
return CGSize(width: 0, height: lastAttributes?.frame.maxY ?? 1000.0)
}
override func prepare(){
attributes.removeAll()
var y: CGFloat = 0
var x:CGFloat = 0
guard let numberOfSection = self.collectionView?.numberOfSections else { return }
for i in 0 ..< numberOfSection {
//创建头部视图布局属性
let attrheader = UICollectionViewLayoutAttributes.init(forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, with: IndexPath(item: 0, section: i))
let size = self.delegate?.collectionView(self.collectionView!, layout: self, referenceSizeForHeaderInSection: i)
if let lastAttr = self.lastAttributes{
attrheader.frame = CGRectMake(0, lastAttr.frame.maxY + sectionSpacing, self.collectionView!.frame.width, size?.height ?? 0)
}else{
attrheader.frame = CGRectMake(0, 0, self.collectionView!.frame.width, 50)
}
self.attributes.append(attrheader)
lastAttributes = attrheader
let numberOfitem = self.collectionView!.numberOfItems(inSection: i)
//y = attrheader.frame.maxY
for j in 0 ..< numberOfitem{
let indexPath = IndexPath(item: j, section: i)
//创建cell视图布局属性
let attr = UICollectionViewLayoutAttributes.init(forCellWith: indexPath)
let size = self.delegate?.collectionView(self.collectionView!, layout: self, sizeForItemAt:indexPath)
attr.frame.size.width = size!.width
attr.frame.size.height = size!.height
if( lastAttributes?.representedElementKind == UICollectionView.elementKindSectionHeader){
x = 0
y = lastAttributes?.frame.maxY ?? 0
attr.frame.origin.x = x
attr.frame.origin.y = y
}else{
x = (lastAttributes?.frame.maxX ?? 0) + self.itemSpacing
if x + attr.frame.width > self.collectionView!.bounds.width {
x = 0
y = (lastAttributes?.frame.maxY ?? 0) + self.lineSpacing
}
attr.frame.origin.x = x
attr.frame.origin.y = y
}
lastAttributes = attr
self.attributes.append(attr)
}
}
}
public override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? // return an array
{
return self.attributes
}
// override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
// return nil
// }
}
