iOS Tutorial: Want your iOS app to scroll in two directions, like Netflix?







Nest UICollectionView inside UITableView for independent scrolling, Horizontal scroll inside UITableView

Appstore, Netflix and most of the apps having dynamic horizontal scrolling with vertical tableview Approach



Let begin to achieve it
1.Create  A demo App
2.Open Xcode
3.Create new project (File -> New ->Project -> Select IOS -> Application ->Single view Application)
4.I have name this project  as HorizontalScrollTable_9to5iOS
5.Now create a new class name it HorizontalScrollCell which is subclass of UITableViewCell.
6.Create a new class name it HorizontalScrollCollectionViewCell which is subclass of UICollectionViewCell.
7.Inside Storyboard -> Open ViewController -> Drag UITableview -> Drag UITableViewCell in the UITableView -> Drag UICollectionView in it -> Add UIImage / UILabel In it as shown in below image and connect with appropriate Outlets.
8.Make Collection View Flow Layout ->Scroll Direction as Horizontal.
Now Inside your ViewController.h Make below changes, to add Outlet of UITableView
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property(nonatomic,weak)IBOutlet UITableView *tableview;

@end
Inside ViewController.m , make below changes to add tableview cell  and array to show category name on the header of each cell
#import "ViewController.h"

#import "HorizontalScrollCell.h"




@interface ViewController ()

{

    NSArray* arr_categoryNames ;




}

@end




@implementation ViewController




- (void)viewDidLoad {




    arr_categoryNames=[NSArray arrayWithObjects:@"Popular Games",@"Latest Games",@"Trending Now", @"Apps we love", @"ChildHood Games",@"Logical Games",nil];

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

}




- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *simpleTableIdentifier = @"HorizontalScrollCell";

    

    HorizontalScrollCell *cell = (HorizontalScrollCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    

    

    return cell;

}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

    // Return the number of sections.

    return [arr_categoryNames count];

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

    return 1;

}




- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return 160;

}




- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

{

    

    return [arr_categoryNames objectAtIndex:section];

    

}




- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}







@end
Now open HorizontalScrollCell.h and add array of images name and game names and add delegate for it , it will looks like below
#import <UIKit/UIKit.h>




@interface HorizontalScrollCell : UITableViewCell< UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

{

    NSArray* arr_imageNames;

    NSArray* arr_gameNames ;

    

    

}

@property(weak,nonatomic) IBOutlet  UICollectionView *collectionView;




@end
Inside HorizontalScrollCell.m we have  add collection view as cell and add image and label text from our array to display in it.
So the class HorizontalScrollCell.m looks like this
#import "HorizontalScrollCell.h"

#import "HorizontalScrollCollectionViewCell.h"

@implementation HorizontalScrollCell




- (void)awakeFromNib {

    arr_imageNames = [NSArray arrayWithObjects:@"game1",@"game2",@"game3", @"game4",nil];

    arr_gameNames  = [NSArray arrayWithObjects:@"Cat Game",@"Candy Shop",@"Cut the Ropes", @"Candy Crush",nil];

    [super awakeFromNib];

    // Initialization code

}




- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

    [super setSelected:selected animated:animated];

    

    // Configure the view for the selected state

}




- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    HorizontalScrollCollectionViewCell *cell=(HorizontalScrollCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"HorizontalScrollCollectionViewCell" forIndexPath:indexPath];

    

    cell.imageView.image  = [UIImage imageNamed:[arr_imageNames objectAtIndex:indexPath.row]] ;

    cell.titleLabel.text  = [arr_gameNames objectAtIndex:indexPath.row];




    NSLog(@"value of row --->%ld",(long)indexPath.row);

    NSLog(@"value of section --->%ld",(long)indexPath.row);

    

    

    return cell;

}




- (NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return [arr_imageNames count];;

}

@end
Inside HorizontalScrollCollectionViewCell.h we take outlet for image view and label to be display on the tableview
#import <UIKit/UIKit.h>




@interface HorizontalScrollCollectionViewCell : UICollectionViewCell

@property(weak,nonatomic) IBOutlet  UIImageView *imageView;

@property(weak,nonatomic) IBOutlet  UILabel *titleLabel;

@end
The class HorizontalScrollCollectionViewCell.m  looks like this
#import "HorizontalScrollCollectionViewCell.h"




@implementation HorizontalScrollCollectionViewCell




@end
NOTE: Put the images from the GitHub repository to your project to make it working.
Here is our final output looks like



After scroll Horizontally 
      



2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *