Android Des Le Debut: Comprendre les Adapteurs et Vues d'Adapteurs

() translation by (you can also view the original English article)

Les Vues d'adapteurs se trouvent partout et Vous aurez des difficulter a trouver une app Android populaire qui ne les utilise pas. Le nom est peut etre inconne, mais si Vous croyez que Vous n'avez jamais vu un adapteur, Vous avez tort plutot. Chaque fois que Vous voyez une interface d'utilisateur affichee en forme d'une liste, cadre, ou pile, Vous voyez une vue d'adapteur active.

Une vue d'adapteur, comme le nom propose, est un objet de Vue. Cela veut dire, que Vous pouvez l'ajouter a Vos activites de la meme facon dont Vous utilisez tout autre mage d'interface d'utilisateur. Toutefois il n'est pas possible d'afficher des donnees elles memes. Ses contenus sont toujours determine par un autre objet, un adapteur. Dans ce seminaire, Je vais Vous montrer comment creer des adapteurs et les utiliser pour faire opererd'autres types d'adapteurs comme ListView et GridView.

Est-ce qu'il est facile pour Vous d'apprendre par video? Pourquoi pas chercher dans notre cours:

Android

Commencer Par Android

Paul Trebilcox-Ruiz

1. Que'est-ce que c'est un Adapteur?

Un adapteur est un objet de classe qui fait introduire l'interface Adapter. Il agit comme un lien entre un ensemble de et une vue d'adapteur, un objet de classe qui etend la classe abstraite de AdapterView. .Cet ensemble de donnees peut presenter les donnees en structure. Les raies, les objets de List, et objets Cursor sont normalement des sets de données utilisées.

Un adapteur peut contribuer a recuperer des donnees d'un ensemble de donnees et pour produire des objets View qui sont bases sur ces donnees. Les objets de View générés sont souvent utilisés pour afficher une vue d'adapteur de cet adapteur.

Vous pouvez créer Vos propres classes d'adapteur du zero, mais la plupart des créateurs vont utiliser ou etendre les classes d'adapteur fournies par Android SDK, comme ArrayAdapter et SimpleCursorAdapter. Dans ce seminaire, nous mettons le point sur la classe ArrayAdapter.

2. Comment vont fonctionner les Vues d'Adapteurs?

Les vues d'adapteurs peuvent afficher des sets larges de données d'une manière efficace. Par exemple, les mages ListView et GridView peuvent afficher des millions d'objets sans vus, en maintenant la et l' usage CPU très bas. Comment font-ils ca? Les vues d'adapteurs différentes ont des techniques différentes. . Toutefois, voici ce que la pluspart d'eux font.

Ils produisent seulement les objets de Vue qui sont déjà sur l'écran ou sont en train de bouger sur l'écran. De cette facon, la d'une vue d'adapteur peut etre constante et sans rapport a la taille du set des données.
Ils permettent aussi aux createurs de minimiser l'usage de plateformed inflatees et recycler les objets View existents qui sont hors l'ecran. Ca va maintenir le CPU bas.

3 Creant un ArrayAdapter

Afin de creer un adapteur il faut suivre les pas suivants:

un ensemble de donnees
un fichier de ressource qui contient la plateforme des objets View produits

En plus, des que la classe ArrayAdapter peut fonctionner seulement avec des fiches, il faut faire sur que la forme des objets View produite ne contient au moins un mage TextView.

Etape 1: Creation d'Ensemble de Donnees

La classe ArrayAdapter peut utiliser les deux, raies et objets de Liste comme ensembles de donnees. Maintenant, utilisons une raie comme le set de donnees.

String[] cheeses = {
            "Parmesan",
            "Ricotta",
            "Fontina",
            "Mozzarella",
            "Cheddar"
          };

Etape 2: Creer le Fichier de Ressource

Creer un nouveau fichier de forme XML dont l'element principal est un LinearLayout et le nommer item.xml Peguer et envoyer un mage Marge text dans lui en mettant la valeur de son id au cheese_name. Le fichier XML doit comme suivant:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_horizontal_margin">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/cheese_name" />
</LinearLayout>

Etape 3: Creer l'Adapteur

Dans Votre activite, creez un nouveau exemple de ArrayAdapteur utilisant son système. Comme ses arguments, donner un nom au fichier principal (de ressource), l'identificateur de TextView et une reference a la ligne. L'adapteur est prêt maintenant.

ArrayAdapter<String> cheeseAdapter = 
    new ArrayAdapter<String>(this,
        R.layout.item,
        R.id.cheese_name,
        cheeses
    );

4 Créer (creez) une Liste

Pour afficher une liste d'items verticale ecrouillant, Vous pouvez utiliser le mage ListView. Pour ajouter le mage a Votre activité , Vous pouvez le peguer et l'envoyer au fichier XML ou le créer utilisant son de Votre code Java. Maintenant, faisons le dernier.

1	ListView cheeseList = new ListView(this);

D'habitude, aucuns autres mages d'interface d'utilisateur ne sont places dans la plateforme qui contient une ListView. Donc, passez le ListView a la methode du ContentView de Votre , couvrant l' ecran entier.

1	setContentView(cheeseList);

Pour lier la ListView a l'adapteur que nous avons avant, utiliser la méthode setAdapter comme il est montre dessous.

1	cheeseList.setAdapter(cheeseAdapter);

Si Votre app fonctionne maintenant, il faut voir le contenu des rang en forme d'une liste.

5 Creant une Grille

Pour afficher une grille de deux dimensions verticale ecrouillable, Vous pouvez utiliser le GridView. Tous les deux, le ListView et GridView sont des sub-categories de la classe abstraite AbsListView etant pareils l'un a l'autre. Donc, si Vous savez comment utiliser un, Vous connaissez comment utiliser l'autre aussi.

Utiliser le constructeur de la classe GridView pour creer un nouvel exemple et appliquez la methode setContentView de Votre activité .

1	GridView cheeseGrid = new GridView(this);
2	setContentView(cheeseGrid);

Pour mettre le nombre des colonnes de la grille, appliquer sa méthode setNumColumns(). Je vais faire de ca une grille de deux colonnes.

1	cheeseGrid.setNumColumns(2);

D'habitude, Vous voudriez ajuster la largeur des colonnes et l'espace entre elles utilisant les méthodes, setColumnWidth() setVerticalSpacing(), et le setHorizontalSpacing() Notez que ces méthodes utilisent des pixels comme leurs unités .

1	cheeseGrid.setColumnWidth(60);
2	cheeseGrid.setVerticalSpacing(20);
3	cheeseGrid.setHorizontalSpacing(20);

Vous pouvez maintenant lier le GridView a l'adapteur créé avant utilisant la méthode setAdapter().

1	cheeseGrid.setAdapter(cheeseAdapter);

Faites fonctionner Votre app pour voir comment est le GridView.

6. Ajouter des Auditeurs d' Evenements

Vous pouvez ecouter des evénements avec des clics courts et clics longs sur les items d'une vue d'adapteur. Par exemple, ajoutons un auditeur d'evénements' par clic au GridView.

Créer un nouvel exemple d'une classe anonyme qui fait introduire l'interfaces AdapterView. OnitemClickListener et l'ajuster a la methode setOnItemClickListener de l'objet GridView. Android Studio va produire automatiquement un bout pour la méthode onItemClick de l'interface. Vous allez voir que les paramètres de la méthode incluent un numéro intégral la position de l'item liste. Vous pouvez utiliser ce pour sur quel item des données l'utilisateur a fait clic.

Le code suivant montre comment afficher un message simple comme snackbar chaque fois qu'on fait clic sur un item du GridView.

cheeseGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView,
                            View view, int position, long rowId) {

        // Generate a message based on the position
        String message = "You clicked on " + cheeses[position];

        // Use the message to create a Snackbar
        Snackbar.make(adapterView, message, Snackbar.LENGTH_LONG)
                .show(); // Show the Snackbar
    }
});

Si Vous utilisez l'app et cliquez sur un item dans la grille, un message va apparaitre a la partie inferieure de l'ecran. Notez que Vous pouvez utiliser le code pour ecouter des evenements apres clics sur items dans ListView.

7. Etendre le ArrayAdapter

Un ArrayAdapter peut utiliser seulement un mage de TextView, dans la plateforme des objets de View produits. Pour amplifier ses fonctionnements il faut l'etendre. Avant de faire ca, pourtant, un set de un peu plus complique.

Au lieu de fiches, disons que notre set de données comprend des objets de la classe suivante:

static class Cheese {
    String name;
    String description;

    public Cheese(String name, String description) {
        this.name = name;
        this.description = description;
    }
}

Ca c'est l'ensemble de que nous allons utiliser:

Cheese[] cheeses = {
        new Cheese("Parmesan", "Hard, granular cheese"),
        new Cheese("Ricotta", "Italian whey cheese"),
        new Cheese("Fontina", "Italian cow's milk cheese"),
        new Cheese("Mozzarella", "Southern Italian buffalo milk cheese"),
        new Cheese("Cheddar", "Firm, cow's milk cheese"),
};

Comme Vous pouvez voir, la classe Cheese contient deux champs, name et description. Pour afficher les deux champs dans une liste ou grille, la forme des items doit comprendre deux mages TextView.

Créez une nouvelle plateforme de fichier XML, en la nommant custom_item.xml. Ajouter un Large text et un Small text a lui. Mettre le id du premier mage cheese_name et celui du deuxieme mage a cheese_description. Les contenus du ficher de plateforme XML doivent paraitre comme ca:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_horizontal_margin">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/cheese_name" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/cheese_description" />
</LinearLayout>

Le ArrayAdapter doit capable de gerer deux mages TextView. Revisiter Votre , une nouvelle classe anonyme qui etend la classe ArrayAdapter, et annuler la getView. Faites sur, que Vous passez le rang comme argument a son constructeur.

ArrayAdapter<Cheese> cheeseAdapter = 
        new ArrayAdapter<Cheese>(this, 0, cheeses) {
            @Override
            public View getView(int position,
                                View convertView,
                                ViewGroup parent) {

            }
        };

Dans la mehode getView, il faut utiliser la position comme une indexe de l'ordre et passer l'item a cette indexe.

1	Cheese currentCheese = cheeses[position];

La deuxieme paramètre de la methode getView est ce que nous aide a reuser les objets View. Si Vous l'ignorez, la performance de Votre vue d'adapteur sera de mauvaise qualite. Quand la getView est pour la fois, convertView est null. Il faut l'activer en gonflant le fichier de ressource qui definit la plateforme de la liste des items. Pour faire ca, obtenez une a un LayoutInflater utilisant la methode getLayoutInflater et appliquer sa méthode inflate.

// Inflate only once
if(convertView == null) {
    convertView = getLayoutInflater()
                    .inflate(R.layout.custom_item, null, false);
}

A ce point, Vous pouvez utiliser findViewById pour obtenir une aux mages TextView dans la plateforme et appliquer leurs méthodes setText pour les activer utilisant des donnees par l'ordre.

TextView cheeseName = 
    (TextView)convertView.findViewById(R.id.cheese_name);
TextView cheeseDescription = 
    (TextView)convertView.findViewById(R.id.cheese_description);

cheeseName.setText(currentCheese.name);
cheeseDescription.setText(currentCheese.description);

Finalement, retour a convertView pour qu'il soit pour afficher les vues d'adapteur connectées a cet adapteur.

1	return convertView;

8. Utilisant un View Holder

La getView est appliquée souvent par la vue d'adapteur pour se faire afficher. Donc, il faut minimiser le nombre d'usages par Vous.

Au pas précédent, Vous devez avoir note , que bienque nous soyons surs que la plateforme de la liste d'items est gonflée une fois seulement, la findViewById, qui dépense beaucoup de circles, est appliquee chaque fois que getView y est utilise.

Pour ca et la performance de la vue d'adapteur, il faut stocker les résultats de la findViewById dans l'objet convertView. Pour faire ca, nous pouvons utiliser l'objet view holder, qui n'est qu'un objet d'une classe qui peut stocker les mages qui sont dans la plateforme.

Comme la plateform a deux mages TextView, la classe view holder doit avoir aussi deux mages TextView. J'ai nomme la classe ViewHolder.

1	static class ViewHolder{
2	TextView cheeseName;
3	TextView cheeseDescription;
4	}

Dans la méthode getView, apres avoir gonflé la plateforme, Vous pouvez activer l'objet view holder utilisant findViewById.

ViewHolder viewHolder = new ViewHolder();
viewHolder.cheeseName =
        (TextView)convertView.findViewById(R.id.cheese_name);
viewHolder.cheeseDescription =
        (TextView)convertView.findViewById(R.id.cheese_description);

Pour stocker l'objet view holder dans convertView, utiliser sa setTag.

1	// Store results of findViewById
2	convertView.setTag(viewHolder);

Et maintenant, chaque fois que getView est utilise, on peut le view holder par convertView utilisant la getTag setText.et actualisant les mages TextView a l'aide de leurs methodes setText.

TextView cheeseName = 
    ((ViewHolder)convertView.getTag()).cheeseName;
TextView cheeseDescription = 
    ((ViewHolder)convertView.getTag()).cheeseDescription;
    
cheeseName.setText(currentCheese.name);
cheeseDescription.setText(currentCheese.description);

Si Vous utilisez Votre app maintenant, Vous pouvez voir GridView en affichant deux lignes de text dans chaque cellule.

GridView with two lines of text per item

Conclusion

Dans ce seminaire, Vous avez appris comment creer un adapteur et l'utiliser pour publier des vues d'adapteur. Vous avez appris aussi comment créer Votre propre adapteur personalisé . Bienqu'on ait mise le point sur ArrayAdapter, ListView et GridView, on peut appliquer les mêmes techniques pour d'autres adapteurs et vues d'adapteurs offerts par Android SDK.

La Android Support comprend le RecyclerView. Il fonctionne comme une vue d'adapteur, mais il n'est pas une sous-classe de classe AdapterView. Il faut noter, lors utiliser, si Vous voulez plus de listes compliquees, surtout celles qui utilisent divers fichiers de plateformes pour leurs items. Pour en savoir plus, Vous pouvez lire this Envato Tuts+tutorial.

Pour savoir plus sur AdapterView et ses sous-classes Vous pouvez en lire les documents.