Adding Flow Layout to a View
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic explains, with a code example how to make a simple instance of the IGFlowLayoutView™ control and show it on a view.

Required background

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

Topic

Purpose

This topic explains how to add the IG framework file to a project.


In this topic


Displaying the IGFlowLayoutView – Code Example

Description

This code example illustrates how to create a 5x5 IGFlowLayoutView with the item size of 1x1. When scrolling the IGFlowLayoutView, the background color of each item blends into a new random color.

Preview

Code

To start, create an instance of the IGFlowLayoutView that has a black background.

In Objective-C:

IGFlowLayoutView *flowLayoutView = [[IGFlowLayoutView alloc] initWithFrame:self.view.bounds];
flowLayoutView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
flowLayoutView.backgroundColor = [UIColor blackColor];

In C#:

IGFlowLayoutView flowLayoutView = new IGFlowLayoutView ();
flowLayoutView.Frame = this.View.Bounds;
flowLayoutView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight|UIViewAutoresizing.FlexibleWidth;
flowLayoutView.BackgroundColor = UIColor.Black;

Next, set the dataSource property of the IGFlowLayoutView to self or an instance of a class that inherits from IGFlowLayoutDataSource.

In Objective-C:

flowLayoutView.dataSource = self;

In C#:

flowLayoutView.DataSource = new FlowLayoutDataSource ();

Add the IGFlowLayoutView to a view and call the updateData method to populate the IGFlowLayoutView with data.

In Objective-C:

[self.view addSubview:flowLayoutView];
[flowLayoutView updateData];

In C#:

this.View.Add (flowLayoutView);
flowLayoutView.UpdateData ();

Setting up the Data Source

The IGFlowLayoutDataSource protocol requires the implementation of 4 methods. This portion of the getting started topic walks you through how to setup these 4 methods. To learn more about using the IGFlowLayoutDataSource protocol, visit the Data Source.

To start, define the number of blocks in the IGFlowLayoutView viewport.

In Objective-C:

- (CGSize)numberOfBlocksInViewport:(IGFlowLayoutView *)flowLayoutView
{
    CGSize result = CGSizeMake(5, 5);
    return result;
}

In C#:

public override SizeF NumberOfBlocksInViewport (IGFlowLayoutView flowLayoutView)
{
      SizeF result = new SizeF(5, 5);
      return result;
}

Then, return the number of items in the IGFlowLayoutView.

In Objective-C:

- (NSInteger)numberOfItemsInFlowLayoutView:(IGFlowLayoutView *)flowLayoutView
{
    return 250;
}

In C#:

public override int NumberOfItems (IGFlowLayoutView flowLayoutView)
{
      return 250;
}

Next, return the size of the item at a specific index.

In Objective-C:

- (CGSize)flowLayoutView:(IGFlowLayoutView *)flowLayoutView sizeForItemAtIndex:(NSInteger)index1
{
    CGSize result = CGSizeMake(1, 1);
    return result;
}

In C#:

public override SizeF SizeForItem (IGFlowLayoutView flowLayoutView, int index)
{
      SizeF result = new SizeF(1, 1);
      return result;
}

Finally, create the cell for a given index.

In Objective-C:

- (IGFlowLayoutViewCell *)flowLayoutView:(IGFlowLayoutView *)flowLayoutView cellAtIndex:(NSInteger)index1
{
    IGFlowLayoutViewCell *cell = [flowLayoutView dequeueReusableCellWithIdentifier:@"CELL"];
    if (!cell)
    {
        cell = [[IGFlowLayoutViewCell alloc] initWithReuseIdentifier:@"CELL"];
        cell.contentInset = UIEdgeInsetsMake(2, 2, 2, 2);
        UIView *innerView = [[UIView alloc] init];
        innerView.layer.cornerRadius = 4.0;
        cell.contentView = innerView;
    }
    CGFloat red = arc4random_uniform(75)/255.0;
    CGFloat green = arc4random_uniform(255)/255.0;
    CGFloat blue = arc4random_uniform(255)/255.0;
    [UIView animateWithDuration:1.25 delay:0 options:UIViewAnimationOptionAllowUserInteraction
                     animations:^
                     {
                         cell.contentView.backgroundColor = [UIColor colorWithRed:red
                                                                            green:green
                                                                             blue:blue
                                                                            alpha:1.0];
                     } completion:nil
    ];
    return cell;
}

In C#:

public override IGFlowLayoutViewCell CreateCell (IGFlowLayoutView flowLayoutView, int index)
{
      IGFlowLayoutViewCell cell = flowLayoutView.DequeueReusableCell ("CELL") as IGFlowLayoutViewCell;
      if (cell == null)
      {
            cell = new IGFlowLayoutViewCell ("CELL");
            cell.ContentInset = new UIEdgeInsets (2, 2, 2, 2);
            UIView innerView = new UIView ();
            innerView.Layer.CornerRadius = 4.0f;
            cell.ContentView = innerView;
      }
      Random rnd = new Random (DateTime.Now.Millisecond);
      float red = rnd.Next(75)/255.0f;
      float green = rnd.Next(255)/255.0f;
      float blue = rnd.Next(255)/255.0f;
      UIView.Animate(1.25f, 0.0f, UIViewAnimationOptions.AllowUserInteraction, () => {
            cell.ContentView.BackgroundColor = UIColor.FromRGBA(red, green, blue, 1.0f);
      }, null);
      return cell;
}

Code: Complete listing

In Objective-C:

@interface igViewController () <IGFlowLayoutViewDataSource>
@end
@implementation igViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    IGFlowLayoutView *flowLayoutView = [[IGFlowLayoutView alloc] initWithFrame:self.view.bounds];
    flowLayoutView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    flowLayoutView.backgroundColor = [UIColor blackColor];
    flowLayoutView.dataSource = self;
    [self.view addSubview:flowLayoutView];
    [flowLayoutView updateData];
}
- (CGSize)numberOfBlocksInViewport:(IGFlowLayoutView *)flowLayoutView
{
    CGSize result = CGSizeMake(5, 5);
    return result;
}
- (NSInteger)numberOfItemsInFlowLayoutView:(IGFlowLayoutView *)flowLayoutView
{
    return 250;
}
- (CGSize)flowLayoutView:(IGFlowLayoutView *)flowLayoutView sizeForItemAtIndex:(NSInteger)index1
{
    CGSize result = CGSizeMake(1, 1);
    return result;
}
- (IGFlowLayoutViewCell *)flowLayoutView:(IGFlowLayoutView *)flowLayoutView cellAtIndex:(NSInteger)index1
{
    IGFlowLayoutViewCell *cell = [flowLayoutView dequeueReusableCellWithIdentifier:@"CELL"];
    if (!cell)
    {
        cell = [[IGFlowLayoutViewCell alloc] initWithReuseIdentifier:@"CELL"];
        cell.contentInset = UIEdgeInsetsMake(2, 2, 2, 2);
        UIView *innerView = [[UIView alloc] init];
        innerView.layer.cornerRadius = 4.0;
        cell.contentView = innerView;
    }
    CGFloat red = arc4random_uniform(75)/255.0;
    CGFloat green = arc4random_uniform(255)/255.0;
    CGFloat blue = arc4random_uniform(255)/255.0;
    [UIView animateWithDuration:1.25 delay:0 options:UIViewAnimationOptionAllowUserInteraction
                     animations:^
                     {
                         cell.contentView.backgroundColor = [UIColor colorWithRed:red
                                                                            green:green
                                                                             blue:blue
                                                                            alpha:1.0];
                     } completion:nil
    ];
    return cell;
}
@end

In C#:

public class FlowLayoutDataSource : IGFlowLayoutViewDataSource
{
      public override SizeF NumberOfBlocksInViewport (IGFlowLayoutView flowLayoutView)
      {
            SizeF result = new SizeF(5, 5);
            return result;
      }
      public override int NumberOfItems (IGFlowLayoutView flowLayoutView)
      {
            return 250;
      }
      public override SizeF SizeForItem (IGFlowLayoutView flowLayoutView, int index)
      {
            SizeF result = new SizeF(1, 1);
            return result;
      }
      public override IGFlowLayoutViewCell CreateCell (IGFlowLayoutView flowLayoutView, int index)
      {
            IGFlowLayoutViewCell cell = flowLayoutView.DequeueReusableCell ("CELL") as IGFlowLayoutViewCell;
            if (cell == null)
            {
                  cell = new IGFlowLayoutViewCell ("CELL");
                  cell.ContentInset = new UIEdgeInsets (2, 2, 2, 2);
                  UIView innerView = new UIView ();
                  innerView.Layer.CornerRadius = 4.0f;
                  cell.ContentView = innerView;
            }
            Random rnd = new Random (DateTime.Now.Millisecond);
            float red = rnd.Next(75)/255.0f;
            float green = rnd.Next(255)/255.0f;
            float blue = rnd.Next(255)/255.0f;
            UIView.Animate(1.25f, 0.0f, UIViewAnimationOptions.AllowUserInteraction, () => {
                  cell.ContentView.BackgroundColor = UIColor.FromRGBA(red, green, blue, 1.0f);
            }, null);
            return cell;
      }
}
public partial class FlowLayoutGettingStarted_CSViewController : UIViewController
{
      public FlowLayoutGettingStarted_CSViewController ()
      {
      }
      public override void ViewDidLoad ()
      {
            base.ViewDidLoad ();
            IGFlowLayoutView flowLayoutView = new IGFlowLayoutView ();
            flowLayoutView.Frame = this.View.Bounds;
            flowLayoutView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight|UIViewAutoresizing.FlexibleWidth;
            flowLayoutView.BackgroundColor = UIColor.Black;
            flowLayoutView.DataSource = new FlowLayoutDataSource ();
            this.View.Add (flowLayoutView);
            flowLayoutView.UpdateData ();
      }
}

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

This topic provides a conceptual overview of the IGFlowLayoutView control and its key features.