iOS Sliding Paginated Grid

iOS Sliding Paginated Grid

Released 6 years ago , Last update 6 years ago

An alternative to a UIScrollView - a customizable sliding grid view for displaying items with picture and text.

SBGridSlider is a UIScrollView subclass that will help you create a sliding grid view of your own size. Professional applications such as Apple's AppStore feature a similar grid display view.

The common table component UITableView doesn't allow developers access to more than one column at a time, which is often a requirement - especially in iPad Apps. The Grid Slider Display Box solves that issue by providing a compact table of cells with pagination.

It's tested and works fine on iOS5 but will work on any other versions as well.

  • 5 0
  • 4 0
  • 3 1
  • 2 0
  • 1 0
1 Reviews Read Reviews


14 day 14-day money-back guarantee


Personal License

  • Perpetual license

  • 1 application

  • Can distribute binary products only

  • Non-commercial use


Developer License

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Commercial use

  • 6 months support

How To Use

1) Create an SBGridView in your UIViewController

- (void)loadView {
    [super loadView];
    // Set The View's Background Color
    [self.view setBackgroundColor:[UIColor colorWithRed:0.792 green:0.796 blue:0.804 alpha:1.0]];
    self.gridView = [[SBGridView alloc] initWithFrame:CGRectZero];
    [self.gridView.gridSlider setGridSliderDelegate:self];
    [self.view addSubview:self.gridView];

2) Implement the SBGridSliderDelegate Methods

-(int)gridCellCountForSlider:(SBGridSlider *)slider {
    return 10;

-(int)gridRowCountForSlider:(SBGridSlider *)slider {
    return 2;

-(int)gridColumnCountForSlider:(SBGridSlider *)slider {
    return 3;

-(SBGridCell *)gridCell:(SBGridCell *)cell atIndex:(int)cellIndex forSlider:(SBGridSlider *)slider {
    [cell.imgCellImage setImage:[UIImage imageNamed:@"ImageName"]];
    [cell.lblTitle setText:@"Testing"];
    [cell.lblSubtitle1 setText:@"Subtitle 1"];
    [cell.lblSubtitle2 setText:@"Subtitle 2"];
    [cell.lblSubtitle3 setText:@"Subtitle 3"];

    // Add a gesture recognizer to handle cell taps
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];
    [cell addGestureRecognizer:tapGesture];

    return cell;

-(UIColor *)innerBorderColorForSlider:(SBGridSlider *)slider {
    return [UIColor colorWithRed:0.55 green:0.55 blue:0.55 alpha:1.0];

-(UIColor *)innerBorderShadowColorForSlider:(SBGridSlider *)slider {
    return [UIColor colorWithRed:0.82 green:0.82 blue:0.82 alpha:1.0];

-(UIColor *)outerBorderColorForSlider:(SBGridSlider *)slider {
    return [UIColor blackColor];

3) Implement the Instance Methods for Cell Gesture Recognition

- (void)handleGesture:(UIGestureRecognizer *)gestureRecognizer {
    // This is the cell that the gesture happened in
    SBGridCell *cell = (SBGridCell *)gestureRecognizer.view;

    NSLog(@"gesture (%@) performed in cell (%@)",gestureRecognizer, cell);

4) Implement the SBGridViewDelegate Methods

-(BOOL)gridViewHasPageControlForView:(SBGridView *)view {
    return YES;

-(BOOL)scrollIsCircularForView:(SBGridView *)view {
    return YES;

-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
    [self.gridView layoutSubviews];


1) Unzip the component archive

2) Open the folder "SBGridSlider" and locate the folder "SBGridSlider Classes"

3) Now drag this folder into your Xcode Project and make sure you are using a group reference. (I usually also tick "Copy items..." since I like to have all external source code contained in my project folder.)

3 licenses, starting from From » $9.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email
No comments have been posted yet.