AppBar

Détails
Catégorie : UI Eléments
Affichages : 16

AppBar

Les menus jouent un rôle très important dans la conception des interfaces utilisateur et constituent des outils indispensables dans l’arsenal du programmeur. Les systèmes de menus permettent à l’utilisateur d’accéder aux fonctionnalités d’une application. Traditionnellement, les systèmes de menus sont organisés de manière hiérarchique et par groupes d’introduction. Le système de menus d’Android, à un moment donné, s’est comporté exactement de la même manière: groupé et hiérarchique. Mais c'était dans le passé. L’approche d’Android en matière de menus a considérablement changé au cours de sa vie.Avant l'API 11 (Honeycomb), les menus Android s'appuyaient sur des boutons matériels (comme ceux illustrés à la figure 7-8). Les développeurs pouvaient s’appuyer sur les boutons d’accueil (plus d’autres, comme le bouton d’option) toujours présents. Et nous avons construit nos applications en fonction de ces hypothèses, car ces hypothèses étaient raisonnables à l'époque. Bien sûr, les temps ont changé. Les résolutions d'écran ont augmentéde façon spectaculaire, et les boutons matériels ont disparu. Heureusement, l’approche d’Android en matière de menus a également été modifiée et adaptée aux capacités matérielles.

Figure 7-8. API 10 (Gingerbread)

Un nouveau type de système de menus a été ajouté à Android à partir de l'API 11. Les applications construites avec un SDK minimal de 11 peuvent utiliser l'ActionBar (voir un exemple à la figure 7-9).

Figure 7-9. ActionBar

L'ActionBar est une zone dédiée en haut de l'écran et persiste dans toute l'application. Si vous y réfléchissez, cela ressemble beaucoup à la barre de menus principale de AS3. Vous pouvez généralement utiliser la barre d’action pour afficher les fonctionnalités les plus importantes de votre application et les rendre accessibles de manière prévisible. par exemple, placer un widget de recherche permanent en haut, etc. Il crée une apparence plus nette en supprimant l’encombrement dans vos menus; Si tous les éléments du menu ne peuvent pas être installés à l'écran, la barre Action affichera une icône de débordement: il s'agit des points de suspension verticaux, trois points disposés verticalement, qui se trouvent toujours à l'extrême droite de la barre. Il affiche également le nom de l'application, ce qui renforce l'identité de la marque de l'application.De nos jours, la barre d’action est un peu démodée et a été éclipsée par la barre d’outils, la nouvelle recrue. La barre d’outils est un peu plus polyvalente, car elle n’est pas accrochée de façon permanente en haut de l’écran, vous pouvez la placer où vous voulez et elle dispose de quelques fonctionnalités supplémentaires. Le ActionBar reste toutefois une solution viable pour les systèmes de menus simples. En fait, rien ne vous empêche d'utiliser à la fois la barre d'actions et la barre d'outils. Travaillez simplement avec les meilleurs outils que vous avez.

Application de démonstration

Créez un nouveau projet avec les détails suivants (Tableau 7-2)

Table 7-2. ActionBar Project Details

Application name

ActionBar

Project location

 Utilisez la valeur par défaut

Form factor

 Téléphone et tablette seulement

Minimum SDK

 API 23 guimauve

Type of activity

 Vide

Activity name

 MainActivity (par défaut)

Layout name

 activity_main (par défaut)

 Pour utiliser le ActionBar, le SDK minimum doit être défini sur API 11; Cela fait de Honeycomb une coupure. Si un projet a un SDK minimum de 11 ou plus, cela signifie qu'il peut gérer le ActionBar.Après avoir créé le projet, assurez-vous que le thème est défini sur "AppTheme". Après cela, créez un dossier de menu sous le dossier res. Dans la fenêtre de l'outil de projet, cliquez avec le bouton droit de la souris sur le dossier de résolution Nouveau Directory Répertoire de ressources Android (voir Figure 7-10). 

Figure 7-10. Create a new resource directory

Créez un fichier de menu sous le répertoire de menu nouvellement créé. Cliquez avec le bouton droit de la souris sur le dossier de menu, Nouveau Resource Fichier de ressources de menu (voir Figure 7-11).

Figure 7-11. Create a menu folder

Nommez le nouveau fichier de ressources comme "main_menu", comme indiqué à la figure 7-12.

Figure 7-12. New à Menu resource file

Double-cliquez sur le fichier de ressources main_menu dans la fenêtre de l'outil de projet. Ajoutons quelques éléments de menu comme indiqué dans le Listing 7-5. Le fichier main_menu.xml sera créé dans le dossier / app / res / values ​​/ menu / main_menu.xml.

Listing  7-5. main_menu.xml

  1. <?xml version="1.0" encoding="utf-8"?>

  2.  
  3. <menu xmlns:android="http://schemas.android.com/apk/res/android">

  4.  
  5.   <item android:id="@+id/menuFile"

  6.         android:title="@string/menuFile"/>    

  7.  
  8.   <item android:id="@+id/menuEdit"

  9.          android:title="@string/menuEdit"/>

  10.  
  11.   <item android:id="@+id/menuHelp"

  12.          android:title="@string/menuHelp"/>

  13.  
  14.   <item android:id="@+id/menuExit"

  15.         android:title="@string/menuExit"/>

  16.  </menu>

Notation La notation @ id + signifie que nous aimerions créer un identifiant pour cet élément; C’est le même identifiant que nous utiliserons plus tard lorsque nous le référencerons à partir de notre programme en utilisant la méthode findViewByIdL'attribut title est celui qui sera affiché dans le menu. Nous pourrions écrire ici une simple chaîne, mais cela reviendrait à coder en dur cette valeur dans ce fichier. C’est généralement une mauvaise idée. Les notations @string signifient que nous référençons le titre à partir du fichier / app / res / values ​​/ strings.xml. La première fois que vous tapez title, AS3 l'indiquera comme une erreur car la ressource chaîne n'est pas encore créée dans strings.xml. Sélectionnez la valeur de l'attribut title(@ string / menuFile) et utilisez la solution rapide (Alt + Entrée sous Windows / Linux | Option + Entrée sous macOS) pour pouvoir créer le fichier de ressources. Voir la figure 7-13

Figure 7-13. Create a new String resource item

Basculez sur MainActivity afin d’ajouter le menu principal nouvellement créé à la barre d’application. Pour ce faire, nous devons remplacer la méthode onCreateOptions de MainActivity. Pour ce faire, vous pouvez utiliser la fonction Méthodes de remplacement de AS3 à partir de la barre de menus principale.

Code → Override Methods.

  1. @Override
  2. public boolean onCreateOptionsMenu(Menu menu) {
  3.  
  4.   MenuInflater inflater = getMenuInflater();   
  5.   inflater.inflate(R.menu.main_menu, menu);
  6.  
  7.   return true; 
  8. }

If you run the application on the emulator, you will see something that looks like Figure 7-14.

Figure 7-14. Menu items in ActionBar (when the action overflow is clicked)

Utilisons quelques images du menu. AS3 est livré avec beaucoup d'images que vous pouvez utiliser pour une large gamme d'applications. Avant de pouvoir utiliser une image, nous devons l’ajouter à notre dossier de ressources. Vouspeut utiliser des ressources rasterisées (bitmap) ou vectorielles pour les images. Dans cet exemple, nous utiliserons des ressources vectorielles.Dans la fenêtre de l'outil de projet, cliquez avec le bouton droit de la souris sur / app / res ➤ Nouveau ➤ Image vectorielle (Figure 7-15).

Figure 7-15. Add a vector asset to the project

Cliquez sur l'icône pour trouver les images qui répondent à vos besoins (Figure 7-16).

Figure 7-16. Configure vector asset dialog

Figure 7-17. Select icon dialog

Pour utiliser les images de l'application, nous devons les associer à chaque élément du fichier de ressources main_menu. Voir Listing 7-6 pour savoir comment faire cela.

Listing 7-6. New main_menu.xml

  1. <?xml version="1.0" encoding="utf-8"?>

  2.  
  3. <menu xmlns:app="http://schemas.android.com/apk/res-auto"                 xmlns:android="http://schemas.android.com/apk/res/android">

  4.  
  5.   <item android:id="@+id/menuFile"         

  6.         android:title="@string/menuFile"         

  7.         android:icon="@drawable/ic_attach_file_black_24dp"

  8.         app:showAsAction="ifRoom"/>                         

  9.  
  10.   <item android:id="@+id/menuEdit"

  11.         android:title="@string/menuEdit"

  12.         android:icon="@drawable/ic_edit_black_24dp"

  13.         app:showAsAction="always"/>                         

  14.  
  15.   <item android:id="@+id/menuHelp"

  16.         android:title="@string/menuHelp"

  17.         android:icon="@drawable/ic_help_black_24dp"

  18.         app:showAsAction="ifRoom"/>   

  19.  
  20.   <item android:id="@+id/menuExit"

  21.         android:title="@string/menuExit"

  22.         android:icon="@drawable/ic_power_settings_new_black_24dp"

  23.         app:showAsAction="always"/>

  24.  
  25. </menu>


Les éléments vectoriels que nous avons ajoutés ont été enregistrés dans / app / res / drawable.Si l’attribut showAsAction est ifRoom, l’icône ne s’affiche que si l’espace disponible est suffisant.Barre d'action; sinon, les utilisateurs ne le verront que lorsqu'ils cliquent sur le bouton de débordement d'action.Si l'attribut showAsAction est défini sur Toujours, l'icône sera toujours visible pour l'utilisateur. Veillez à utiliser ceci avec parcimonie; Si toutes vos icônes sont spécifiées comme "toujours", le moteur d'exécution décide laquelle de vos icônes sera affichée et elles ne seront peut-être pas toutes visibles.

Figure 7-18. Icons on the ActionBar

Pour gérer les événements de chaque élément de menu, nous pouvons utiliser l'attribut android: onClick sur chaque élément ou remplacer la méthode onOptionsItemSelected dans MainActivity.Si vous souhaitez utiliser la route onClick, ajoutez l'attribut onClick à un élément du menu main_menu, comme suit:

  1. <item android:id="@+id/menuEdit"

  2.       android:title="@string/menuEdit"

  3.       android:icon="@drawable/ic_edit_black_24dp"

  4.       app:showAsAction="always"       

  5.       android:onClick="mnuEdit"/>

Then, in MainActivity, implement the mnuEdit method:

  1. public void mnuEdit(MenuItem item) {
  2.  
  3.   Toast.makeText(this, "Edit", Toast.LENGTH_SHORT).show();
  4.  
  5. }

L'autre façon de gérer les événements pour les éléments de menu consiste à remplacer onOptionItemSelected dans MainActivity.

  1. public boolean onOptionsItemSelected(MenuItem item) {
  2.  
  3.   switch(item.getItemId()){
  4.     case R.id.menuFile:    
  5.          showMessage("File");
  6.          break;
  7.      case R.id.menuEdit:
  8.          showMessage("Edit");
  9.          break;
  10.      case R.id.menuHelp:
  11.          showMessage("Help");
  12.          break;
  13.      case R.id.menuExit:
  14.          showMessage("Exit");
  15.          break;
  16.      default:
  17.        showMessage("Default");
  18.   }
  19.  
  20.   return true; 
  21. }

 getItemId indique lequel des éléments de menu sur lequel l'utilisateur a cliqué. Nous allons utiliser cela pour router la logique de programme à l'intérieur de la structure de commutateurNous comparons la valeur de getItemId avec chaque élément de menu.

Listing 7-7. Complete Code for MainActivity

  1. package com.example.ted.actionbar;
  2.  
  3. import android.support.v7.app.AppCompatActivity;
  4.  
  5. import android.os.Bundle; 
  6. import android.view.Menu; 
  7. import android.view.MenuInflater; 
  8. import android.view.MenuItem; 
  9. import android.widget.Toast; 
  10.  
  11. public class MainActivity extends AppCompatActivity {
  12.  
  13.   @Override
  14.   protected void onCreate(Bundle savedInstanceState) {
  15.  
  16.     super.onCreate(savedInstanceState);     
  17.     setContentView(R.layout.activity_main);   
  18. }
  19.  
  20.   @Override
  21.   public boolean onCreateOptionsMenu(Menu menu) {
  22.     // return super.onCreateOptionsMenu(menu);     
  23.     MenuInflater inflater = getMenuInflater();     
  24.     inflater.inflate(R.menu.main_menu, menu);
  25.  
  26.     return true;
  27.  
  28.   }
  29.  
  30.  
  31.   @Override
  32.   public boolean onOptionsItemSelected(MenuItem item) {
  33.  
  34.     //return super.onOptionsItemSelected(item);
  35.  
  36.     switch(item.getItemId()){       
  37.         case R.id.menuFile:
  38.            showMessage("File");
  39.            break;       
  40.  
  41.         case R.id.menuEdit:         
  42.            showMessage("Edit");
  43.            break;     
  44.        case R.id.menuHelp: 
  45.           showMessage("Help");
  46.           break;    
  47.  
  48.        case R.id.menuExit:     
  49.           showMessage("Exit");
  50.           break;      
  51.        default: 
  52.           showMessage("Default");
  53.     }
  54.  
  55.     return true;   
  56. }
  57.  
  58.   private void showMessage(String msg) {
  59.  
  60.     Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
  61.  
  62.   }
  63.  
  64. }

Des fragments

1. Dans les premiers temps d'Android, lorsqu'il fonctionnait uniquement sur les téléphones et qu'il n'y avait pas d'écrans haute résolution, les activités étaient suffisantes pour composer l'interface utilisateur et interagir avec l'utilisateur. Viennent ensuite les tablettes et les écrans haute résolution; Il est devenu de plus en plus difficile de créer des applications pouvant fonctionner (bien) sur les téléphones et les tablettes. Les développeurs ont été confrontés à des choix difficiles. Soit nous créons les applications en choisissant le matériel le moins capable comme cible, le rendant ainsi comme l’approche du moins commun dénominateur; ou nous concevons l’application de manière à s’adapter à divers facteurs de forme en supprimant et en ajoutant des éléments de l’UI en réponse aux capacités du périphérique (ce qui s’est avéré très difficile à effectuer manuellement). La solution d'Android à ce problème était Fragments; Cela a été introduit à un moment donné en 2011, lorsque l'API 11 a été publié (Honeycomb).

2. Les fragments sont un concept assez avancé, et les programmeurs débutants peuvent l’aborder avec inquiétude, mais le concept de base qui le sous-tend est assez simple. Si nous considérons une activité comme une unité de composition pour notre interface utilisateur, considérons un fragment comme une mini-activité: il s’agit d’une unité de composition plus petite. Vous allez généralement afficher (et masquer) des fragments pendant l'exécution en réponse à quelque chose que l'utilisateur a fait; par exemple, incliner l'appareil, basculer de l'orientation portrait à l'orientation paysage et libérer ainsi davantage d'espace à l'écran. Vous pouvez même utiliser des fragments comme stratégie pour vous adapter aux facteurs de forme des périphériques. lorsque l'application est en cours d'exécution sur un écran plus petit, vous n'affichez que certains fragments.

3. Un fragment, comme une activité, comprend deux parties: un programme Java et un fichier de présentation. L'idée est presque la même: définissez les éléments d'interface utilisateur dans un fichier XML, puis gonflez le fichier XML dans le programme Java afin que tous les objets de vue dans le XML deviennent un objet Java. Après cela, nous pouvons référencer chaque objet vue dans le fichier XML à l'aide de la classe R.class. Une fois que nous avons réfléchi à ce concept, imaginons un fragment comme un objet de vue ordinaire que nous pouvons glisser-déposer sur le fichier de mise en page principal. Sauf que, bien sûr, les fragments ne sont pas des vues ordinaires (mais ce sont des vues).

4.  Le flux de travail suivant résume les étapes à suivre pour commencer à utiliser Fragments. Nous les explorerons plus en détail dans le projet de démonstration.

5.  Créer une activité

6.  Créez une classe Fragment (fichier Java) et une ressource de présentation de fragment (fichier XML).

7.  Dans la ressource de mise en forme de fragment, composez l'interface utilisateur en y faisant glisser des éléments de vue, comme dans un fichier de ressources d'activité.

8.  Dans la classe Fragment, substituez la méthode onCreateView et gonflez le fichier XML.

9.  Pour ajouter le fragment à l'activité de manière statique, ajoutez un élément de fragment à activity_main et associez cet élément à la classe Fragment.

10. Ajouter le fragment pendant l'exécution;

11. une. Dans le fichier de mise en forme activity_main, insérez un objet ViewGroup qui servira d’espace réservé pour le fragment.

12. Dans MainActivity.java, créez une instance de la classe Fragment.

13. Obtenez un objet FragmentManager; la méthode getManager () de la classe Activity devrait le faire

14.  réobtenez un objet FragmentTransaction en appelant la méthode beginTransaction () du gestionnaire de fragments.

15.   Ajoutez le fragment à l'activité en appelant la méthode add () de l'objet transaction

Note  L'objet de transaction est ce que vous utiliserez pour gérer la disponibilité et la visibilité des fragments. Utilisez les méthodes d'ajout et de suppression pour attacher et détacher des fragments à / de l'activité. Le sujet des fragments est un sujet important, mais nous essaierons de couvrir au moins les techniques de base de la composition, tant au moment de la conception que de l'exécution.