Vuko Vuko -4 years ago 113
iOS Question

ios - horizontally scrolling collectionView with images

I am trying to show images on collectionView. I have trouble showing this images as I have created a reusable cell with imageView inside.Those images have to be equally spaced between as I want to show 3 icons on screen at once. I am using 13 icons and it has to be scrollable horizontally through screen.


  • I am not able to show image in cell and I do not know how to set image cells with spacing between them using just one reusable cell



CustomCollectionViewCell.h

@interface CustomCollectionViewCell : UICollectionViewCell
@property (nonatomic, retain) UIImageView *imageView;

@end


CustomCollectionViewCell.m

@implementation CustomCollectionViewCell

- (UIImageView *) imageView {

if (!_imageView) {
_imageView = [[UIImageView alloc] initWithFrame:self.contentView.bounds];
[self.contentView addSubview:_imageView];
}

return _imageView;
}

- (void)prepareForReuse {

[super prepareForReuse];

[self.imageView removeFromSuperview];
self.imageView = nil;
}
@end


LandingViewController.m

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {

CustomCollectionViewCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"CustomCell" forIndexPath:indexPath];

return cell;
}

Answer Source

I will give you what you ask.

I wanted to same thing in one application.I successfully implemented this.Just now I tried the sample project for your question.I got what you ask exactly.I show you the code and everything below.

First CustomImageFlowLayout of NSObject Class

CustomImageFlowLayout.h

#import <UIKit/UIKit.h>
@interface CustomImageFlowLayout : UICollectionViewFlowLayout
@end

CustomImageFlowLayout.m

#import "CustomImageFlowLayout.h"

@implementation CustomImageFlowLayout

- (instancetype)init
{
    self = [super init];
    if (self)
    {
        self.minimumLineSpacing = 1.0f;
        self.minimumInteritemSpacing = 1.0f;
        self.scrollDirection = UICollectionViewScrollDirectionVertical;
    }
    return self;
}

- (CGSize)itemSize
{
    NSInteger numberOfColumns;
    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
       numberOfColumns = 3;
    else{
        if([UIApplication sharedApplication].statusBarOrientation==UIInterfaceOrientationPortrait)
            numberOfColumns = 4;
        else if([UIApplication sharedApplication].statusBarOrientation == UIDeviceOrientationLandscapeRight || [UIApplication sharedApplication].statusBarOrientation == UIDeviceOrientationLandscapeLeft)
            numberOfColumns = 4;
    }
    NSLog(@"The collection view frame is - %@",NSStringFromCGRect(self.collectionView.frame));
    CGFloat itemWidth = (CGRectGetWidth(self.collectionView.frame) - (numberOfColumns - 1)) / numberOfColumns;
    NSLog(@"The item width is - %f",itemWidth);
    return CGSizeMake(itemWidth, itemWidth);
}

@end

After that I created Custom Cell for Images

See my Design first

enter image description here

CustomCell.h

#import <UIKit/UIKit.h>
@interface CustomCell : UICollectionViewCell
@property (strong, nonatomic) IBOutlet UIImageView *img;
@property (strong, nonatomic) IBOutlet UILabel *lblCollection;
@end

CustomCell.m

#import "CustomCell.h"
@implementation CustomCell
@end

Then I use above class in my ViewController

Below is my Storyboard Design

enter image description here

Here my CollectionView name is collectionViewVertical

ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
@property (strong, nonatomic) IBOutlet UICollectionView *collectionViewVertical;
@end

ViewController.m

#import "ViewController.h"
#import "CustomCell.h"
#import "CustomImageFlowLayout.h"
@interface ViewController ()
{
    NSMutableArray *arrayImages;
    NSMutableArray *arrayTitles;
    CustomCell *cell;
}
@end

@implementation ViewController

@synthesize collectionViewVertical;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    collectionViewVertical.collectionViewLayout = [[CustomImageFlowLayout alloc] init];
    collectionViewVertical.backgroundColor = [UIColor clearColor];

    arrayImages = [[NSMutableArray alloc]initWithObjects:@"iPhone", @"Android", @"Windows", @"Blackberry", @"Lenova", @"Redmi", @"MotoG", @"Sony", @"Samsung", @"OnePlus", nil];
    arrayTitles = [[NSMutableArray alloc]initWithObjects:@"iPhone.png", @"android.png", @"windows.png", @"blackberry.png", @"lenovo.png", @"redmi.png", @"moto.png", @"sony.png", @"samsung.png", @"oneplus.png", nil];

    UINib *cellNib = [UINib nibWithNibName:@"CustomCell" bundle:nil];
    [collectionViewVertical registerNib:cellNib forCellWithReuseIdentifier:@"cell"];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

//UICollectionView Data Source Methods
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return  1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return arrayImages.count;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"cell";
    cell = (CustomCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    if(cell==nil){
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
        cell = nib[0];
    }
    cell.img.image = [UIImage imageNamed:(NSString*)[arrayImages objectAtIndex:indexPath.row]];
    cell.lblCollection.text = arrayTitles[indexPath.row];

    return cell;
}

//UICollectionView Delegate Method
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"the clicked indexPath.row is - %ld",(long)indexPath.row);
}

Finally the output screen

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download