Quick Start Guide for Xamarin.Android

Create Some Columns

Now we have our nice list of Person objects we need to create some columns in our grid, in order to display our Person data fields. Firstly we need to provide our ShinobiGridView with an IAdapterSpec instance. The IAdapterSpec object tells the grid how many rows it will contain. We then need to tell the ShinobiGridView how many columns we require, and what data they will contain.

Still in our MainActivity.cs, first implement the IAdapterSpec by adding the following code, outside of any method:

class AdapterSpec : Java.Lang.Object, IAdapterSpec
{
    readonly int numberOfPeople;

    public AdapterSpec(int numberOfPeople)
    {
        this.numberOfPeople = numberOfPeople;
    }

    public int RowCount
    {
        get
        {
            return numberOfPeople;
        }
    }
}

Now we have an IAdapterSpec, we can tell our ShinobiGridView to use it. Add the following code to your OnCreate method:

IAdapterSpec adapterSpec = new AdapterSpec(people.Count);
shinobiGridView.SetAdapterSpec(adapterSpec);

As we know our Person objects currently have two fields, name and age. As such we need to specify a column for each, and request it be added to our grid. Let’s do that next!

To create a Column object, we are going to use the Column class’ Create factory method. This method in turn expects an IColumnSpec object, so first we need to create such an object for each column which we wish to add. You may provide your own implementation of IColumnSpec when creating a Column, however, here we are using one of the pre-made IColumnSpecs provided by the shinobigrids library: TextColumnSpec. Each TextColumnSpec requires an instance of the IPropertyBinder class to be passed to its constructor, to tell it what element of data should ultimately be displayed on the grid. Our first job will thus be to create an IPropertyBinder object for each of our Columns.

Go ahead and create an IPropertyBinder object for our name and age columns by adding the following nested classes, outside of any method code:

class NamePropertyBinder : Java.Lang.Object, IPropertyBinder
{
    readonly List<Person> people;

    public NamePropertyBinder(List<Person> people)
    {
        this.people = people;
    }

    public Java.Lang.Object Bind(int rowIndex)
    {
        Person person = people[rowIndex];
        return person.name;
    }
}

class AgePropertyBinder : Java.Lang.Object, IPropertyBinder
{
    readonly List<Person> people;

    public AgePropertyBinder(List<Person> people)
    {
        this.people = people;
    }

    public Java.Lang.Object Bind(int rowIndex)
    {
        Person person = people[rowIndex];
        return person.age.ToString();
    }
}

You will need to add a using statement for the ShinobiControls.Android.Grids.Supplement package.

Now that we have our IPropertyBinder objects in place, creating Columns on our ShinobiGridView is quite straight forward. Within our OnCreate method, go ahead and add the following code:

TextColumnSpec nameColumnSpec = new TextColumnSpec("Name", new NamePropertyBinder(people));
shinobiGridView.AddColumn(Column.Create(nameColumnSpec));

TextColumnSpec ageColumnSpec = new TextColumnSpec("Age", new AgePropertyBinder(people));
shinobiGridView.AddColumn(Column.Create(ageColumnSpec));

Modify the Size of your Rows and Columns

The ShinobiGridView will, by default size its rows and columns so that they all fit into the available space, and no space is wasted. In cases where there are many data items to display, their size is scaled down to fit, without the need for scroll bars. Conversely, when there are few data items, their size is increased, to give the appearance of ‘padding’. This avoids any large voids of open space in the ShinobiGridView, in favor of a uniform appearance.

In some cases, this behavior may not be suitable for your needs. As such you may like to tell the ShinobiGridView how you would like your rows and columns to be sized. You can set both a minimum and a default row height and column width. It is important to understand the relationship between the two values. A default row height/column width, if set will be honored, regardless of any minimum row height/column width that has been set. Where a default value has not been set, the ShinobiGridView will attempt to space the rows and columns out evenly, but will not reduce the row height beyond the minimum row height and the column width beyond the minimum column width.

For our quick start example application we wish to set the height of our rows to be 50dp (device independent pixels) and the width of our columns to be a minimum of 500dp. We define these values in an XML file (Resources/values/Dimens.xml):

<resources>
    <dimen name="column_width">500dp</dimen>
    <dimen name="row_height">50dp</dimen>
</resources>

Setting the height of our rows and width of our columns is really quite simple. To set the default row height you simply provide a value, in pixels, to the DefaultRowHeight property. By retrieving the row height from the resources, Android will do the dp to px conversion for us. Add the following to the OnCreate method of the MainActivity.cs file:

Java.Lang.Integer rowHeight = Java.Lang.Integer.ValueOf(Resources.GetDimensionPixelSize(Resource.Dimension.row_height));
shinobiGridView.DefaultRowHeight = rowHeight;

Setting the column width is very similar:

int columnWidth = Resources.GetDimensionPixelSize(Resource.Dimension.column_width);
shinobiGridView.MinimumColumnWidth = columnWidth;

If you run your application you should have a fully functional ShinobiGridView, looking something similar to that below:

A basic grid


<< Previous: Create some data