exemple Android GridView

Exemple Android GridView

Sous Android,GridView vous permet d'organiser les composants dans une grille de défilement bidimensionnelle. Pour une explication détaillée des attributs, voir la référence deGridView.

Dans ce tutoriel, nous allons vous montrer 2 exemples communs deGridView:

De manière normale, affichez simplement le texte dans la mise en pageGridView.
Créez un adaptateur personnalisé pour afficher l'image et le texte dans la mise en pageGridView.

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

1. Exemple normal de GridView

Afficher les caractères de A à Z dans la dispositionGridView. Assez simple, il devrait être explicatif.

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. Exemple d'adaptateur personnalisé

Dans cet exemple, étendez unBaseAdapter pour afficher un groupe d'images et de texte dans la mise en pageGridView.

2.1 Two Android Layout files

Fichier - res / layout / main.xml

Fichier - 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

Télécharger le code source

Téléchargez-le -Android-GridView-Example.zip (21 Ko)

TOC

exemple Android GridView