Die Anleitung zu Android GridView

1- Was ist GridView ?

GridView ist ein Viewgroup, das die Sub-Elemente auf 2D Rollengitter anzeigen

1.1- GridItem

Ein  GridView wird aus einer Liste der  GridItem erstellt. GridItem ist eine einzelne Zelle in gridview , wo die Daten angezeigt wird. Irgendwelche Daten in Gridview wird durch griditem angezeigt.
Ein  GridItem ist ein Interfacestück. Es kann durch einige View.gemacht werden
Android baut verfügbar einige verschiedenen  GridItem,. Sie werden die definierten Layout genannt, die in den Beispiele im Dokument vorgestellt werden

1.2- Adapter

Android Adapter  ist eine Brücke zwischen View und die Basisdaten für dieses View . Ein  Adapter steuert die Daten und verbindet mit den einzelnen Zelle (GridItems) von  view.

Sie haben die Bindung von Adapter mit  GridView durch die Methode von setAdapter. Jetzt sehen wir mit der Hilfe des Bildes,  wie Adapter arbeitet

1.3- GridView Selector

Um  GridView schöner anzuzeigen, sollen Sie die Effekte einstellen, zum Beispiel: die Hintergrundfarbe des GridItem ändern wenn der Mauszeiger auf dem GridItem bewegt oder die Hintergrundfarbe ändern wenn GridItem gewählt wird. Sie können das Beispiel für die Einstellung von GridView Selector am Ende des Dokument anschauen.

2- Basis GridView benutzt ArrayAdapter

2.1- ArrayAdapter

Durch ArrayAdapter werden  GridView mit den einfachen GridItem angezeigt.  GridItem kann aus einem einzigen TextView, CheckedTextView, EditText,...gemacht

Falls Sie einen  GridView mit mehr komplizierten  GridItem machen möchten, können Sie einen Custom- Adapter machen.

2.2- Zum Beispiel über GridView mit ArrayAdapter

Erstellen Sie ein Android project mit dem Name von  SimpleGridView.
Die Interface machen
Die Attribute ändern
GridView
  • columnWidth: 120
  • gravity
    • center: <check>
  • numColumns: auto_fit
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.o7planning.simplegridview.MainActivity">

    <GridView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/gridView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:columnWidth="120dp"
        android:gravity="center"
        android:numColumns="auto_fit" />


</RelativeLayout>
Website.java
package org.o7planning.simplegridview;


public class Website {

   private String name;
   private String url;

   public Website(String name, String url)  {
       this.name= name;
       this.url= url;
   }

   public String getUrl() {
       return url;
   }

   public void setUrl(String url) {
       this.url = url;
   }

   public String getName() {
       return name;
   }

   public void setName(String name) {
       this.name = name;
   }

   @Override
   public String toString()  {
       return name;
   }
}
MainActivity.java
package org.o7planning.simplegridview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        //

        Website o7planning = new Website("o7planning","http://o7planning.org");
        Website google = new Website("Google","http://google.com");
        Website facebook = new Website("Facebook","http://facebook.com");
        Website eclipse = new Website("Eclipse","http://eclipse.org");
        Website yahoo = new Website("Yahoo","http://yahoo.com");

        Website[] websites = new Website[]{o7planning,google, facebook,eclipse, yahoo};

        // android.R.layout.simple_list_item_1 is a constant predefined layout of Android.
        // used to create a GridView with simple GridItem (Only one TextView).

        ArrayAdapter<Website> arrayAdapter
                = new ArrayAdapter<Website>(this, android.R.layout.simple_list_item_1 , websites);


        gridView.setAdapter(arrayAdapter);

        // When the user clicks on the GridItem
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> a, View v, int position, long id) {
                Object o = gridView.getItemAtPosition(position);
                Website website = (Website) o;
                Toast.makeText(MainActivity.this, "Selected :" + " " + website.getName()+"\n("+ website.getUrl()+")",
                        Toast.LENGTH_LONG).show();
            }
        });
    }

}
Das Beispiel durchführen

2.3- Die vorhandenen Layout zum Arbeiten mit  ArrayAdapter

Android baut schon einige  Layout (für  GridItem, ListItem,..), die mit  ArrayAdapter.arbeiten können

android.R.layout.simple_list_item_1

  • Das ist ein einfache layout vom GridItem, das durch ein einzige TextView gemacht wird (Sie können das Beispiel oben sehen).

android.R.layout.simple_list_item_checked
&
android.R.layout.simple_list_item_multiple_choice

  • 2 oben Layout sind die einfachen layout um einen GridView mit GridItem, das ein checkbox.hat zu erstellen
  • TODO

3- GridView durch die Benutzung von BaseAdapter anpassen

Sie können ein  GridViewer einstellen. Ihr  Adapter soll aus der Klasse BaseAdapter. verlängern

3.1- Zum Beispiel: das anpassende GridView 

Erstellen Sie ein  "Empty Activity" Project mit dem Name von  CustomGridView.
Das ist das Foto von der Applikation, die wir später machen
Bereiten Sie einige Foto-File vor:
Kopieren und Kleben Sie diese Foto-File in dem Ordnen  mipmap:auf
  1. vi.png 
  2. us.png
  3. ru.png
  4. jp.png
  5. au.png
Sie brauchen Layout für Griditem erstellen. Auf  Android Studio klicken Sie die Rechtmaustaste auf  res/layout und dann wählen Sie:
  • New/Layout resource file
Geben Sie ein
  • File name: grid_item_layout.xml
  • Root element: RelativeLayout
Machen Sie die Interface für GridItem.
Slider der Schritte von der Aufbau der Interface von  GridItem:
  • SLIDER
ImageView
  • ID: imageView_flag

TextView 1:
  • ID: textView_countryName
  • Text: Country Name

TextView 2:
  • ID: textView_population
  • Text: Population ....
grid_item_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:id="@+id/imageView_flag"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Country Name"
        android:id="@+id/textView_countryName"
        android:layout_alignTop="@+id/imageView_flag"
        android:layout_toRightOf="@+id/imageView_flag"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Population.."
        android:id="@+id/textView_population"
        android:layout_below="@+id/textView_countryName"
        android:layout_alignLeft="@+id/textView_countryName"
        android:layout_alignStart="@+id/textView_countryName"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>
Country.java
package org.o7planning.customgridview;

public class Country {

   private String countryName;

   // Image name (Without extension)
   private String flagName;
   private int population;

   public Country(String countryName, String flagName, int population) {
       this.countryName= countryName;
       this.flagName= flagName;
       this.population= population;
   }

   public int getPopulation() {
       return population;
   }

   public void setPopulation(int population) {
       this.population = population;
   }

   public String getCountryName() {
       return countryName;
   }

   public void setCountryName(String countryName) {
       this.countryName = countryName;
   }

   public String getFlagName() {
       return flagName;
   }

   public void setFlagName(String flagName) {
       this.flagName = flagName;
   }

   @Override
   public String toString()  {
       return this.countryName+" (Population: "+ this.population+")";
   }
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="org.o7planning.customgridview.MainActivity">

   <GridView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/gridView"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true"
       android:columnWidth="120dp"
       android:gravity="center"
       android:numColumns="auto_fit" />


</RelativeLayout>
CustomGridAdapter ist die aus  BaseAdapter erweiterte Klasse. Es hat die Funktion zur Anzeige der Daten auf die GridItem.
CustomGridAdapter.java
package org.o7planning.customgridview;

import android.content.Context;
import android.util.Log;
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 java.util.List;

public class CustomGridAdapter  extends BaseAdapter {

   private List<Country> listData;
   private LayoutInflater layoutInflater;
   private Context context;

   public CustomGridAdapter(Context aContext,  List<Country> listData) {
       this.context = aContext;
       this.listData = listData;
       layoutInflater = LayoutInflater.from(aContext);
   }

   @Override
   public int getCount() {
       return listData.size();
   }

   @Override
   public Object getItem(int position) {
       return listData.get(position);
   }

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

   public View getView(int position, View convertView, ViewGroup parent) {
       ViewHolder holder;
       if (convertView == null) {
           convertView = layoutInflater.inflate(R.layout.grid_item_layout, null);
           holder = new ViewHolder();
           holder.flagView = (ImageView) convertView.findViewById(R.id.imageView_flag);
           holder.countryNameView = (TextView) convertView.findViewById(R.id.textView_countryName);
           holder.populationView = (TextView) convertView.findViewById(R.id.textView_population);
           convertView.setTag(holder);
       } else {
           holder = (ViewHolder) convertView.getTag();
       }

       Country country = this.listData.get(position);
       holder.countryNameView.setText(country.getCountryName());
       holder.populationView.setText("" + country.getPopulation());

       int imageId = this.getMipmapResIdByName(country.getFlagName());

       holder.flagView.setImageResource(imageId);

       return convertView;
   }

   // Find Image ID corresponding to the name of the image (in the directory mipmap).
   public int getMipmapResIdByName(String resName)  {
       String pkgName = context.getPackageName();

       // Return 0 if not found.
       int resID = context.getResources().getIdentifier(resName , "mipmap", pkgName);
       Log.i("CustomGridView", "Res Name: "+ resName+"==> Res ID = "+ resID);
       return resID;
   }

   static class ViewHolder {
       ImageView flagView;
       TextView countryNameView;
       TextView populationView;
   }

}
ActivityMain.java
package org.o7planning.customgridview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);


       List<Country> image_details = getListData();
       final GridView gridView = (GridView) findViewById(R.id.gridView);
       gridView.setAdapter(new CustomGridAdapter(this, image_details));

       // When the user clicks on the GridItem
       gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

           @Override
           public void onItemClick(AdapterView<?> a, View v, int position, long id) {
               Object o = gridView.getItemAtPosition(position);
               Country country = (Country) o;
               Toast.makeText(MainActivity.this, "Selected :"
                            + " " + country, Toast.LENGTH_LONG).show();
           }
       });
   }

   private  List<Country> getListData() {
       List<Country> list = new ArrayList<Country>();
       Country vietnam = new Country("Vietnam", "vn", 98000000);
       Country usa = new Country("United States", "us", 320000000);
       Country russia = new Country("Russia", "ru", 142000000);
       Country australia = new Country("Australia", "au", 23766305);
       Country japan = new Country("Japan", "jp", 126788677);

       list.add(vietnam);
       list.add(usa);
       list.add(russia);
       list.add(australia);
       list.add(japan);

       return list;
   }

}
Die Applikation durchführen

3.2- Zum Beispiel: das anpassende Selector

Um  GridView schöner anzuzeigen, sollen Sie die Effekte einstellen, zum Beispiel: die Hintergrundfarbe des GridItem ändern wenn der Mauszeiger auf dem GridItem bewegt oder die Hintergrundfarbe ändern wenn GridItem gewählt wird. Wir werden mit der obengemeinten Fragen machen
Erstellen Sie die Konfigurationsfile:
  • File name: item_state_normal.xml
  • Directory: drawable
So ähnlich: erstellen Sie 3 andere File
  • item_state_pressed.xml
  • item_state_selected.xml
  • list_selector.xml
Wenn Grid Item in der normalen Status liegt, wird die Style, die in  item_state_normal.xml gesetzt werden, wird für GridItem angewendet.
item_state_normal.xml
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">

  <gradient
      android:startColor="#f1f1f2"
      android:centerColor="#e7e7e8"
      android:endColor="#cfcfcf"
      android:angle="270" />

</shape>
Wenn Grid Item gedrückt wird, werden die Style, die im  item_state_pressed.xml gesetzt werden, für GridItem angewendet
item_state_pressed.xml
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">

  <gradient
      android:startColor="#18d7e5"
      android:centerColor="#16cedb"
      android:endColor="#09adb9"
      android:angle="270" />

</shape>
Wenn GridItem gewählt wird, werden die  style (Stil), die in  item_state_selected.xml gesetzt werden, für GridItem angewendet
item_state_selected.xml
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">

   <gradient
       android:startColor="#18d7e5"
       android:centerColor="#16cedb"
       android:endColor="#09adb9"
       android:angle="270" />

</shape>
Die bestimmten Status von GridItem mit den oben File xml anheften
list_selector.xml
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

       <item
           android:state_selected="false"
           android:state_pressed="false"
           android:drawable="@drawable/item_state_normal" />

       <item android:state_pressed="true"
           android:drawable="@drawable/item_state_pressed" />

       <item android:state_selected="true"
           android:state_pressed="false"
           android:drawable="@drawable/item_state_selected" />


</selector>
ListSelector für  GridView:setzen
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="org.o7planning.customgridview.MainActivity">

   <GridView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/gridView"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true"
       android:columnWidth="120dp"
       android:gravity="center"
       android:numColumns="auto_fit"
       android:listSelector="@drawable/list_selector" />


</RelativeLayout>
Ihre Applikation wieder starten

View more categories: