在UICollectionView中显示图像 - 如何在图像之间实现固定的垂直间距？ [英] Display images in a UICollectionView - how to achieve fixed vertical spacing between images?

问题描述

我正在使用UICollectionView在iPhone应用程序（iOS6）中显示图像网格。

我正在使用UICollectionView的垂直滚动，并且图像都具有固定的宽度和不同的高度。设置图像的宽度，以便在iPhone上显示3列图像。这工作正常，我在网格视图中显示图像。

但是，由于我的图像高度不同，因此列中图像之间的垂直间距会有所不同，这看起来不太好，如下图所示（用HTML制作的模型）：

我希望实现更流畅的流程，其中列中图像之间的垂直间距相同。以下模型显示了我希望它如何工作：

有关如何解决此问题的任何想法？

另外，作为一个额外的问题，如果应用程序不是为iOS6构建的，那么有没有人知道解决相同问题的方法（因为UICollectionView仅在iOS6中可用）。通过使用第三方组件或通过标准iOS控件解决它。

解决方案

子类UICollectionViewFlowLayout并在该类中添加这些方法。 （注意这假设是垂直方向，它会跳过第一行，它们之间是一个恒定的10像素。请参阅：

<$ p，确定间隔 - 在-uicollectionview-flowlayout之间的间隔$ p> - （NSArray *）layoutAttributesForElementsInRect：（CGRect）rect {
NSArray * arr = [super layoutAttributesForElementsInRect：rect];
for（UICollectionViewLayoutAttributes * atts in arr）{
if（nil == atts.representedElementKind）{
NSIndexPath * ip = atts.indexPath;
atts.frame = [self layoutAttributesForItemAtIndexPath：ip] .frame;
}
}
return arr;
}

- （UICollectionViewLayoutAttributes *）layoutAttributesForItemAtIndexPath：（NSIndexPath *）indexPath {
UICollectionViewLayoutAttributes * atts =
[super layoutAttributesForItemAtIndexPat H：indexPath];

if（indexPath.item == 0 || indexPath.item == 1）//退化情况1，第一项
返回atts;

NSIndexPath * ipPrev =
[NSIndexPath indexPathForItem：indexPath.item-2 inSection：indexPath.section];

CGRect fPrev = [self layoutAttributesForItemAtIndexPath：ipPrev] .frame;
CGFloat rightPrev = fPrev.origin.y + fPrev.size.height + 10;
if（atts.frame.origin.y< = rightPrev）//退化情况2，第一行
返回atts;

CGRect f = atts.frame;
f.origin.y = rightPrev;
atts.frame = f;
返回atts;
}


I am using a UICollectionView to present a grid of images in an iPhone app (iOS6).

I am using vertical scrolling for the UICollectionView, and the images all have fixed width and varying height. The width of the images are set so that on an iPhone, it displays 3 columns of images. This works ok, and I get the images presented in a grid view.

However, since my images have varying height, the vertical spacing between images in a column varies and this doesn't look very good, as you can see in the following image (a mockup made in HTML):

I would instead like to achieve a more fluid flow, where the vertical spacing between images in a column are the same. The following mockup shows how I would like it to work:

Any ideas of how to solve this?

Also, as a bonus question, does anyone know a way to solve the same problem if the app was not built for iOS6 (since UICollectionView is only available in iOS6). Either by using a 3rd party component or by solving it with standard iOS controls.

解决方案

Subclass UICollectionViewFlowLayout and in that class add these methods. (Note this assumes a vertical orientation, and it skips the first line, and it is a constant 10 pixels between them. See: how do you determine spacing between cells in UICollectionView flowLayout if you need the horizontal version

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray* arr = [super layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes* atts in arr) {
    if (nil == atts.representedElementKind) {
        NSIndexPath* ip = atts.indexPath;
        atts.frame = [self layoutAttributesForItemAtIndexPath:ip].frame;
    }
}
return arr;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes* atts =
[super layoutAttributesForItemAtIndexPath:indexPath];

if (indexPath.item == 0 || indexPath.item == 1) // degenerate case 1, first item of section
    return atts;

NSIndexPath* ipPrev =
[NSIndexPath indexPathForItem:indexPath.item-2 inSection:indexPath.section];

CGRect fPrev = [self layoutAttributesForItemAtIndexPath:ipPrev].frame;
CGFloat rightPrev = fPrev.origin.y + fPrev.size.height + 10;
if (atts.frame.origin.y <= rightPrev) // degenerate case 2, first item of line
    return atts;

CGRect f = atts.frame;
f.origin.y = rightPrev;
atts.frame = f;
return atts;
}

这篇关于在UICollectionView中显示图像 - 如何在图像之间实现固定的垂直间距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！