Configuring a Custom Cell
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides a conceptual overview, with code, on creating and configuring a custom cell on the IGGridView™ control.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic

Purpose

Adding the Grid Framework File

This topic explains how to add the grid framework file to the project.


In this topic


Introduction

Custom cell summary

The IGGridView is extremely flexible; able to display an infinite number of layouts. This is possible by creating a derived IGGridViewCell for customization. When doing so, override the setupSize method (recommended). Use this method to setup and size your content.

  • -(void)setupSize:(CGSize)size;

Useful for cleanup, the optional and configurable cellDetached method fires whenever a cell recycles.

  • -(void)cellDetached;

Creating a Custom Cell – Code Example

Description

The following code derives from IGGridViewCell and overrides setupSize to size its content. This example uses the initWithReuseIdentifier method to initialize the cell’s content.

Code

In Objective-C:

@interface SampleCell : IGGridViewCell
{
    UIImageView* _rootImage;
}
-(void)setImage:(NSString*)imgName withTitle:(NSString*)title;
@end
@implementation SampleCell
-(id)initWithReuseIdentifier:(NSString *)identifier
{
    self = [super initWithReuseIdentifier:identifier];
    if(self)
    {
        _rootImage = [[UIImageView alloc]init];
        _rootImage.contentMode = UIViewContentModeScaleAspectFit;
                       
        _textLabel.textAlignment = UITextAlignmentCenter;
        _textLabel.textColor = [UIColor whiteColor];
        _textLabel.font = [UIFont fontWithName:@"Marker Felt" size:14];
    
        [self addSubview:_rootImage];
        self.clipsToBounds = YES;
    }
    return self;
}
-(void)setImage:(NSString*)imgName withTitle:(NSString*)title
{
    UIImage* normalImage = [UIImage imageNamed:imgName];
       _rootImage.image = normalImage;
    _textLabel.text = title;
}
-(void)setupSize:(CGSize)size
{
    _rootImage.frame = CGRectMake(10, 5, size.width - 20, size.height - 30);
    _textLabel.frame = CGRectMake(10, size.height - 20, size.width - 20, 15); 
}
@end

In C#:

public class SampleCell :IGGridViewCell
 {
  UIImageView _rootImage;

  public SampleCell(string identifier) :base (identifier)
  {
   _rootImage = new UIImageView();

   this.TextLabel.TextAlignment = UITextAlignment.Center;
   this.TextLabel.TextColor = UIColor.White;
   this.TextLabel.Font = UIFont.FromName("Marker Felt", 14);

   this.AddSubview(_rootImage);
   this.ClipsToBounds = true;
  }
 
  public void SetImage(string imageName, string title)
  {
   _rootImage.Image = new UIImage(imageName);
   this.TextLabel.Text = title;
  }

  public override void SetupSize (SizeF size)
  {
   _rootImage.Frame = new RectangleF(10, 5, size.Width - 20, size.Height - 30);
   this.TextLabel.Frame = new RectangleF(10, size.Height - 20, size.Width - 20, 15);
  }
 }

Implementation

The implementation of the custom IGGridViewCell involves creating an instance of the cell in the IGGridViewDataSource’s cellAt method.

In Objective-C:

  SampleCell* cell = [gridView dequeueReusableCellWithIdentifier:@"cell"];
    if(cell == nil)
        cell = [[SampleCell alloc]initWithReuseIndentifier:@"cell"];
    
    NavigationItem* item = [self resolveDataObjectForRow:path];
    [cell setImage:item.imgPath withTitle:item.displayName];
    return cell;

In C#:

   SampleCell cell = (IGGridViewCell)grid.DequeueReusableCell("Cell");
   if(cell == null)
    cell = new SampleCell("Cell");
  
   cell.SetImage("imgName", path.RowIndex.ToString());
  
   return cell;

Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This topic provides basic information about creating an instance of the IGGridView and displaying data to help you with getting up and running with using the control.

This section serves as an introduction to the IGGridView’s key features and functionalities.