Android GridViewの例

投稿日: 2019-11-05 2019-11-05
タグ: android, gridview, layout

Androidでは、 `GridView`はコンポーネントを2次元のスクロールグリッドに配置します。詳細属性の詳細については、http://developer.android.com/reference/android/widget/GridView.html[GridView]のリファレンスをご覧ください。

このチュートリアルでは、2つの一般的な `GridView`の例を示します:

通常の方法で、 `GridView`レイアウトにテキストを表示するだけです.
`GridView`に画像とテキストを表示するカスタムアダプタを作成します

レイアウト。

P.SこのプロジェクトはEclipse 3.7で開発され、Android 2.3.3.

でテストされています

1.通常のGridViewの例

`GridView`レイアウトにAからZの文字を表示します。かなり簡単ですが、それは自明であるべきです。

1.1 Androidレイアウトファイル – res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="auto__fit"
    android:gravity="center"
    android:columnWidth="50dp"
    android:stretchMode="columnWidth"
    android:layout__width="fill__parent"
    android:layout__height="fill__parent" >

</GridView>

1.2アクティビティ

package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;
import android.view.View;
import android.widget.AdapterView.OnItemClickListener;

public class GridViewActivity extends Activity {

    GridView gridView;

    static final String[]numbers = new String[]{
            "A", "B", "C", "D", "E",
            "F", "G", "H", "I", "J",
            "K", "L", "M", "N", "O",
            "P", "Q", "R", "S", "T",
            "U", "V", "W", "X", "Y", "Z"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        gridView = (GridView) findViewById(R.id.gridView1);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple__list__item__1, numbers);

        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {
               Toast.makeText(getApplicationContext(),
                ((TextView) v).getText(), Toast.LENGTH__SHORT).show();
            }
        });

    }

}

1.3デモ

アンドロイドグリッドビューの例、title = "android-gridview-example-1"、width = 318、height = 480

2.カスタムアダプタの例

この例では、
BaseAdapter`を拡張して
GridView`レイアウトの画像とテキストのグループを表示します。

2.1 2つのAndroidレイアウトファイル

File – res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="auto__fit"
    android:gravity="center"
    android:columnWidth="100dp"
    android:stretchMode="columnWidth"
    android:layout__width="fill__parent"
    android:layout__height="fill__parent" >

</GridView>

ファイル – res/layout/mobile.xml__

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout__width="wrap__content"
    android:layout__height="wrap__content"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/grid__item__image"
        android:layout__width="50px"
        android:layout__height="50px"
        android:layout__marginRight="10px"
        android:src="@drawable/android__logo" >
    </ImageView>

    <TextView
        android:id="@+id/grid__item__label"
        android:layout__width="wrap__content"
        android:layout__height="wrap__content"
        android:text="@+id/label"
        android:layout__marginTop="5px"
        android:textSize="15px" >
    </TextView>

</LinearLayout>

2.2カスタムアダプタ

package com.mkyong.android.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.mkyong.android.R;

public class ImageAdapter extends BaseAdapter {
    private Context context;
    private final String[]mobileValues;

    public ImageAdapter(Context context, String[]mobileValues) {
        this.context = context;
        this.mobileValues = mobileValues;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT__INFLATER__SERVICE);

        View gridView;

        if (convertView == null) {

            gridView = new View(context);

           //get layout from mobile.xml
            gridView = inflater.inflate(R.layout.mobile, null);

           //set value into textview
            TextView textView = (TextView) gridView
                    .findViewById(R.id.grid__item__label);
            textView.setText(mobileValues[position]);

           //set image based on selected text
            ImageView imageView = (ImageView) gridView
                    .findViewById(R.id.grid__item__image);

            String mobile = mobileValues[position];

            if (mobile.equals("Windows")) {
                imageView.setImageResource(R.drawable.windows__logo);
            } else if (mobile.equals("iOS")) {
                imageView.setImageResource(R.drawable.ios__logo);
            } else if (mobile.equals("Blackberry")) {
                imageView.setImageResource(R.drawable.blackberry__logo);
            } else {
                imageView.setImageResource(R.drawable.android__logo);
            }

        } else {
            gridView = (View) convertView;
        }

        return gridView;
    }

    @Override
    public int getCount() {
        return mobileValues.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

}

2.3アクティビティ

package com.mkyong.android;

import com.mkyong.android.adapter.ImageAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;
import android.view.View;
import android.widget.AdapterView.OnItemClickListener;

public class GridViewActivity extends Activity {

    GridView gridView;

    static final String[]MOBILE__OS = new String[]{
        "Android", "iOS","Windows", "Blackberry" };

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        gridView = (GridView) findViewById(R.id.gridView1);

        gridView.setAdapter(new ImageAdapter(this, MOBILE__OS));

        gridView.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                    int position, long id) {
                Toast.makeText(
                   getApplicationContext(),
                   ((TextView) v.findViewById(R.id.grid__item__label))
                   .getText(), Toast.LENGTH__SHORT).show();

            }
        });

    }

}

2.4デモ

android-gridviewカスタムアダプタの例、title = "android-gridview-example"、width = 318、height = 480