ios UICollectionViewController集合视图(三)

流式布局

由UICollectionViewFlowLayout类所提供的流式布局会在应用程序里创建出网格状的界面。他们有一些内置的属性,开发者既可以直接设置这些属性,也可以通过委托回调来提供属性的值。这些属性用来指定布局对象应该如何配置自己,才能把各条目适当的显示在屏幕上面。从最简单的角度来说,这些布局属性可以看作一份与几何特征有关的字典,他们描述了行间、缩进,以及条目之间的留白等特性。

1、滚动方向

scrollDirection属性决定了视图中的区段是水平排列还是垂直排列,每一个区段内的条目会根据可用的空间自动换行。iPhone竖屏模式的垂直空间要多于水平空间,所以布局下的每个区段都会显得比垂直布局下的区段更窄。

2、条目的尺寸以及行间距

itemSize属性可用来指定屏幕上每个条目的默认大小,就像下图的小方块那样。minimumLineSpacing及minimumInteritemSpacing属性规定了每个区段内的条目之间应该距离多远。行间距(line spacing)总是表示相邻两行之间的距离,在水平布局下行是垂直方向的,而在垂直布局下行则是水平方向的。比方说,在下图的左侧截图中,行间距指的就是S0(0)和S0(6)之间的距离,而在右侧的截图中,指的是S0(0)和S0(4)之间的距离。条目间距(item spacing)与行间距的延伸方向相互垂直,他表示相邻两个条目之间的空隙,例如S0(0)和S0(1)之间的距离,以及S0(1)和S0(2)之间的距离。
下图中,使用的是垂直流式布局。在左侧截图中,行间距与条目间距都是10个点。而在中间截图中,我们把行间距增大到50个点。这个间距出现在相邻两行条目之间,布局对象在排布各条目的时候,如果到了某一行的尾部,会把下一个条目摆在下一行开头。右侧截图把条目间距扩大为30点。条目间距表现为水平方向上的间距距离,也就是相邻两个条目之间的间隔距离。

开发者可以直接设置上述属性,如果这样做的话,所设定的值就会成为整个集合视图的默认值。另外,还可以在UICollectionViewFlowLayout协议的委托回调方法中以代码的形式来指定他们。在程序运行的时候指定这些值,要比直接设置默认的值更为精细,因为可以具体指定每个区段内每个条目的相关特征,而不是一次性的影响集合视图内的所有条目。下面的方法可用来指定条目的尺寸以及最小间距:
1、collectionview:layout:sizeForItemAtIndexPath:——该方法与itemSize属性相对应,不过他可以具体指定每个条目的尺寸。
2、collectionview:layout:minimumLineSpacingForSectionAtIndex:——该方法与minimumLineSpacing属性相对应,但是它可以具体控制每个区段内的最小行间距。
3、collectionview:layout:minimumInteritemSpacingForSectionAtIndex:——该方法与minimumInteritemSpacing属性相对应,然而他可以具体控制每个区段内的最小条目间距。
这三个方法中,第一个方法在开发中最容易用到。它使得开发者可以构建出条目大小各不相同的集合视图。

3、头部与尾部的尺寸

headerReferenceSize及footerReferenceSize属性定义了区段的头部和尾部应该多宽或多高。下图上面两张截图和底部两张截图,看看这两个属性在两种布局方向上分别是如何延伸的。顶部两张截图使用的是水平布局,我们把这两个属性的宽度设为60点;底部两张截图采用的是垂直布局,我们把这两个属性的高度设为30点。虽说开发者提供的是完整的CGSize结构,但是布局对象每次只会使用其中一个字段,具体使用哪个字段,要根据布局方向来确定。在水平布局下,使用宽度字段,在垂直布局下,使用高度字段。
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    return CGSizeMake(60, 30);
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    return CGSizeMake(60, 30);
}

4、内边距

最小行间距及最小条目间距两个属性定义了区段内的某个条目与其他条目之间的位置关系。与之相对,sectionInset属性则描述了区段内所有条目的总体边界与外围的集合视图边界之间的距离。这段填充距离,既会影响区段与其头部和尾部之间的距离,又会影响两个区段之间的距离。
每个内边距都是由一组{top,left,bottom,right}值构成的。上面的图演示了内边距对集合视图的影响。上面的图片中四张截图所采用的内边距完全相同,都是顶部50点、底部30点、左右各10点:
UIEdgeInsetsMake(50,10,30,10)
顶部两张截图采用水平的流式布局,底部两张截图采用垂直的流式布局。sectionInset属性在这些情况下是如何影响排版的。它会在内容条目与外围容器之间填入空白。在水平布局下,内容条目会在垂直方向上调整自己,使其顶边与外围视图的顶边之间能够留有一定的空隙,同时还会在水平方向上调整自己,使其左右边界能够和区段的头部及尾部之间分别留出一定的距离。在垂直布局下,内容条目的上下边界则要和区段的头部及尾部之间分别留有一定空隙。同时,其左右边界也必须与外围集合视图的左右边界之间留出距离。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值