1. Lightning talk:
Personnalisation bouton et animations android
Orange Developer Center
Achraf Mehrez – Elève ingénieur stagiaire chez Orange
10/04/2014, Orange Developer Center
2. 2 Orange confidentialOrange presentation
Plan
Section 1 Comment customiser les boutons sous Android ?
Section 2 Les animations Android ?
3. 3 Orange confidentialOrange presentation
Comment «customiser» les boutons sous Android ?
1- Ajouter les ‘background’ désirés pour le bouton dans les différents états
sous « res/drawable/ ».
2- Créer un fichier XML ‘custom_button’ :res/drawable/custom_button.xml
La création de ce nouveau «Drawable» qui sera utilisé comme arrière plan de notre
bouton.
On utilise simplement la balise <selector> dans laquelle on ajoute tous nos
«Drawables » sous la forme de balises <item>.
Pour associer le «Drawable» à un état on utilise (android:state..) dans la balise <item> .
4. 4 Orange confidentialOrange presentation
Le bouton est :
- Défaut : Lorsqu’il est inactif (disabled)
- <item android:drawable="@drawable/button_default" />
- Pressé :
<item android:drawable="@drawable/button_pressed android:state_pressed="true" />
- Autre : (Lorsqu’il a le focus , …)
<item android:drawable="@drawable/button_focused“ android:state_focused="true" />
<item android:drawable="@drawable/button_enabled“ android:state_enabled="true" />
- Remarque: Attention à l’ordre des items dans la balise <selector>.
Les différents états d’un bouton
8. 8 Orange confidentialOrange presentation
Les animations Android ?
1- Définition de l’animation en XML :
Création d’un fichier XML qui définie l’animation désiré
res/anim/ animation.xml
9. 9 Orange confidentialOrange presentation
Définition en XML :
*Transparence:
<alpha> permet de faire apparaître ou disparaître une vue.
•android:fromAlpha : Est la transparence de départ avec 0.0 une vue totalement transparente
et 1.0 une vue totalement visible.
•android:toAlpha : Est la transparence finale voulue avec 0.0 une vue totalement transparente
et 1.0 une vue totalement visible.
*Rotation:
<rotate> permet de faire tourner une vue autour d'un axe.
• android:fromDegrees : Est l'angle de départ.
• android:pivotX: Est la coordonnée du centre de rotation sur l'axe X (en pourcentages par rapport à
la gauche de la vue, par exemple 50% correspond au milieu de la vue et 100% au bord droit).
• android:pivotY : Est la coordonnée du centre de rotation sur l'axe Y (en pourcentages par rapport
au plafond de la vue).
• android:toDegrees : Est l'angle voulu à la fin.
10. 10 Orange confidentialOrange presentation
*Taille:
<scale> permet d'agrandir ou de réduire une vue.
android:fromXScale :Est la taille de départ sur l'axe X (1.0 pour la valeur actuelle).
android:fromYScale : Est la taille de départ sur l'axe Y (1.0 pour la valeur actuelle).
android:pivotX : (identique à <rotate>).
android:pivotY : (identique à <rotate>).
android:toXScale : Est la taille voulue sur l'axe X (1.0 pour la valeur de départ).
android:toYScale : Est la taille voulue sur l'axe Y (1.0 pour la valeur de départ).
*Mouvement:
<translate> permet de faire subir une translation à une vue (mouvement rectiligne).
android:fromXDelta : Est le point de départ sur l'axe X (en pourcentages).
android:fromYDelta : Est le point de départ sur l'axe Y (en pourcentages).
android:toXDelta : Est le point d'arrivée sur l'axe X (en pourcentages).
android:toYDelta : Est le point d'arrivée sur l'axe Y (en pourcentages).
11. 11 Orange confidential
2- Le chargement de l’animation xml dans l’activité en
utilisant « AnimationUtils»:
Orange presentation
12. 12 Orange confidential
3- L'évènementiel dans les animations :
Il y a trois évènements qui peuvent être gérés dans le code :
le lancement de l'animation,
la fin de l'animation,
chaque début d'une répétition.