专注iOS开发(OC/Swift)

使用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置前

有些地方说的不到位,还请各位看官指正。。。

可以来微信公众号(洲洲哥)后台给我们留言。 快来扫码关注我们吧!

公众号二维码
上一篇下一篇

猜你喜欢

热点阅读