iOS中的水平UIScrollView和数百个缩略图?

Posted

技术标签:

【中文标题】iOS中的水平UIScrollView和数百个缩略图?【英文标题】:Horizontal UIScrollView and hundreds of thumbnail images in iOS? 【发布时间】:2011-05-12 05:57:32 【问题描述】:

我需要创建一个水平 UIScrollView 来容纳数百个缩略图图像,就像缩略图幻灯片一样。

例如,一个屏幕上会显示 10 个缩略图,每个缩略图水平相邻。

我的问题是我不知道如何制作一个水平 UIScrollView 来容纳同时显示的多个缩略图?

示例照片如下。查看屏幕底部。

谢谢。

【问题讨论】:

考虑为 contentSize(tumbnileImagescount*width,tumbnileImage)。并将 pagingEnabled 属性设置为 Yes 用于水平滚动。 【参考方案1】:

您可以通过编程方式将所有缩略图添加到滚动视图并使用 UIScrollView 的 setContentSize 方法。您必须在 contentOffset 中传递 2 个值。 1 表示宽度,1 表示高度。请关注link 以了解更多信息。如果您需要进一步的帮助,请发表评论。

希望对你有帮助。

请考虑以下示例。

- (void)setupHorizontalScrollView

scrollView.delegate = self;

[self.scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setCanCancelContentTouches:NO];

scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = NO;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;

NSUInteger nimages = 0;
NSInteger tot=0;
CGFloat cx = 0;
for (; ; nimages++) 
    NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", (nimages + 1)];
    UIImage *image = [UIImage imageNamed:imageName];
    if (tot==15) 
        break;
    
    if (4==nimages) 
        nimages=0;
    

    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

    CGRect rect = imageView.frame;
    rect.size.height = 40;
    rect.size.width = 40;
    rect.origin.x = cx;
    rect.origin.y = 0;

    imageView.frame = rect;

    [scrollView addSubview:imageView];
    [imageView release];

    cx += imageView.frame.size.width+5;
    tot++;


self.pageControl.numberOfPages = nimages;
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];


【讨论】:

谢谢。 UIScrollView 是否允许在单个屏幕上显示多个小缩略图。我需要一个缩略图滑块。再次感谢。 @user403015 我已经编辑了答案并发布了水平滚动画廊的代码。它具有某些修复,您可以根据您的要求进行动态调整。在此我考虑到在我的程序中我有 5 张图像,并希望通过重复 3 次来添加这些图像。所以tot=15和nimages==4。我已经用 ios 4.0 测试了上面的代码并且它正在工作。如果您需要更多说明,请发表评论。如果这解决了您的程序,请接受答案或投票。谢谢。 詹尼斯,你真好。因为我需要加载 100 多个缩略图,它会消耗大量内存吗?还是只加载可见的缩略图? @user403015 是的,我看过截图。你如何创建你的 UIScrollView ?你能发布一些你的代码吗? 嗨,Jennis,图片不是我的。请您有空回答我上面的问题。【参考方案2】:

建议你看看nimbus

【讨论】:

【参考方案3】:

查看 bjhomer 的 HSImageSidebarView 项目。它允许您水平或垂直加载滚动视图并加载图像。超级容易实现。

【讨论】:

【参考方案4】:

首先,在storyboard拖放滚动视图,将scrollview的出口命名为scrollView。两个数组一个是mutable,一个是immutable

@property(nonatomic,strong)IBOutlet UIScrollView *scrollView;
@property(nonatomic,strong)NSMutableArray *images;
@property(nonatomic,strong)NSArray *imagesName;

immutable 数组只存储我们想要在滚动视图上显示的图像。确保定义了UIscrollview 委托。 在didload 函数中的viewcontoller.m 文件中执行以下代码:

imagesName = [[NSArray alloc]initWithObjects:@"centipede.jpg",@"ladybug.jpg",@"potatoBug.jpg",@"wolfSpider.jpg",          @"ladybug.jpg",@"potatoBug.jpg",@"centipede.jpg",@"wolfSpider.jpg",nil];

// mutable array used to show the images on scrollview dynamic becaus after one
// image when scroll other will come
images = [[NSMutableArray alloc]init];
scrollView.delegate = self;
scrollView.scrollEnabled = YES;
int scrollWidth = 120;
scrollView.contentSize = CGSizeMake(scrollWidth,80);

int xOffset = 0;

//the loop go till all images will load  
for(int index=0; index < [imagesName count]; index++)
            
    UIImageView *img = [[UIImageView alloc] init];
    // make the imageview object because in scrollview we need image
    img.frame = CGRectMake(5+xOffset, 0, 160, 110);
    // the offset represent the values, used so that topleft for each image will
    // change with(5+xOffset, 0)and the bottomright(160, 110) 
    NSLog(@"image: %@",[imagesName objectAtIndex:index]);
    img.image = [UIImage imageNamed:[imagesName objectAtIndex:index]];
    // The image will put on the img object
    [images insertObject:img atIndex:index];
    // Put the img object at the images array which is mutable array
    scrollView.contentSize = CGSizeMake(scrollWidth+xOffset,110);
    //scroll view size show after 125 width the scroll view enabled
    [scrollView addSubview:[images objectAtIndex:index]];
    // set images on scroll view      
    xOffset += 170;

【讨论】:

我已经尝试过了,但滚动无法水平工作。你知道可能是什么问题吗?或者你有任何其他更新的代码吗?或者你有任何新的方法或场景来实现这样的?请指导我完成这个。【参考方案5】:

您可以将滚动视图的内容大小宽度计算为宽度 = 图片数量 * 每张图片的大小。然后将scrollview的contentSize设置成你想要的这个宽度和高度(scrollView.contentSize = CGSizeMake(width, height))

【讨论】:

以上是关于iOS中的水平UIScrollView和数百个缩略图?的主要内容,如果未能解决你的问题,请参考以下文章

iOS中的UIScrollView不响应滚动到顶部

IOS中的UIScrollView

iOS - 具有多个 UITableViews 的水平 UIScrollView

UIScrollview在垂直和水平ios中滚动

在 iOS 7 中使用 UIScrollView 在 iOS 中创建水平滚动 UIButton

仅在特定值上停止 NSScrollView - 像 UIScrollView 分页