Horizontal UIScrollView and hundreds of thumbnail images in iOS?

I need to create a horizontal UIScrollView which to hold hundreds of thumbnail images, just like a slide of thumbnails.

For example, there will be 10 thumbnails showing in a single screen, each of them are horizontally adjacent to each other.

  • VOIP app is not wake up in time if set 15 min for setKeepAliveTimeout method
  • XCode: Why is my event not being added to the calendar?
  • UIPageViewController Gesture recognizers
  • When and why would I want to declare a local variable as __weak using ARC?
  • iOS app from AdMob error = com.google.DummyAdapter?
  • Getting absolute position of CCSprite in cocos2d
  • My problem is that I don’t know how to make a horizontal UIScrollView to hold the multiple thumbnails which showing at the same time ?

    A sample photo is as below. See the bottom part of the screen.

    enter image description here


    5 Solutions Collect From Internet About “Horizontal UIScrollView and hundreds of thumbnail images in iOS?”

    You can add all the thumbnails programatically to your scrollview and use the setContentSize method of UIScrollView. you have to pass 2 values in contentOffset. 1 for width and 1 for height. Please follow link to explore more on this. If you need further help please leave a comment.

    Hope it helps.

    Please consider Following example.

    - (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) {
        if (4==nimages) {
        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;
    self.pageControl.numberOfPages = nimages;
    [scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];

    I suggest you to look at nimbus

    Check out bjhomer’s HSImageSidebarView project. It lets you load a scrollview horizontally or vertically and load in the images. Super easy to implement.

    First of all, at storyboard drag and drop the scroll view and make the outlet of scrollview named scrollView. Two array one is mutable and one is immutable.

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

    The immutable array only store the images which we want to show on the scroll view.Make sure UIscrollview delegate is defined.
    In viewcontoller.m file in didload function do following code:

    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;

    You can calculate content size width of the scrollview as width = number of images * size of each image. Then set contentSize of the scrollview to this width and the height that you want (scrollView.contentSize = CGSizeMake(width, height))