如何在UIScrollView中将图像排列在一起？

Question

我正在下载一组图片并将它们并排显示在水平滚动的UiScrollView中。

在Android上，我在LinearLayout中有一个ScrollView，并且设置了相应的重力。下载图像后，它们会被添加到布局中并适当显示 - 以正确的比例拉伸父视图以适应它们。

在iOS上我有一个更难的时间。我正在使用AsyncImageView来加载图像，这很好用。问题是我必须先用它的边界初始化每个视图，然后再知道它们会是什么。

for(NSString* url in self.imageURLs){
    AsyncImageView *iView = [[AsyncImageView alloc] initWithFrame:self.imageScroller.frame];
    [iView showActivityIndicator];
    [iView setImageURL:[NSURL URLWithString:url]];
    [self.imageScroller addSubview:iView];
}

这不起作用 - 所有图像都叠加在一起，并且不成比例地拉伸以适合框架。

在iOS中有一种简单的方法可以让“重力”或“漂浮”像布局一样吗？如果没有，我该如何布置我的图像呢？

修改

为了清楚起见：这些图像具有不同的宽高比，因此在加载之前我无法知道它们的尺寸。

这是我的Android布局

Answer 1

您应手动设置每个iView的位置（框架）。 例如，垂直放置：

CGFloat y = 0;
for(NSString* url in self.imageURLs){
    CGRect frame = self.imageScroller.bounds;
    frame.origin.y = y;
    y = y + frame.size.height;
    AsyncImageView *iView = [[AsyncImageView alloc] initWithFrame:frame];
    [iView showActivityIndicator];
    [iView setImageURL:[NSURL URLWithString:url]];
    [self.imageScroller addSubview:iView];
}

此外，您应该将imageScroller内容大小增加到能够滚动：

self.imageScroller.contentSize = CGSizeMake(y, self.imageScroller.frame.width);

Answer 2

试试这个：

CGRect currentFrame = self.imageScroller.bounds;
for(NSString* url in self.imageURLs){
    AsyncImageView *iView = [[AsyncImageView alloc] initWithFrame:currentFrame];
    [iView showActivityIndicator];
    [iView setImageURL:[NSURL URLWithString:url]];
    [self.imageScroller addSubview:iView];
    currentFrame.origin.x += current.frame.size.width; // that is if you put them next to each other horizontally, otherwise use origin.y and size.height
}

另请记住，如果您还没有设置图像Scroller的内容大小。

Answer 3

好的，所以最简单的方法就是计算和设置每个图像的帧。

int i = 0;

float width = self.imageScroller.frame.size.width;
float height = self.imageScroller.frame.size.height;
float y = 0;

for(NSString* url in self.imageURLs){
    ++i;

    float x = i * width;

    AsyncImageView *iView = [[AsyncImageView alloc] initWithFrame:CGRectMake(x, y, width, height)];
    [iView showActivityIndicator];
    [iView setImageURL:[NSURL URLWithString:url]];
    [self.imageScroller addSubview:iView];
}

但是，如果要加载大量图像，则会出现问题。

执行此操作的最佳方法是使用UIPageViewController。看到像这里的某个地方...... http://www.raywenderlich.com/forums/viewtopic.php?f=5&t=3120

Answer 4

最后，通过将数据添加到ajax有效负载中，这是最简单的方法：

CGRect currentFrame = self.imageScroller.bounds;
CGFloat currentX = self.imageScroller.bounds.origin.x;
for(NSDictionary* snap in self.imageURLs){
    NSNumber *iWidth = [snap objectForKey:@"width"];
    NSNumber *iHeight = [snap objectForKey:@"height"];
    CGFloat width = [iWidth floatValue] * currentFrame.size.height / [iHeight floatValue];
    CGRect bounds = CGRectMake(currentX, currentFrame.origin.y, width, currentFrame.size.height);
    AsyncImageView *iView = [[AsyncImageView alloc] initWithFrame:bounds];
    [iView showActivityIndicator];
    [iView setImageURL:[NSURL URLWithString:[snap objectForKey:@"url"]]];
    [self.imageScroller addSubview:iView];
    currentX += width;
}
self.imageScroller.contentSize = CGSizeMake(currentX,currentFrame.origin.y);