Collection View 基于图像的动态高度

Posted

技术标签:

【中文标题】Collection View 基于图像的动态高度【英文标题】:Collection View dynamic height on the basis of image 【发布时间】:2016-06-30 08:30:07 【问题描述】:

我正在使用集合视图,其中单元格包含两个图像。现在我希望单元格高度基于图像高度是动态的。这是代码

   - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

//    CGSize defaultSize = [(UICollectionViewFlowLayout*)collectionViewLayout itemSize];
    if (indexPath.section==[dataArray count]) 
        return CGSizeMake(screenWidth,50);;

    else
        PMNewsFeedObject *feedObj=[dataArray objectAtIndex:indexPath.section];
        if (feedObj.captionPopulateMore) 

            float height=[self findHeightForText:feedObj.caption havingWidth:screenWidth-30 andFont:[UIFont fontWithName:@"MSReferenceSansSerif" size:15]];
            height=height-10;
             return CGSizeMake(feedObj.imageSize.width, feedObj.imageSize.height+height);

        else

             return CGSizeMake(feedObj.imageSize.width, feedObj.imageSize.height+45);

        
    

    return CGSizeMake(0,0);

这里是 cellforitematindexpath 的代码

-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath


    if (indexPath.section==dataArray.count) 

        UICollectionViewCell *loadmoreCell=[homeCollectionView dequeueReusableCellWithReuseIdentifier:@"loadmoreCell" forIndexPath:indexPath];
        UIActivityIndicatorView *loadmoreIndicator=(UIActivityIndicatorView*)[loadmoreCell viewWithTag:100];
        [loadmoreIndicator startAnimating];
        return loadmoreCell;

    

    PMNewsFeedObject *feedObj=[dataArray objectAtIndex:indexPath.section];

    PMHomeCollectionViewCell *cell=[homeCollectionView dequeueReusableCellWithReuseIdentifier:@"homeCell" forIndexPath:indexPath];


    NSString *imageURLString=feedObj.petImage;
    NSString *image2URLString = feedObj.petImage2;
    if (imageURLString && ![imageURLString isEqual:[NSNull null]])
    
        NSURL *imageURL = [NSURL URLWithString:[[NSString stringWithFormat:@"%@%@",BASE_URL,imageURLString] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];


        [cell.petImgView sd_setImageWithURL:imageURL placeholderImage:[UIImage imageNamed:@"placeholder_pet.png"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) 

            [UIView animateWithDuration:0.0f animations:^



                UIImage *newImg=[image resizedImageByWidth:flowLayout.itemSize.width];
                PMNewsFeedObject *newObject=[dataArray objectAtIndex:indexPath.section];
                NSLog(@"%f",flowLayout.itemSize.width);
                NSLog(@"%f",flowLayout.itemSize.height);
//                float hfactor =  image.size.width/flowLayout.itemSize.width;
//                float vfactor = image.size.height /flowLayout.itemSize.height;
//                
//                 NSLog(@"%f",flowLayout.itemSize.width);
//                NSLog(@"%f",flowLayout.itemSize.height);
//                
//                float newHeight=0;
//                if (image.size.width<image.size.height) 
//                
//                    float factor = fmax(hfactor, vfactor);
//                    newHeight= image.size.height/factor;
//                else
//                    
//                    
//                    float factor = fminf(hfactor, vfactor);
//                    newHeight= image.size.height * factor;
//                    
//                    
//                
//                NSLog(@"%f",newImg.size.height);
                if (newImg.size.height!=0) 

                    newObject.imageSize = newImg.size;

                    NSLog(@"%f",newImg.size.width);



                     NSLog(@"%f",newImg.size.height);

                

                [dataArray replaceObjectAtIndex:indexPath.section withObject:newObject];
                [self.homeCollectionView.collectionViewLayout invalidateLayout];
            ];

        ];

但我得到所有单元格高度都相同,并且图像在其中拉伸。 这是一个单元格的屏幕截图

【问题讨论】:

【参考方案1】:

要修复拉伸图像,请设置

_imageView.contentMode = UIViewContentModeScaleAspectFill;

关于collection view cell的大小,在cellForItemAtIndexPath下打断点,检查你的计算是否正确。

【讨论】:

以上是关于Collection View 基于图像的动态高度的主要内容,如果未能解决你的问题,请参考以下文章

基于图像高度 css 角度动态设置可变填充

缺少将 view.top 与动态高度 uilabel 底部连接的约束

如何在 Swift 中的 Collection View 上显示图像数组

swift collection view:如何更改一个特定单元格的图像视图颜色?

通过 Collection View Cell Swift 中的 segue 将图像传递给另一个视图控制器

iOS开发之collection view 的视图裁剪问题