记录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_CustomizeView class]
forCellWithReuseIdentifier:CustomizeCelliIdentify];
- 定义的一些值
static NSString *CustomizeCelliIdentify = @"CustomizeCelliIdentify";
static const CGFloat kLineSpacing = 5.f; //列间距 |
static const CGFloat kItemSpacing = 8.f; //item之间的间距 --
static const CGFloat kCellMargins = 5.f; //左右缩进
static const NSInteger kRowNumber = 4; //列数
static const CGFloat kCellHeight = 80.f; //Cell高度
- 常用的协议方法
//MARK: - UICollectionDatasoure
//显示几个section
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
//每个section中显示多个item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 12;
}
//配置单元格的方法
- (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;
return cell;
}
//MARK: - UICollectionDelegate
//每个单元格的大小size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake((SCREEN_WIDTH-kItemSpacing*(kRowNumber-1))/kRowNumber, kCellHeight);
}
- 以上代码写出的效果如下:
我是效果~~~
以上代码,可以看到我设置item行间距是8,列间距是5,我还想设置左右的缩进.就要用到其他的协议方法.
重点来了~~~
-
调整item之间行 行(横)间距
图是拿的别人😢
调用方法如下:
UICollectionViewFlowLayout的minimumInteritemSpacing(推荐这个,尽量少用协议)协议方法
//每个item之间的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return kItemSpacing;
}
-
调整item之间的 列(纵)间距
图是拿的别人😢
调用方法如下:
UICollectionViewFlowLayout的minimumLineSpacing(推荐这个,尽量少用协议)协议方法
//每个item之间的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return kLineSpacing;
}
- 调整item 的大小
UICollectionViewFlowLayout的itemSize协议方法
//每个单元格的大小size
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(width,height);
}
-
调整内容的边距(cell的左右上下缩进)
图是拿的别人😢
UICollectionViewFlowLayout的sectionInset协议方法:
//边距设置:整体边距的优先级，始终高于内部边距的优先级
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(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 estimatedItemSize NS_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;
我加上内容的整体边距(缩进)之后,效果如下:
我是有缩进的效果~
结语:
记录就到这里了,collectionview中item的间距应该都全了.以后再也不愁忘记了 ~~
