Android GridView Beispiel

In Android können Sie mitGridView Komponenten in einem zweidimensionalen Bildlaufraster anordnen. Eine ausführliche Erklärung der Attribute finden Sie in der Referenz zuGridView.

In diesem Tutorial zeigen wir Ihnen 2 gängige Beispiele fürGridView:

Zeigen Sie auf normale Weise nur Text im Layout vonGridViewan.
Erstellen Sie einen benutzerdefinierten Adapter, um Bild und Text im Layout vonGridViewanzuzeigen.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Normales GridView-Beispiel

Zeigen Sie Zeichen von A bis Z im Layout vonGridViewan. Ganz einfach, es sollte selbsterklärend sein.

1.1 Android Layout file – res/layout/main.xml

1.2 Activity

package com.example.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 adapter = new ArrayAdapter(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 Demo

android grid view example

2. Beispiel für einen benutzerdefinierten Adapter

Erweitern Sie in diesem Beispiel einBaseAdapter, um eine Gruppe von Bildern und Texten im Layout vonGridViewanzuzeigen.

2.1 Two Android Layout files

Datei - res / layout / main.xml

Datei - res / layout / mobile.xml

2.2 Custom Adapter

package com.example.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.example.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 Activity

package com.example.android;

import com.example.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 Demo

android gridview custom adapter example

Quellcode herunterladen

Laden Sie es herunter -Android-GridView-Example.zip (21 KB)

TOC

Android GridView Beispiel