Xamarin Visual StudioでGridViewを使ってみました。


GridViewの使い方を勉強したかったので、
Xamarin Visual StudioでHelloGridViewを作ってみました。

こちらのページを参考に作ってみます。

まずはC#でAndroid 空のアプリでHelloGridViewを作ります。

サンプル画像はこちらからダウンドーロしました。

ダウンロードした画像は、ソリューションエクスプローラのResources/drawableに追加します。
解凍して、ファイルをドラッグドロップすれば追加できます。

Main.axmlを編集して以下のコードに書き換えます。

なぜ、もともとあるLinearLayoutを削除しなければならないのかわかりませんが、素直にコピペしました。

<GridView xmlns:android=“http://schemas.android.com/apk/res/android
android:id=”@+id/gridview”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
android:columnWidth=“90dp”
android:numColumns=“auto_fit”
android:verticalSpacing=“10dp”
android:horizontalSpacing=“10dp”
android:stretchMode=“columnWidth”
android:gravity=“center” />

次は、HelloGridView.csを以下のように書き換えました。

using Android.App;
using Android.Widget;
using Android.OS;
namespace HelloGridView
{
[Activity(Label = “HelloGridView”, MainLauncher = true, Icon = “@drawable/icon”)]
public class MainActivity : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
var gridview = FindViewById(Resource.Id.gridview);
gridview.Adapter = new ImageAdapter(this);
gridview.ItemClick += delegate (object sender, AdapterView.ItemClickEventArgs args) {
Toast.MakeText(this, args.Position.ToString(), ToastLength.Short).Show();
};
}
}
}

ImageAdapterクラスを作るために、ImageAdapter.csというファイルを作成し、以下のコードを書きます。

using Android.Content;
using Android.Views;
using Android.Widget;
using HelloGridView;
public class ImageAdapter : BaseAdapter
{
Context context;
public ImageAdapter(Context c)
{
context = c;
}
public override int Count
{
get { return thumbIds.Length; }
}
public override Java.Lang.Object GetItem(int position)
{
return null;
}
public override long GetItemId(int position)
{
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public override View GetView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null)
{ // if it’s not recycled, initialize some attributes
imageView = new ImageView(context);
imageView.LayoutParameters = new GridView.LayoutParams(85, 85);
imageView.SetScaleType(ImageView.ScaleType.CenterCrop);
imageView.SetPadding(8, 8, 8, 8);
}
else
{
imageView = (ImageView)convertView;
}
imageView.SetImageResource(thumbIds[position]);
return imageView;
}
// references to our images
int[] thumbIds = {
Resource.Drawable.sample_2, Resource.Drawable.sample_3,
Resource.Drawable.sample_4, Resource.Drawable.sample_5,
Resource.Drawable.sample_6, Resource.Drawable.sample_7,
Resource.Drawable.sample_0, Resource.Drawable.sample_1,
Resource.Drawable.sample_2, Resource.Drawable.sample_3,
Resource.Drawable.sample_4, Resource.Drawable.sample_5,
Resource.Drawable.sample_6, Resource.Drawable.sample_7,
Resource.Drawable.sample_0, Resource.Drawable.sample_1,
Resource.Drawable.sample_2, Resource.Drawable.sample_3,
Resource.Drawable.sample_4, Resource.Drawable.sample_5,
Resource.Drawable.sample_6, Resource.Drawable.sample_7
};
}

チュートリアルのコードをそのままコピペするとエラーになります。

なので、この部分を追記しました。

using Android.Content;
using Android.Views;
using Android.Widget;
using HelloGridView;

ビルドエラーもなくなり、起動できました。