zoukankan      html  css  js  c++  java
  • 关于collectionview布局的坑

    不知道写了多少次collectionview,步了很多坑,现在看来虽然达到了自己想要的结果,却不知道其中所以然。还是总结一下,免得再走弯路;

    场景是这样的,我要定制一个显示选择图片的排列,想要实现横向排列4个,等间距,多了折行显示的效果,正确的做法是这样的;

    - (void)viewDidLoad {
        [super viewDidLoad];
        self.navigationController.navigationBar.translucent = NO;
        if ([self respondsToSelector:@selector(setAutomaticallyAdjustsScrollViewInsets:)]) {
            self.automaticallyAdjustsScrollViewInsets = NO;
        }
        self.view.backgroundColor = [UIColor purpleColor];
        self.photoArray = @[[UIImage imageNamed:@"cycle3"],[UIImage imageNamed:@"cycle4"],[UIImage imageNamed:@"cycle2"],[UIImage imageNamed:@"cycle3"],[UIImage imageNamed:@"cycle4"],].mutableCopy;
        [self.view addSubview:self.pickPhotoCollection];
    }
    
    -(UICollectionView *)pickPhotoCollection{
        if (!_pickPhotoCollection) {
            UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
            layout.scrollDirection = UICollectionViewScrollDirectionVertical;
            _pickPhotoCollection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 200, kScreenWidth, (self.photoArray.count/4 +1)*80) collectionViewLayout:layout];
            _pickPhotoCollection.delegate = self;
            _pickPhotoCollection.dataSource = self;
            _pickPhotoCollection.backgroundColor = RGBACOLOR(240, 240, 240, 1);
            _pickPhotoCollection.showsHorizontalScrollIndicator = NO;
    
            [_pickPhotoCollection registerClass:[XJPickPhotoCollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([XJPickPhotoCollectionViewCell class])];
        }
        return _pickPhotoCollection;
    }
    -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
        return 1;
    }
    
    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
        return self.photoArray.count + 1 > 9 ? 9 : self.photoArray.count +1;
    }
    
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
        XJPickPhotoCollectionViewCell *cell = (XJPickPhotoCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([XJPickPhotoCollectionViewCell class]) forIndexPath:indexPath];
        //判断图片的显示方式   如果不是9张图 则显示可以继续添加
        if (self.photoArray.count == 9) {
            cell.photoImageView.image = self.photoArray[indexPath.row];
            return cell;
        }
    
        if (indexPath.row == self.photoArray.count) {
            cell.photoImageView.image = [UIImage imageNamed:@"addPhoto"];
        }else{
            cell.photoImageView.image = self.photoArray[indexPath.row];
        }
    
        return cell;
    }
    
    -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
        return CGSizeMake(WidthScale(70), WidthScale(70));
    }
    -(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    //    return 2;
        return (kScreen_width - WidthScale(70)*4 - 10 )/3.;
    }
    //-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    //     return (kScreen_width - WidthScale(70)*4 - 10 )/3.;
    //}
    -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
        return UIEdgeInsetsMake(5, 5, 5, 5);
    }

    关键点在这里:

    1-===layout.scrolldirection = uicollectionViewScrollDirectionVertical;collection的滚动方向,由于要折行向下,所以方向是垂直方向,在排列的时候会默认选择先将横向排列完毕,折行向下。

    2--=== minmumlinespaceing 这个这个属性用来指示行与行之间的最小距离(纵向),或者列与列之间的最小距离(横向)。无论横向或者纵向,都可以滚动显示所有内容,所以这个属性可以单独设置。  SO 在不同的滚动方向上要分清楚他的作用,我就是在这里弄的头晕目眩;  当然interitem就很好理解了  

    另外还有一点是   如果是自定义的layout,layout的代理方法是不会执行的,若想达到相同的效果,需要在自定义的layout内部进行处理!

            layout.scrollDirection = UICollectionViewScrollDirectionVertical;

  • 相关阅读:
    字节序列高低端问题
    简单的进制转换
    网页中如何调用WIN本地程序
    获取CAN报文并解析
    异步通信服务选型
    PostgreSQL 更新JSON,JSONB字段
    js,Date的toJSON方法时间和当地时间不一致如何处理
    js中字符串的替换 replace方法
    百度富文本编辑器umeditor,ueditor字体修改无效的问题
    python 3 基础之类和对象的创建、面向对象的三大特性
  • 原文地址:https://www.cnblogs.com/lidarui/p/6931415.html
Copyright © 2011-2022 走看看