使用UICollectionView制作轮播图(一)
2018-12-11 本文已影响18人
洲洲哥
本文首发地址
UICollectionView做轮播效果(一)
1:要把UICollectionView的视图横向展示
2:把距离屏幕最近的那个item展示在最前面
好吧
今天就放到最步骤1的功能
1:要把UICollectionView的视图横向展示
创建UICollectionView很简单,
这里说一下和平常使用UICollectionView的区别看一下代码
- (UICollectionViewFlowLayout *)createViewFlowLayout {
UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc]init];
CGFloat itemWidth = (self.view.frame.size.width - 4 * kMagin) / 3;
//设置单元格大小
flowLayout.itemSize = CGSizeMake(itemWidth, itemWidth / 0.618);
//设置senction的内边距
flowLayout.sectionInset = UIEdgeInsetsMake(kMagin, kMagin, kMagin, kMagin);
//设置UICollectionView的滑动方向
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//sectionHeader的大小,如果是竖向滚动,只需设置Y值。如果是横向,只需设置X值。
flowLayout.headerReferenceSize = CGSizeMake(100,0);
return flowLayout;
}
NOTICE :
这里只改变了,设置UICollectionView的滑动方向
其他没有变化
2:在创建UICollectionView时注意
选择设置了横向滑动的Layout的文件
- (UICollectionView *)collectionView{
if (!_collectionView) {
CGFloat itemWidth = (self.view.frame.size.width - 4 * kMagin) / 3;
_collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, (itemWidth / 0.618) + 100) collectionViewLayout:[self createViewFlowLayout]];
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headIdentifier];
_collectionView.dataSource = self;
}
return _collectionView;
}
下期预告
使用UICollectionView制作轮播图(二)
把当前距离屏幕最近的item置前
有些地方说的不到位,还请各位看官指正。。。
- 如有问题可添加QQ群:234812704
- 欢迎各位一块学习,提高逼格!
- 也可以添加洲洲哥的微信公众号
可以来微信公众号(洲洲哥)后台给我们留言。 快来扫码关注我们吧!
公众号二维码