Visualizzazione griglia Android

Android GridView mostra gli elementi in una griglia a scorrimento bidimensionale (righe e colonne) e gli elementi della griglia non sono necessariamente predeterminati ma vengono inseriti automaticamente nel layout utilizzando un ListAdapter

Vista a griglia

Un adattatore collega effettivamente i componenti dell'interfaccia utente e l'origine dati che inseriscono i dati nel componente dell'interfaccia utente. L'adattatore può essere utilizzato per fornire i dati come spinner, visualizzazione elenco, visualizzazione griglia ecc.

Il ListView e GridView sono sottoclassi di AdapterView e possono essere popolati legandoli a un file Adapter, che recupera i dati da un'origine esterna e crea una vista che rappresenta ogni voce di dati.

Attributi di GridView

Di seguito sono riportati gli attributi importanti specifici di GridView:

Suor n	Attributo e descrizione
1	android:id Questo è l'ID che identifica in modo univoco il layout.
2	android:columnWidth Specifica la larghezza fissa per ogni colonna. Questo potrebbe essere in px, dp, sp, in o mm.
3	android:gravity Specifica la gravità all'interno di ogni cella. I valori possibili sono top, bottom, left, right, center, center_vertical, center_horizontal ecc.
4	android:horizontalSpacing Definisce la spaziatura orizzontale predefinita tra le colonne. Questo potrebbe essere in px, dp, sp, in o mm.
5	android:numColumns Definisce quante colonne mostrare. Può essere un valore intero, come "100" o auto_fit che significa visualizzare quante più colonne possibile per riempire lo spazio disponibile.
6	android:stretchMode Definisce in che modo le colonne devono allungarsi per riempire lo spazio vuoto disponibile, se presente. Deve essere uno dei valori: nessuno: lo stretching è disabilitato. spacingWidth - La spaziatura tra ogni colonna viene allungata. columnWidth: ogni colonna viene allungata allo stesso modo. spacingWidthUniform - La spaziatura tra ogni colonna è allungata in modo uniforme.
7	android:verticalSpacing Definisce la spaziatura verticale predefinita tra le righe. Questo potrebbe essere in px, dp, sp, in o mm.

Esempio

Questo esempio ti guiderà attraverso semplici passaggi per mostrare come creare la tua applicazione Android usando GridView. Segui i seguenti passaggi per modificare l'applicazione Android che abbiamo creato nel capitolo Hello World Example -

Passo	Descrizione
1	Utilizzerai l'IDE di Android Studio per creare un'applicazione Android e chiamarla HelloWorld in un pacchetto com.example.helloworld come spiegato nel capitolo Hello World Example .
2	Modifica il contenuto di detault del file res / layout / activity_main.xml per includere il contenuto GridView con attributi autoesplicativi.
3	Non è necessario modificare string.xml, Android Studio si prende cura delle stringhe predefinite che sono posizionate in string.xml
4	Mettiamo alcune immagini nella cartella res / drawable-hdpi . Ho messo sample0.jpg, sample1.jpg, sample2.jpg, sample3.jpg, sample4.jpg, sample5.jpg, sample6.jpg e sample7.jpg.
5	Crea una nuova classe chiamata ImageAdapterin un pacchetto com.example.helloworld che estende BaseAdapter. Questa classe implementerà la funzionalità di un adattatore da utilizzare per riempire la vista.
6	Esegui l'applicazione per avviare l'emulatore Android e verifica il risultato delle modifiche apportate nell'applicazione.

Di seguito è riportato il contenuto del file di attività principale modificato src/com.example.helloworld/MainActivity.java. Questo file può includere ciascuno dei metodi fondamentali del ciclo di vita.

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

Di seguito sarà il contenuto di res/layout/activity_main.xml file -

<?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"
/>

Di seguito sarà il contenuto di res/values/strings.xml per definire due nuove costanti -

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">HelloWorld</string>
   <string name="action_settings">Settings</string>
</resources>

Di seguito sarà il contenuto di src/com.example.helloworld/ImageAdapter.java file -

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

Proviamo a eseguire il nostro file modificato Hello World!applicazione che abbiamo appena modificato. Presumo che tu abbia creato il tuoAVDdurante l'impostazione dell'ambiente. Per eseguire l'app da Android Studio, apri uno dei file di attività del progetto e fai clic sull'icona Esegui dalla barra degli strumenti. Android Studio installa l'app sul tuo AVD e la avvia e se tutto va bene con la configurazione e l'applicazione, verrà visualizzata la seguente finestra dell'emulatore:

Esempio di attività secondaria

Estendiamo la funzionalità dell'esempio precedente in cui mostreremo l'immagine della griglia selezionata a schermo intero. Per raggiungere questo obiettivo dobbiamo introdurre una nuova attività. Tieni presente che per qualsiasi attività abbiamo bisogno di eseguire tutti i passaggi come se dovessimo implementare una classe di attività, definire quell'attività nel file AndroidManifest.xml, definire il layout correlato e infine collegare quella sottoattività con l'attività principale da essa nel main classe di attività. Quindi seguiamo i passaggi per modificare l'esempio precedente:

Passo	Descrizione
1	Utilizzerai l'IDE di Android Studio per creare un'applicazione Android e chiamarla HelloWorld in un pacchetto com.example.helloworld come spiegato nel capitolo Hello World Example .
2	Crea una nuova classe Activity come SingleViewActivity.java in un pacchetto com.example.helloworld come mostrato di seguito.
3	Crea un nuovo file di layout per la nuova attività in res/layout/cartella. Chiamiamo questo file XML come single_view.xml.
4	Definisci la tua nuova attività nel file AndroidManifest.xml utilizzando il tag <activity ... />. Un'applicazione può avere una o più attività senza alcuna restrizione.
5	Esegui l'applicazione per avviare l'emulatore Android e verifica il risultato delle modifiche apportate nell'applicazione.

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

Di seguito sarà il contenuto del nuovo file di attività src/com.example.helloworld/SingleViewActivity.java file -

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

Di seguito sarà il contenuto di res/layout/single_view.xml file -

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

Di seguito sarà il contenuto di AndroidManifest.xml per definire due nuove costanti -

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

Proviamo a eseguire il nostro file modificato Hello World!applicazione che abbiamo appena modificato. Presumo che tu abbia creato il tuoAVDdurante l'impostazione dell'ambiente. Per eseguire l'app da Android Studio, apri uno dei file di attività del tuo progetto e fai clic sull'icona Esegui dalla barra degli strumenti. Android Studio installa l'app sul tuo AVD e la avvia e se tutto va bene con la configurazione e l'applicazione, verrà visualizzata la seguente finestra dell'emulatore:

Ora se fai clic su una delle immagini, verrà visualizzata come una singola immagine, ad esempio -

Si prega di notare che le immagini sopra menzionate sono state prese dal sito Web ufficiale di Android.

↰ Previous page

Visualizzazione griglia Android

Vista a griglia

Attributi di GridView

Esempio

Esempio di attività secondaria

Concetti avanzati di Android

Nozioni di base su Android

Esempi utili per Android

Risorse utili per Android

Android - Interfaccia utente