iOS - UICollectionView cell间距调整

记录UICollectionView cell间距调整方法

啥东西不经常用就会忘记,以后要做好笔记. (⊙o⊙)

实例化了一个CollectionView

UICollectionViewFlowLayout*layout=[[UICollectionViewFlowLayout alloc]init];layout.minimumLineSpacing=kLineSpacing;layout.minimumInteritemSpacing=kItemSpacing;layout.scrollDirection=UICollectionViewScrollDirectionVertical;_cusCollectionView=[[UICollectionView alloc]initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,SCREEN_HEIGHT)collectionViewLayout:layout];_cusCollectionView.backgroundColor=[UIColor whiteColor];_cusCollectionView.delegate=self;_cusCollectionView.dataSource=self;[_cusCollectionView registerClass:[DC_CustomizeViewclass]forCellWithReuseIdentifier:CustomizeCelliIdentify];

定义的一些值

staticNSString*CustomizeCelliIdentify=@"CustomizeCelliIdentify";staticconstCGFloat kLineSpacing=5.f;//列间距 |staticconstCGFloat kItemSpacing=8.f;//item之间的间距 --staticconstCGFloat kCellMargins=5.f;//左右缩进staticconstNSInteger kRowNumber=4;//列数staticconstCGFloat kCellHeight=80.f;//Cell高度

常用的协议方法

//MARK: - UICollectionDatasoure//显示几个section-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView{return1;}//每个section中显示多个item-(NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section{return12;}//配置单元格的方法-(UICollectionViewCell*)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(NSIndexPath*)indexPath{DC_CustomizeView*cell=[collectionView dequeueReusableCellWithReuseIdentifier:CustomizeCelliIdentify forIndexPath:indexPath];cell.title=[NSString stringWithFormat:@"%td - %td",indexPath.section,indexPath.item];cell.editing=YES;returncell;}//MARK: - UICollectionDelegate//每个单元格的大小size-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath{returnCGSizeMake((SCREEN_WIDTH-kItemSpacing*(kRowNumber-1))/kRowNumber,kCellHeight);}

以上代码写出的效果如下:

我是效果~~~

以上代码,可以看到我设置item行间距是8,列间距是5,我还想设置左右的缩进.就要用到其他的协议方法.

重点来了~~~

调整item之间行行(横)间距

图是拿的别人😢

调用方法如下:

UICollectionViewFlowLayout的minimumInteritemSpacing(推荐这个,尽量少用协议)

协议方法

//每个item之间的间距-(CGFloat)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{returnkItemSpacing;}

调整item之间的列(纵)间距

图是拿的别人😢

调用方法如下:

UICollectionViewFlowLayout的minimumLineSpacing(推荐这个,尽量少用协议)

协议方法

//每个item之间的间距-(CGFloat)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{returnkLineSpacing;}

调整item 的大小

UICollectionViewFlowLayout的itemSize

协议方法

//每个单元格的大小size-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath{returnCGSizeMake(width,height);}

调整内容的边距(cell的左右上下缩进)

图是拿的别人😢

UICollectionViewFlowLayout的sectionInset

协议方法:

//边距设置:整体边距的优先级，始终高于内部边距的优先级-(UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{returnUIEdgeInsetsMake(kSectionMargin,kSectionMargin,kSectionMargin,kSectionMargin);//分别为上、左、下、右}

以上几个协议都出自UICollectionViewDelegateFlowLayout

//item的大小-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath;//内容整体边距设置-(UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;//item 列间距(纵)-(CGFloat)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;//item 行间距(横)-(CGFloat)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;//headerview的size-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;//footer的size-(CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

以上方法都有对应的属性:

@property(nonatomic)CGFloat minimumLineSpacing;@property(nonatomic)CGFloat minimumInteritemSpacing;@property(nonatomic)CGSize itemSize;@property(nonatomic)CGSize estimatedItemSizeNS_AVAILABLE_IOS(8_0);// defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:@property(nonatomic)UICollectionViewScrollDirection scrollDirection;// default is UICollectionViewScrollDirectionVertical@property(nonatomic)CGSize headerReferenceSize;@property(nonatomic)CGSize footerReferenceSize;@property(nonatomic)UIEdgeInsets sectionInset;

我加上内容的整体边距(缩进)之后,效果如下:

我是有缩进的效果~

作者：魏什么_多喝水

链接：//www.greatytc.com/p/40914d5708af

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。