美文网首页专注iOS开发(OC/Swift)
使用UICollectionView制作轮播图(一)

使用UICollectionView制作轮播图(一)

作者: 洲洲哥 | 来源:发表于2018-12-11 20:16 被阅读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
    • 欢迎各位一块学习,提高逼格!
    • 也可以添加洲洲哥的微信公众号

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

    公众号二维码

    相关文章

      网友评论

        本文标题:使用UICollectionView制作轮播图(一)

        本文链接:https://www.haomeiwen.com/subject/pwoehqtx.html