Download ppt - Personnalisation bouton et animations Android

Lightning talk: Personnalisation bouton et animations android

Orange Developer Center

Achraf Mehrez – Elève ingénieur stagiaire chez Orange10/04/2014, Orange Developer Center

2 Orange confidentialOrange presentation

Plan

Section 1 Comment customiser les boutons sous Android ?

Section 2 Les animations Android ?


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


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


Exemple simple


3- Modifier la propriété « android:background » du bouton dans fichier XML qui se trouve dans layout .

7 Orange confidential

Les animations Android ?

Orange 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


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.


*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).


2- Le chargement de l’animation xml dans l’activité en utilisant « AnimationUtils»:

Orange presentation


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.


L'évènementiel dans les animations :


Bibliographie

http://cyrilmottier.com/2009/10/01/creer-des-boutons-personnalises/

http://developer.android.com/guide/topics/ui/controls/button.html

http://fr.openclassrooms.com/informatique/cours/creez-des-applications-pour-android/les-animations-1www.forum-smsc.org

http://www.androidhive.info/2013/06/android-working-with-xml-animations/

Orange presentation

Merci pour votre attention