Dans le dernier tutorial, on a créé la barre de navigation qui se trouve en bas de l’application:
AIR Mobile – Application TweetDeck (3) – Ajout de la barre de navigation
Dans cette partie, on va créer la barre qui se trouve en haut. Celle-ci est composé de plusieurs éléments:
- Un texte central qui indique sur quelle colonne on se trouve (Home, Mentions, …). Lorsque l’on fait défiler les tweets, le texte change et affiche l’heure du tweet affiché en haut de la lise. Lorsque la colonne sur laquelle on est a des updates, le texte est affiché en jaune.
- Des « pastilles » qui ont 2 états:
- Un état « gris » qui indique qu’il n’y a pas de nouveaux tweets dans cette colonne
- Un état « jaune » qui indique que l’utilisateur a de nouveaux tweets à lire
Les pastilles représentent les colonnes qui ne sont pas affichées actuellement à l’écran. Ainsi, s’il on a la première colonne affichée et qu’il reste encore 3 colonnes à droite, 3 pastilles seront présentes à droite de la barre de header. Ces pastilles bougent lorsque l’on navigue entre les listes.
Pour l’instant, on va créer le composant et les pastilles. On verra après pour la « logique métier » et leur déplacement.
Création du composant ColumnHeaderIndicator
On va créer un nouveau composant MXML dans le package « comps » qui va s’appeler ColumnHeaderIndicator, basé sur Group:
Comme pour le composant BottomBar, on va commencer par ajouter un dégradé:
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Rect width="100%" height="100%"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0x292C29" ratio="0" /> <s:GradientEntry color="0x525152" ratio="0.2" /> <s:GradientEntry color="0x313831" ratio="0.8" /> <s:GradientEntry color="0x212021" ratio="1" /> </s:LinearGradient> </s:fill> <s:stroke> <s:SolidColorStroke color="0" weight="2" /> </s:stroke> </s:Rect> </s:Group>
Et on remplace notre composant dans TweetDeckHomeView:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
actionBarVisible="false" xmlns:comps="comps.*">
<s:layout>
<s:VerticalLayout gap="0" />
</s:layout>
<comps:ColumnHeaderIndicator width="100%" height="40" />
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xFF0FF0" />
</s:fill>
</s:Rect>
<comps:BottomBar width="100%" height="80" />
</s:View>
On teste:
Niveau composant, notre barre va se composer de 2 groupes de pastilles, un à gauche et un à droite. Au milieu, on aura un texte. On aura en fait 2 textes légèrement superposés qui nous permettront de donner un effet d’ombre.
.
