Creating a horizontal scrolling with UIViews

Question

First start with an example: What I'm trying to achieve

It is a bout the bottom part of the images, I can scroll through those small tumbnails on the bottom by swiping.

I am searching for ways to create the effect which is currently used by WhatsApp to scroll through a set of images.

I started by looking how to use a UITableView for this, but I soon bumped into topics about UIScrollView and UICollectionView. Now my question is, what should I use in this case? What is best programming practice in this case.

Should I use an UITableView with custom cells (UIViews) and somehow get it scrolling horizontally. Should I use an UIScrollView? Most of the tutorials where about showing too large images, so maybe I shouldn't use that one? Or should I use an UICollectionView? Most of the tutorials about this topic where with 2d grids, so maybe a collectionview is a little overkill?

Thanks for your help

answer to a similar question http://stackoverflow.com/a/15167037/4114683 — TheSD, Mar 19 '15 at 21:01
@Daljeet Yes I use storyboard when I can, is this also possible in this case? — Simon, Mar 20 '15 at 14:09

score 4 · Accepted Answer · edited May 23 '17 at 11:43

You should use a combination of UICollectionView and UICollectionViewFlowLayout. This post gives you the exact code. Creating a UICollectionView programmatically

For your case, before you init the collectionView with the layout, you'll want to set the scroll direction on the layout so that you can scroll horizontally. Like so:

[layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

In addition, you'll want to set the size of the collection view cells to fit what you want.

score 0 · Answer 2 · answered Mar 21 '15 at 09:51

What you have to do is take IBOutlet of scrollview that is scrollViewForImages

Add the below code and call the function by passing your image array like this:

 if (imageArray.count)
    {
        [self addImagesToScrollView:imageArray];
    }

and write this code in .m

-(void)addImagesToScrollView:(NSArray *)imageArray
{


 CGRect pageFrame;
 UIImageView *imageView;
 CGFloat widthImg = 100.0f;
 CGFloat Dist = 15.0f;


 // scrollVIewForMutualFriends.backgroundColor = [UIColor redColor];

 for (UIView *view in scrollViewForSports.subviews)
 {
     if ( [view isKindOfClass:[UIButton class]] || [view isKindOfClass:[UIView class]]  )
     {
         [view removeFromSuperview];
     }
 }

 for (int i= 0;  i < imageArray.count ; i++) //imageArray.count
 {
 UIView *viewBg = [[UIView alloc] init];

 pageFrame = CGRectMake(i * widthImg , 0.0f, widthImg , widthImg) ;//scrollVIewForMutualFriends.bounds.size.height

 [viewBg setFrame:pageFrame];

 [viewBg setBackgroundColor:[UIColor clearColor]];

 [viewBg addSubview: lblName] ;
 [viewBg addSubview:btnOnImg];

 [scrollViewForImages addSubview: viewBg] ;
     }

    scrollViewForImages.contentSize = CGSizeMake(imageArray.count * widthImg, scrollViewForSports.frame.size.height);

}

let me know if there is any confusion

Thanks for the code example! I don't know objective c but I suppose I can figure that out myself. Is this also possible with some autolayout for the subviews? Ive build everything else in storybuilder. — Simon, Mar 21 '15 at 22:05

Creating a horizontal scrolling with UIViews

2 Answers2