一、item寬度相等
1.1、按鈕實現(xiàn)
- 確定所需的一列item的最大個數(shù)
static NSInteger const corlmax = 4;
- 確定item之間的間距
static CGFloat const margin = 20;
- 計算item的寬度
[UIScreen mainScreen].bounds.size.width-(corlmax - 1) * margin) / corlmax
- 循環(huán)創(chuàng)建按鈕睹限，根據(jù)按鈕將要分布所在的行和所在的列確定x,y
int row=i/corlmax;//所在行
int col=i%corlmax;//所在列
CGFloat x= (itemWH+margin)col;
CGFloat y =(itemWH+margin)row;
按鈕的總行數(shù)： Rows = (count - 1) / cols + 1
按鈕的總寬度：width=總列數(shù)一個寬度+（總列數(shù)-1）間距
按鈕的總高度：height=總行數(shù)一個寬度+（總行數(shù)-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;//所在列
//創(chuàng)建按鈕
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實現(xiàn)
#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];
// 設(shè)置item尺寸
layout.itemSize = CGSizeMake(itemWH, itemWH);
layout.minimumInteritemSpacing = margin;
layout.minimumLineSpacing = margin;
// 創(chuàng)建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庐舟、補(bǔ)充：根據(jù)item的個數(shù)動態(tài)確定collectionview高度
collectionView高度 = rows * itemWH
1.確定item的個數(shù)
NSInteger count = _squareItems.count;
2.獲得collectionview的總行數(shù)
NSInteger rows = (count - 1) / cols + 1;
// Rows = (count - 1) / cols + 1，collectionview萬能公式計算總行數(shù)
3.// 設(shè)置collectioView高度
self.collectionView.frame=CGRectMake(0, 0, 375, rows*itemWH);
二、item寬度不相等
2.1、標(biāo)簽實現(xiàn)
- (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;
}
}
//根據(jù)高度度求寬度 text 計算的內(nèi)容 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 {
//創(chuàng)建頭部視圖布局屬性
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)
//創(chuàng)建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
// }
}
