Configuration du projet

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

Configuration du projet

 

  1. Créons un projet pour démontrer des fragments:Créez un nouveau projet avec les détails suivants (Tableau 7-3).

Table 7-3. Fragments App, Project Details

Application name

Fragments

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)
  1. Créez une nouvelle classe dans la barre de menus principale, Fichier File Nouveau Classe Java. Nommez-le FragmentA et étendez la classe Fragment. Assurez-vous qu'il se trouve dans le même package que la classe MainActivity.

package com.example.ted.fragments; import android.app.Fragment; public class FragmentA extends Fragment { }

Note            Au fur et à mesure que vous tapez l'extrait de code étend Fragment, AS3 vous proposera deux packages possibles. L’un est android.app.Fragment (c’est celui que nous voulons) et l’autre est android.support.v4.app.Fragment (nous n’en avons pas besoin). Ce dernier package ne concerne que le cas où vous avez l’intention d’exécuter cette application sur des versions d’Android inférieures à API 11, mais le SDK minimal de notre application est l’API 23; nous n’avons donc pas besoin de la bibliothèque de prise en charge de la v4.

  1. Créez un nouveau fichier de mise en page. ce sera le fichier de présentation de la classe Fragment. Vous pouvez le faire depuis la fenêtre de l’outil du projet. Cliquez avec le bouton droit sur le dossier res, Nouveau - Fichier de ressources de mise en page. Nommez le nouveau fichier fragment_a, laissez l'élément racine par défaut et assurez-vous qu'il se trouve dans le répertoire "layout" (voir Figures 7-19 et 7-20).

Figure 7-19. Create a new layout resource file

Figure 7-20. New layout resource file dialog for fragment_a

Placez un objet TextView sur fragment_a. Un fichier de ressources fragmenté n'est pas très différent du fichier de ressources de notre MainActivity. Ils sont tous deux Viewgroups, et en tant que tels, ils sont censés contenir d'autres objets de vue. Ainsi, toutes les techniques que nous avons apprises sur la composition d'objets de vue dans un fichier de ressources de présentation s'appliquent également aux fragments. Le fragment utilise une présentation de contrainte (identique à activity_main). Vous pouvez donc utiliser l'inspecteur de contraintes et l'inspecteur d'attributs pour personnaliser l'aspect du fragment. L'apparence de TextView a été légèrement modifiée dans cet exemple. Le Listing 7-1 montre le code XML de la ressource fragmentée, tandis que la Figure 7-21 l’affiche en mode conception.

 

Figure 7-21. fragment_a layout file

Listing 7-8. /app/res/layout/fragment_a

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

  2.  
  3. <android.support.constraint.ConstraintLayout

  4.  
  5.   xmlns:android="http://schemas.android.com/apk/res/android"     

  6.   xmlns:app="http://schemas.android.com/apk/res-auto"    

  7.   xmlns:tools="http://schemas.android.com/tools"

  8.  
  9.   android:layout_width="match_parent" 

  10.   android:layout_height="match_parent">

  11.  
  12.   <TextView

  13.  
  14.     android:id="@+id/textView" 

  15.     android:layout_width="203dp" 

  16.     android:layout_height="78dp" 

  17.     android:layout_marginTop="94dp" 

  18.     android:gravity="center" 

  19.     android:text="Hello" 

  20.     android:textSize="18sp"

  21.  
  22.     app:layout_constraintLeft_toLeftOf="parent"      

  23.     app:layout_constraintRight_toRightOf="parent"   

  24.     app:layout_constraintTop_toTopOf="parent"/> 

  25. </android.support.constraint.ConstraintLayout>
  1. Associez le fichier de disposition de fragment à la classe Fragment. Dans FragmentA.java, nous allons remplacer le onCreateViewMethod et gonfler le fichier de ressources du fragment.

 

Listing 7-9. onCreateView Method of FragmentA

  1. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) 
  2. {
  3.  
  4.   View v = inflater.inflate(R.layout.fragment_a,container,attachToRoot:false);
  5.   return v;
  6.  }
  1. Comme la méthode setContentView de Activity, inflate lit le fichier de ressources XML (1er paramètre), crée les objets Java réels de manière à pouvoir les référencer ultérieurement dans la classe R.class, puis attache les objets Java créés à l'emplacement où se trouve le fragment. embedded (2nd paramètre) - dans ce cas, l'objet conteneur est notre activité. La dernière instruction du rappel consiste à simplement renvoyer l'objet View créé par l'inflateur.Nous allons placer le fichier de ressources fragment dans le fichier de disposition activity_main, comme s'il s'agissait d'un autre objet de vue (par exemple, TextView ou Button). Ouvrez activity_main en mode conception. De la palette, allez à

 Layouts ➤ <fragment> (Figure 7-22).

Figure 7-22. Embed the fragment layout file in activity_main.

 

Choisissez le fragment que nous avons créé dans la boîte de dialogue (Figure 7-23).

Figure 7-23. Choose the fragment

  1. Le fragment est un objet ViewGroup, ce qui signifie qu’il ne s’agit que d’un autre objet vue. Vous pouvez le déplacer dans activity_main comme n'importe quel autre widget. Déplacez-le à sa position approximative et utilisez les outils de l'inspecteur de contraintes pour la fixer (Figure 7-24).

Figure 7-24. activity_main with the fragment layout file

 

Si vous exécutez l'application, vous devriez voir quelque chose comme Figure 7-25. 

Figure 7-25. Fragments app, running

Les listes de codes complètes pour FragmentA, activity_main.xml et MainActivity figurent dans les listes 7-10, 7-11 et 7-12, respectivement. La liste complète des codes pour fragment_a est donnée dans le Listing 7-10.

Listing 7-10. Complete Code Listing for FragmentA.java

 

  1. package com.example.ted.fragments;
  2.  
  3. import android.app.Fragment; import android.os.Bundle;
  4.  
  5. import android.support.annotation.Nullable; 
  6. import android.view.LayoutInflater;
  7.  
  8. import android.view.View; 
  9. import android.view.ViewGroup; 
  10.  
  11. public class FragmentA extends Fragment {
  12.  
  13.   @Nullable   @Override
  14.  
  15.    public View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container,Bundle savedInstanceState) {
  16.  
  17.     View v = inflater.inflate(R.layout.fragment_a,container,false);
  18.     return v;
  19.  
  20.   }
  21.  
  22. }

Listing 7-11. Complete Code Listing for activity_main

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

  2.  
  3. <android.support.constraint.ConstraintLayout

  4.    xmlns:android="http://schemas.android.com/apk/res/android"

  5.    xmlns:app="http://schemas.android.com/apk/res-auto"

  6.    xmlns:tools="http://schemas.android.com/tools"

  7.    android:layout_width="match_parent"

  8.    android:layout_height="match_parent"

  9.    tools:context="com.example.ted.fragments.MainActivity">

  10.  
  11.   <TextView

  12.  
  13.     android:id="@+id/textView2"

  14.     android:layout_width="wrap_content" 

  15.     android:layout_height="wrap_content" 

  16.     android:text="Hello World!"

  17.     app:layout_constraintBottom_toBottomOf="parent" 

  18.     app:layout_constraintLeft_toLeftOf="parent" 

  19.     app:layout_constraintRight_toRightOf="parent" 

  20.     app:layout_constraintTop_toTopOf="parent" 

  21.     app:layout_constraintVertical_bias="0.101"/>

  22.  
  23.   <fragment     android:id="@+id/fragment"

  24.  
  25.     android:name="com.example.ted.fragments.FragmentA"

  26.     android:layout_width="wrap_content" 

  27.     android:layout_height="wrap_content" 

  28.     android:layout_marginTop="15dp" 

  29.     app:layout_constraintLeft_toLeftOf="parent" 

  30.     app:layout_constraintRight_toRightOf="parent" 

  31.     app:layout_constraintTop_toBottomOf="@+id/textView2"/> </android.support.constraint.ConstraintLayout>

  32.  
  33.  

Listing 7-12. Code Listing for MainActivity.java

  1. package com.example.ted.fragments;
  2.  
  3. import android.support.v7.app.AppCompatActivity; 
  4. import android.os.Bundle; 
  5. public class MainActivity extends AppCompatActivity {
  6.  
  7.   @Override
  8.  
  9.   protected void onCreate(Bundle savedInstanceState) {
  10.  
  11.     super.onCreate(savedInstanceState); 
  12.     setContentView(R.layout.activity_main);
  13.  
  14.   }
  15.  
  16. }

Nous n'avons rien à faire dans notre MainActivity.java car le fragment a été ajouté de manière statique ou déclarative. Nous avons simplement intégré le fragment à activity_main, car il ne s'agissait que d'un autre objet View. 

Ajout de fragments par programme

Bien que nous puissions construire des interfaces utilisateur avec des fragments pendant la phase de conception, l'ajout de fragments au moment de l'exécution rend notre application plus réactive. Vous pouvez masquer ou afficher des fragments en fonction de la taille de l'écran du périphérique ou de son orientation actuelle. Pour ajouter des fragments à l'exécution, nous aurons besoin des objets FragmentManager et FragmentTransaction. Un objet de transaction fragment est celui qui est chargé d'ajouter et de supprimer des fragments d'une activité. Pour obtenir une transaction de fragment, nous avons besoin d'un gestionnaire de fragments.Créons un nouveau projet pour cet exercice afin de pouvoir conserver le projet précédent à titre de référence. Voir le tableau 7-4 pour les détails du projet.

Table 7-4. Fragments2 App, Project Details

Application name

Fragments2
Lieu du projet Utilisez la valeur par défaut
Facteur de forme Téléphone et tablette seulement
SDK minimum API 23 guimauve
Type d'activité Vide
Nom de l'activité MainActivity (par défaut)

Layout name

 activity_main (par défaut)

 Ce projet utilisera les mêmes fichiers que ceux utilisés dans le projet précédent (Fragments). Avant que nous puissions procéder, vous devez procéder comme suit.Ce projet utilisera les mêmes fichiers que ceux utilisés dans le projet précédent (Fragments). Avant que nous puissions procéder, vous devez procéder comme suit.1. Créez une classe de fragments, FragmentA.java (comme dans le projet précédent)2. Créez un fichier de présentation pour le fragment, fragment_a (comme dans le projet précédent), mais n’ajoutez pas la présentation de fragment dans activity_main. Au lieu de cela, nous allons ajouter le fragment de avec MainActivity.javaLes codes de fragment_a.xml, FragmentA.java et activity_main.xml figurent dans les listes 7-13, 7-14 et 7-15, respectivement. 

Listing 7-13. Fragment_a

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

  2.  
  3. <android.support.constraint.ConstraintLayout

  4.  
  5.   xmlns:android="http://schemas.android.com/apk/res/android"  

  6.   xmlns:app="http://schemas.android.com/apk/res-auto"   

  7.   xmlns:tools="http://schemas.android.com/tools" 

  8.   android:layout_width="match_parent" 

  9.   android:layout_height="match_parent">

  10.  
  11.   <TextView

  12.  
  13.     android:id="@+id/textView" 

  14.     android:layout_width="203dp" 

  15.     android:layout_height="78dp" 

  16.     android:layout_marginTop="94dp" 

  17.     android:gravity="center" 

  18.     android:text="Hello" 

  19.     android:textSize="18sp"

  20.  
  21.     app:layout_constraintLeft_toLeftOf="parent"  

  22.     app:layout_constraintRight_toRightOf="parent"   

  23.     app:layout_constraintTop_toTopOf="parent"/> 

  24. </android.support.constraint.ConstraintLayout>

Listing 7-14. FragmentA.java

  1. package com.example.ted.fragments;
  2.  
  3. import android.app.Fragment; import android.os.Bundle;
  4. import android.support.annotation.Nullable; 
  5. import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; 
  6.  
  7. public class FragmentA extends Fragment {
  8.  
  9.   @Nullable   @Override
  10.  
  11.    public View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container,Bundle savedInstanceState) {
  12.  
  13.     // return super.onCreateView(inflater,container,savedInstanceState);
  14.  
  15.     View v = inflater.inflate(R.layout.fragment_a,container,false);
  16.     return v;
  17.  
  18.   }
  19.  
  20. }

Listing 7-15. activity_main

<

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

  2.  
  3. <android.support.constraint.ConstraintLayout

  4.  
  5.   xmlns:android="http://schemas.android.com/apk/res/android"   

  6.   xmlns:app="http://schemas.android.com/apk/res-auto"   

  7.   xmlns:tools="http://schemas.android.com/tools"

  8.  
  9.   android:layout_width="match_parent" 

  10.   android:layout_height="match_parent"

  11.  
  12.   tools:context="com.example.ted.fragments.MainActivity">

  13.  
  14.   <TextView

  15.  
  16.     android:id="@+id/textView2" 

  17.     android:layout_width="wrap_content" 

  18.     android:layout_height="wrap_content" 

  19.     android:text="Hello World!"

  20.  
  21.     app:layout_constraintBottom_toBottomOf="parent" 

  22.     app:layout_constraintLeft_toLeftOf="parent" 

  23.     app:layout_constraintRight_toRightOf="parent" 

  24.     app:layout_constraintTop_toTopOf="parent" 

  25.     app:layout_constraintVertical_bias="0.101"/> </android.support.constraint.ConstraintLayout>

Maintenant que la configuration est terminée, nous pouvons commencer à ajouter le fragment à l'activité au moment de l'exécution. Ces codes résideront dans MainActivity.java. 

Listing 7-16. MainActivity.java

public class MainActivity extends AppCompatActivity {

  @Override

  protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);

    FragmentA f = new FragmentA();                  

    FragmentManager fm = getFragmentManager();           FragmentTransaction ft = fm.beginTransaction();      ft.add(R.id.frag_placeholder,f,s:"");                ft.commit();                                    

  }

}

Créer une instance de FragmentAObtenir le gestionnaire de fragments pour cette activité (MainActivity)Lorsqu'un gestionnaire de fragments commence une transaction, cet appel renvoie un objet TransactionManager.Nous pouvons maintenant ajouter notre fragment pendant l'exécution en utilisant la méthode add. Cette méthode prend en compte trois paramètres, mais seuls les deux premiers sont importants pour nous. Le premier paramètre est un identifiant de ressource de vue (nous ne l’avons pas encore créé; nous le créerons dans le Listing 7-17), et le second paramètre est l’instance de notre classe fragment (FragmentA)Nous devrions appeler la méthode commit () pour que le fragment soit visible dans l'activitéImportant                     Lors de l'ajout d'un fragment au cours de l'exécution, la présentation activity_main DOIT contenir un objet de vue qui servira d'espace réservé pour le fragment. Dans notre exemple, il s'agit d'une vue de disposition Frame (id: frag_placeholder). 

Listing 7-17. activity_main.xml

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

<android.support.constraint.ConstraintLayout

  xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:app="http://schemas.android.com/apk/res-auto"   xmlns:tools="http://schemas.android.com/tools"

  android:layout_width="match_parent"   android:layout_height="match_parent"   tools:context="com.example.ted.fragments2.MainActivity">

  <TextView

    android:id="@+id/textView2"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_marginBottom="245dp"     android:text="Hello World!"

    app:layout_constraintBottom_toBottomOf="parent"     app:layout_constraintLeft_toLeftOf="parent"     app:layout_constraintRight_toRightOf="parent"     app:layout_constraintTop_toBottomOf="@+id/frag_placeholder"/>

  <FrameLayout                                    android:id="@+id/frag_placeholder"            android:layout_width="368dp"     android:layout_height="0dp"     android:layout_marginBottom="8dp"     android:layout_marginTop="8dp"

    app:layout_constraintBottom_toTopOf="@+id/textView2"     app:layout_constraintLeft_toLeftOf="parent"     app:layout_constraintRight_toRightOf="parent"     app:layout_constraintTop_toTopOf="parent">   </FrameLayout>

</android.support.constraint.ConstraintLayout>

Cela deviendra un espace réservé pour notre fragment. Le contenu de nos fragments ne peut pas être vu en mode conception car la disposition du cadre ne contient rien. Vous pouvez voir le contenu du fragment au moment de l'exécutionC’est cet identifiant que nous utiliserons lorsque l’objet transaction fragment ajoutera le fragment.La figure 7-26 montre l'application Fragments2 en cours d'exécution.

.

Figure 7-26. Fragments2, running

Ceci conclut le chapitre sur les éléments de l'interface utilisateur. Nous avons à peine effleuré la conception de l'interface utilisateur, mais l'ajout de thèmes et de couleurs, à l'aide de la barre de menus App, et l'utilisation judicieuse de Fragments devraient donner une touche de finition à vos applications.