Créer un composant personnalisé

Détails
Catégorie : Vues, widgets et styles
Affichages : 19
Comme nous l'avons vu dans les recettes précédentes, le SDK Android fournit un large éventail de composants. Mais que se passe-t-il lorsque vous ne trouvez pas un composant prédéfini qui correspond à vos besoins uniques? Vous pouvez toujours créer le vôtre!
Dans cette recette, nous allons créer un composant personnalisé dérivé de la classe View, tout comme les widgets intégrés. Voici un aperçu de haut niveau:
1. Créez une nouvelle classe qui étend View.
2. Créez un ou plusieurs constructeurs personnalisés.
3. Remplacez onMeasure () et l'implémentation par défaut renvoie une taille de 100 x 100.
4. Remplacez onDraw () et l'implémentation par défaut ne dessine rien.
5. Définissez des méthodes et des écouteurs personnalisés (par exemple, sur <Event> ()).
6. Implémenter des fonctionnalités personnalisées.
Tout en surchargeant onMeasure () et onDraw () n'est pas strictement requis, le comportement par défaut n'est probablement pas ce que vous voulez.

Se préparer
Commencez un nouveau projet dans Android Studio et appelez-le CustomView. Utilisez les options de l'assistant par défaut, y compris le SDK téléphone et tablette, et sélectionnez Activité vide lorsque vous êtes invité à entrer le type d'activité. Une fois les fichiers de projet créés et ouverts dans Android Studio, vous êtes prêt à commencer.

Comment faire...
Nous allons créer une nouvelle classe pour que notre composant personnalisé dérive de la classe Android View. Notre composant personnalisé peut être une sous-classe d'une classe existante, telle que l'activité, mais nous allons le créer dans un fichier séparé pour le rendre plus facile à gérer. Voici les étapes:
1. Commencez par créer une nouvelle classe Java et appelez-la également CustomView. C'est ici que nous implémenterons notre composant personnalisé, comme décrit dans l'introduction.
2. Modifiez le constructeur de classe afin qu'il étend View. Cela devrait ressembler à ceci:
la classe publique CustomView étend View {
3. Définissez un objet Paint pour la classe, qui sera utilisé dans onDraw ():
Paint final mPaint = new Paint ();
4. Créez un constructeur par défaut, qui nécessite l'activité Contexte, afin que nous puissions gonfler la vue. Nous allons également définir les propriétés de la peinture ici. Le constructeur devrait ressembler à ceci:
public CustomView (Context context) {super (contexte); mPaint.setColor (Color.BLACK); mPaint.setTextSize (30);
}
5. Remplacez la méthode onDraw () comme suit:
@Passer outre
void protégé onDraw (Canvas canvas) {super.onDraw (canvas); setBackgroundColor (Color.CYAN);
canvas.drawText ("Texte personnalisé", 100, 100, mPaint); invalider();
}
6. Enfin, gonflez notre vue personnalisée dans MainActivity.java en remplaçant setContentView () par notre vue, comme indiqué:
setContentView (nouveau CustomView (this));
7. Exécutez l'application sur un périphérique ou un émulateur pour le voir en action.

Comment ça marche...
Nous commençons par étendre la classe View, tout comme les composants intégrés. Ensuite, nous créons le constructeur par défaut. Ceci est important car nous avons besoin du contexte pour passer à la super classe, ce que nous faisons avec l'appel:
super (contexte);
Nous devons surcharger onDraw (), sinon, comme mentionné dans l'introduction, notre vue personnalisée n'affichera rien. Lorsque onDraw () est appelé, le système transmet un objet Canvas. La toile est la zone de l'écran pour notre vue. (Puisque nous n'avons pas surchargé onMeasure (), notre vue serait 100 x 100, mais puisque notre activité entière consiste seulement en cette vue, nous obtenons l'intégralité de l'écran comme toile.)
Nous avons créé l'objet Paint au niveau de la classe, et en dernier, pour être plus efficace avec l'allocation de mémoire. (onDraw () devrait être aussi efficace que possible puisqu'il peut être appelé plusieurs fois par seconde.) Comme vous le voyez depuis l'exécution du programme, notre implémentation onDraw () définit simplement la couleur d'arrière-plan sur cyan et imprime le texte à l'écran. ()).
Il y a plus...
En fait, il y en a beaucoup plus. Nous venons de toucher la surface de ce que vous pouvez faire avec un composant personnalisé. Heureusement, comme vous le voyez dans cet exemple, il ne faut pas beaucoup de code pour obtenir les fonctionnalités de base. Nous pourrions facilement passer un chapitre entier sur des sujets tels que passer des paramètres de disposition à la vue, ajouter des rappels d'écouteurs, surcharger onMeasure (), utiliser notre vue dans l'EDI, et ainsi de suite. Ce sont toutes les fonctionnalités que vous pouvez ajouter selon vos besoins.
Alors qu'un composant personnalisé doit être capable de gérer n'importe quelle solution, d'autres options peuvent nécessiter moins de codage. L'extension d'un widget existant est souvent suffisante sans la surcharge d'un composant personnalisé. Si ce dont vous avez besoin est une solution avec plusieurs widgets, il y a aussi le contrôle composé. Un contrôle composé, comme une zone de liste déroulante, est juste deux ou plusieurs contrôles regroupés en un seul widget.
Un contrôle composé s'étend généralement à partir d'une mise en page et non d'une vue, puisque vous allez ajouter plusieurs widgets. Vous n'auriez probablement pas besoin de surcharger onDraw () et onMeasure (), car chaque widget gérerait le dessin dans leurs méthodes respectives.
Voir également
► Pour plus d'informations sur le dessin, consultez le chapitre 9, Graphisme et animation.
Pour plus de détails sur l'objet View, reportez-vous à la ressource Développeur Android à l'adresse:
http://developer.android.com/reference/android/view/View.html