Vue de grille Android
Android GridView affiche les éléments dans une grille de défilement bidimensionnelle (lignes et colonnes) et les éléments de la grille ne sont pas nécessairement prédéterminés mais ils sont automatiquement insérés dans la mise en page à l'aide d'un ListAdapter
Vue en grille
Un adaptateur relie en fait les composants d'interface utilisateur et la source de données qui remplissent les données dans le composant d'interface utilisateur. L'adaptateur peut être utilisé pour fournir les données telles que le spinner, la liste, la grille, etc.
le ListView et GridView sont des sous-classes de AdapterView et ils peuvent être peuplés en les liant à un Adapter, qui récupère les données d'une source externe et crée une vue qui représente chaque entrée de données.
Attributs GridView
Voici les attributs importants spécifiques à GridView -
| Sr. Non | Attribut et description |
|---|---|
| 1 | android:id Il s'agit de l'ID qui identifie de manière unique la mise en page. |
| 2 | android:columnWidth Ceci spécifie la largeur fixe pour chaque colonne. Cela peut être en px, dp, sp, in ou mm. |
| 3 | android:gravity Spécifie la gravité dans chaque cellule. Les valeurs possibles sont top, bottom, left, right, center, center_vertical, center_horizontal etc. |
| 4 | android:horizontalSpacing Définit l'espacement horizontal par défaut entre les colonnes. Cela peut être en px, dp, sp, in ou mm. |
| 5 | android:numColumns Définit le nombre de colonnes à afficher. Peut être une valeur entière, telle que "100" ou auto_fit, ce qui signifie afficher autant de colonnes que possible pour remplir l'espace disponible. |
| 6 | android:stretchMode Définit comment les colonnes doivent s'étirer pour remplir l'espace vide disponible, le cas échéant. Cela doit être l'une des valeurs -
|
| sept | android:verticalSpacing Définit l'espacement vertical par défaut entre les lignes. Cela peut être en px, dp, sp, in ou mm. |
Exemple
Cet exemple vous guidera à travers des étapes simples pour montrer comment créer votre propre application Android à l'aide de GridView. Suivez les étapes suivantes pour modifier l'application Android que nous avons créée dans le chapitre Exemple de Hello World -
| Étape | La description |
|---|---|
| 1 | Vous utiliserez l'IDE de studio Android pour créer une application Android et la nommerez HelloWorld sous un package com.example.helloworld comme expliqué dans le chapitre Exemple de Hello World . |
| 2 | Modifiez le contenu Detault du fichier res / layout / activity_main.xml pour inclure le contenu GridView avec les attributs explicites. |
| 3 | Pas besoin de changer string.xml, Android studio prend en charge les chaînes par défaut qui sont placées dans string.xml |
| 4 | Mettons quelques images dans le dossier res / drawable-hdpi . J'ai mis sample0.jpg, sample1.jpg, sample2.jpg, sample3.jpg, sample4.jpg, sample5.jpg, sample6.jpg et sample7.jpg. |
| 5 | Créez une nouvelle classe appelée ImageAdaptersous un package com.example.helloworld qui étend BaseAdapter. Cette classe implémentera la fonctionnalité d'un adaptateur à utiliser pour remplir la vue. |
| 6 | Exécutez l'application pour lancer l'émulateur Android et vérifier le résultat des modifications effectuées dans l'application. |
Voici le contenu du fichier d'activité principal modifié src/com.example.helloworld/MainActivity.java. Ce fichier peut inclure chacune des méthodes fondamentales du cycle de vie.
package com.example.helloworld;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.GridView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
}
}Voici le contenu de res/layout/activity_main.xml fichier -
<?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"
/>Voici le contenu de res/values/strings.xml pour définir deux nouvelles constantes -
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">HelloWorld</string>
<string name="action_settings">Settings</string>
</resources>Voici le contenu de src/com.example.helloworld/ImageAdapter.java fichier -
package com.example.helloworld;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// Constructor
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}
else
{
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7
};
}Essayons d'exécuter notre modifié Hello World!application que nous venons de modifier. Je suppose que vous avez créé votreAVDlors de la configuration de l'environnement. Pour exécuter l'application à partir d'Android Studio, ouvrez l'un des fichiers d'activité de votre projet et cliquez sur l' 
icône Exécuter dans la barre d'outils. Le studio Android installe l'application sur votre AVD et le démarre et si tout va bien avec votre configuration et votre application, il affichera la fenêtre Emulator suivante -
Exemple de sous-activité
Étendons la fonctionnalité de l'exemple ci-dessus où nous afficherons l'image de la grille sélectionnée en plein écran. Pour y parvenir, nous devons introduire une nouvelle activité. Gardez simplement à l'esprit que pour toute activité dont nous avons besoin, effectuez toutes les étapes comme nous devons implémenter une classe d'activité, définir cette activité dans le fichier AndroidManifest.xml, définir la mise en page associée et enfin lier cette sous-activité à l'activité principale par elle dans le principal classe d'activité. Alors suivons les étapes pour modifier l'exemple ci-dessus -
| Étape | La description |
|---|---|
| 1 | Vous utiliserez l'IDE de studio Android pour créer une application Android et la nommerez HelloWorld sous un package com.example.helloworld comme expliqué dans le chapitre Exemple de Hello World . |
| 2 | Créez une nouvelle classe Activity en tant que SingleViewActivity.java sous un package com.example.helloworld comme indiqué ci-dessous. |
| 3 | Créez un nouveau fichier de mise en page pour la nouvelle activité sous res/layout/dossier. Appelons ce fichier XML single_view.xml. |
| 4 | Définissez votre nouvelle activité dans le fichier AndroidManifest.xml à l'aide de la balise <activity ... />. Une application peut avoir une ou plusieurs activités sans aucune restriction. |
| 5 | Exécutez l'application pour lancer l'émulateur Android et vérifier le résultat des modifications effectuées dans l'application. |
Voici le contenu du fichier d'activité principal modifié src/com.example.helloworld/MainActivity.java. Ce fichier peut inclure chacune des méthodes fondamentales du cycle de vie.
package com.example.helloworld;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent,
View v, int position, long id){
// Send intent to SingleViewActivity
Intent i = new Intent(getApplicationContext(), SingleViewActivity.class);
// Pass image index
i.putExtra("id", position);
startActivity(i);
}
});
}
}Voici le contenu du nouveau fichier d'activité src/com.example.helloworld/SingleViewActivity.java fichier -
package com.example.helloworld;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class SingleViewActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.single_view);
// Get intent data
Intent i = getIntent();
// Selected image id
int position = i.getExtras().getInt("id");
ImageAdapter imageAdapter = new ImageAdapter(this);
ImageView imageView = (ImageView) findViewById(R.id.SingleView);
imageView.setImageResource(imageAdapter.mThumbIds[position]);
}
}Voici le contenu de res/layout/single_view.xml fichier -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView android:id="@+id/SingleView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>Voici le contenu de AndroidManifest.xml pour définir deux nouvelles constantes -
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.helloworld">
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.helloworld.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".SingleViewActivity"></activity>
</application>
</manifest>Essayons d'exécuter notre modifié Hello World!application que nous venons de modifier. Je suppose que vous avez créé votreAVDlors de la configuration de l'environnement. Pour exécuter l'application à partir du studio Android, ouvrez l'un des fichiers d'activité de votre projet et cliquez sur l' icône Exécuter dans la barre d'outils. Le studio Android installe l'application sur votre AVD et le démarre et si tout va bien avec votre configuration et votre application, il affichera la fenêtre Emulator suivante -
Maintenant, si vous cliquez sur l'une des images, elle sera affichée comme une seule image, par exemple -
Veuillez noter que les images mentionnées ci-dessus ont été extraites du site officiel d'Android.