バージョン

IGGridView を UIView に追加

トピックの概要

目的

このトピックでは、 IGGridView のインスタンスを作成してデータを表示する方法を紹介します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。

トピック 目的

このトピックでは、 IGGridView™ コントロールの前提条件であるグリッド フレームワーク ファイルを Xcode プロジェクトに追加する前提要件を説明します。

コード例

コード例の概要

以下の表には、このトピックのコード例が示されています。

解説

IGGridView を使用してインスタンスを作成し、ビューに追加します。このコード例では、 UIViewController viewDidLoad メソッドでオーバーライドし、インスタンスを作成します。

インスタンスを作成後、データを IGGridView に追加しますコード例では IGGridViewDataSource プロトコルを実装し、必要なセクター メソッドの使用を説明します。

IGGridView のインスタンスを作成する - コード例

説明

IGGridView を使用するには、最初にインスタンスを作成し、ビューに追加する必要があります。

コード

以下のコードは、 IGGridView のインスタンスを作成するために UIViewControllerviewDidLoad メソッドをオーバーライドします。

Objective-C の場合:

-(void)viewDidLoad
{
        IGGridView* gridView = [[IGGridView alloc]initWithFrame:
                CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)
                style:IGGridViewStyleDefault];
        gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [self.view addSubview:gridView];
}

C# の場合:

public override void ViewDidLoad ()
{
   base.ViewDidLoad ();
 IGGridView gridView = new IGGridView(new RectangleF(0,0, this.View.Frame.Size.Width, this.View.Frame.Size.Height), IGGridViewStyle.IGGridViewStyleDefault);
   gridView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
   this.View.AddSubview(gridView);
}

データの表示 – コード例

説明

インスタンスを作成すると、 UITableView と同じパターンに従って IGGridView にデータを追加できます。データの接続はとても似ていて、表示する列に他のディメンションを追加します。

前提条件

IGGridViewDataSource の実装は、以下の 3 つのセレクターを実装する必要があります。

  • -(int) gridView:(IGGridView* )gridView numberOfRowsInSection:(int)section;

  • -(int) numberOfColumnsInGridView:(IGGridView* )gridView;

  • -(IGGridViewCell*)gridView:(IGGridView*)gridView cellAt:(IGCellPath* )path;

コード

データ表示処理では、まず、 IGGridViewDataSource プロトコルを実装するために UIViewController クラスが必要です。

Objective-C の場合:

@interface TestViewController : UIViewController<IGGridViewDataSource>

_ C# の場合: _

public class DataProvider : IGGridViewDataSource

UIViewController クラスで実装されたプロトコルで、 UIViewController に使用するデータ ソースがインスタンス化された IGGridView に含まれることを伝えます。

Objective-C の場合:

gridView.dataSource = self;

C# の場合:

grid.WeakDataSource = new DataProvider();

コード例では、これら 3 つの必要なセレクターでハードコード データを使用する方法について説明します。このコード結果を実装すると IGGridView は5 列と 100 行あるグリッドを表示します。セルに割り当てられたテキストは、セルの識別パスです。

Objective-C の場合:

-(int)gridView:(IGGridView *)gridView numberOfRowsInSection:(int)section
{
        return 100;
}
-(int)numberOfColumnsInGridView:(IGGridView *)gridView
{
        return 5;
}
-(IGGridViewCell *)gridView:(IGGridView *)gridView cellAt:(IGCellPath * )path
{
        IGGridViewCell* cell = [gridView dequeueReusableCellWithIdentifier:@"CELL"];
        if(cell == nil)
        {
                cell = [[IGGridViewCell alloc]initWithReuseIdentifier:@"CELL"];
        }
        cell.textLabel.text = [NSString stringWithFormat:
                @"Row: %d, Section: %d, Column:%d",
                path.rowIndex, path.sectionIndex, path.columnIndex];
        return cell;
}

_ C# の場合: _

public class DataProvider : IGGridViewDataSource
{
  public override int NumberOfRowsInSection (IGGridView grid, int sectionIndex)
  {
      return 100;
  }
 public override int NumberOfColumns (IGGridView gridView)
  {
      return 5;
  }
  public override IGGridViewCell CreateCell (IGGridView grid, IGCellPath path)
  {
      IGGridViewCell cell = (IGGridViewCell)grid.DequeueReusableCell("Cell");
      if(cell == null)
         cell = new IGGridViewCell("Cell");
 cell.TextLabel.Text = path.RowIndex + "." + path.SectionIndex + "." + path.ColumnIndex;
      return cell;
  }
}

IGGridView は、画面で表示されているすべてを描画します。セルがスクロールでビューポイントを離れると、後で再利用できるようグリッドに保持されてキューされます。セルがビューに入ると、そのデータ ソースが cellAt メソッドを呼び出し、新しいセルを表示するかどうかを尋ねます。セクション内のセクション、行インデックス、行内のセルの列を含む path プロパティを介して必要なセルを識別します。新しいセルを毎回作成する代わりに、このメソッドが呼び出されます。最初に IGGridViewdequeReusableCellWithIdentifier セレクターを呼び出す必要があります。識別子は、セルを作成するために最初に使用される文字列です。返されるセルがない場合、新しいセルを作成します。ただし、後でセルのデキューに使用される initWithReuseIdentifier メソッドで初期化する必要があります。作成されると、セルでコンテンツを表示する準備ができます。

関連コンテンツ

トピック

このトピックについては、以下のトピックも合わせてご参照ください。

トピック 目的

このセクションは IGGridView の主要機能について説明します。