Xamarin.Android GridView

[アーティクル]
04/25/2024

GridView は、2 次元のスクロール可能なグリッド内の項目を表示する ViewGroup です。グリッド項目は、ListAdapter を使用してレイアウトに自動的に挿入されます。

このチュートリアルでは、サムネイル画像のグリッドを作成します。項目が選択されると、トーストメッセージに画像の位置が表示されます。

HelloGridView という名前の新しいプロジェクトを開始します。

使用したい写真をいくつか見つけるか、これらのサンプル画像をダウンロードします。プロジェクトの Resources/Drawable ディレクトリに画像ファイルを追加します。 [プロパティ] ウィンドウで、AndroidResource にそれぞれのビルドアクションを設定します。

Resources/Layout/Main.axml ファイルを開き、以下を挿入します。

<?xml version="1.0" encoding="utf-8"?>
<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"
/>

この GridView は、画面全体に表示されます。属性はその名前のとおりです。有効な属性の詳細については、GridView のリファレンスを参照してください。

HelloGridView.cs を開いて、次のコードを挿入します OnCreate() メソッド:

protected override void OnCreate (Bundle bundle)
{
    base.OnCreate (bundle);

    SetContentView (Resource.Layout.Main);

    var gridview = FindViewById<GridView> (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 ();
    };
}

コンテンツビューに Main.axml レイアウトが設定されると、GridView が、FindViewById を使用してレイアウトからキャプチャされます。 .Adapter プロパティは、グリッドに表示されるすべての項目のソースとしてカスタムアダプター (ImageAdapter) を設定するために使用されます。 ImageAdapter は、次の手順で作成されます。

グリッド内の項目がクリックされたときに何かを行うには、匿名デリゲートが ItemClick イベントにサブスクライブされます。選択した項目のインデックス位置 (0 から始まる) を表示する Toast を示します (実際のシナリオでは、その位置を使用して他のタスクのフルサイズの画像を取得できます)。 .NET イベントの代わりに Java スタイルのリスナークラスを使用できることに注目してください。

BaseAdapter をサブクラス化する、ImageAdapter と呼ばれる新しいクラスを作成します。

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
    };
}

まず、これにより、BaseAdapter から継承された必須メソッドがいくつか実装されます。コンストラクターと Count プロパティは名前のとおりです。通常、GetItem(int) は、アダプターで指定された位置にある実際のオブジェクトを返す必要がありますが、この例では無視されます。同様に、GetItemId(int) は項目の行 ID を返す必要がありますが、ここでは必要ありません。

最初に必要なメソッドは GetView() です。このメソッドは、ImageAdapter に追加される画像ごとに新しい View を作成します。これが呼び出されると、View が渡されます。これは通常、リサイクルされたオブジェクト (少なくとも 1 回呼び出された後) であるため、オブジェクトが null であるかどうかが確認されます。 null "である" 場合、ImageView はインスタンス化され、画像プレゼンテーションに必要なプロパティを使用して構成されます。

LayoutParams は、ビューの高さと幅を設定します。これにより、ドローアブルのサイズに関係なく、必要に応じて、各画像のサイズが変更され、これらのディメンションに合わせてトリミングされることが確実になります。
SetScaleType() は、画像が中央に向かってトリミングされることを宣言します (必要な場合)。
SetPadding(int, int, int, int) は、すべての辺のパディングを定義します。 (画像の縦横比が異なる場合、ImageView に指定されたディメンションと一致しない場合、パディングが少なくなれば、画像のトリミングが増えることに注意してください。)

GetView() に渡された View が null で "ない" 場合は、ローカルImageView が、リサイクルされた View オブジェクトを使用して初期化されます。

GetView() メソッドの最後に、メソッドに渡される position 整数が、thumbIds 配列から画像を選択するために使用されます。これが、ImageView の画像リソースとして設定されます。

あとは、ドローアブルリソースの thumbIds 配列を定義するだけです。

アプリケーションを実行します。グリッドレイアウトは次のようになります。

プロパティを調整して、GridView と ImageView 要素の動作を試してみてください。たとえば、LayoutParams を使用する代わりに、SetAdjustViewBounds() を使用してみてください。

リファレンス

このページの一部は、Android オープンソースプロジェクトによって作成および共有された作業生産物に基づいて変更されており、Creative Commons 2.5 Attribution License に記載されている条件に従って使用されています。

次の方法で共有

Xamarin.Android GridView

リファレンス

その他のリソース