Bonjour, Habr!
Dans cet article, nous considérerons le processus de création d'écrans basé sur les dispositions de la
première partie .
Disposition de l'écran
Écran d'accueil
L'écran principal contiendra des fragments et des menus de navigation. Écrivons le menu, après avoir créé les icônes. Pour ce faire, ouvrez le dossier
dessinable , cliquez sur
Nouveau et sélectionnez
Actifs vectoriels . Dans la fenêtre qui apparaît, cliquez sur
Images clipart et sélectionnez les
icônes Paramètres ,
Rechercher et
Coller le contenu . La taille laissera 24 par 24.
Créez un fichier de
chaînes dans le dossier de
valeurs et ajoutez les lignes suivantes:
<resources> <string name="title_home">Home</string> <string name="title_search">Search</string> <string name="title_settings">Settings</string> </resources>
Mettre toutes les lignes dans un seul fichier simplifiera la poursuite de la localisation de l'application.
Si vous souhaitez ajouter une autre langue, par exemple le russe, créez un fichier avec l'attribut
Paramètres régionaux , sélectionnez la langue souhaitée dans la liste
Langue et ajoutez les mêmes lignes, après les avoir traduites.
Nous passons maintenant directement à la création du menu. Dans le dossier
menu , créez le
fichier resourse Menu , nommez-le "
bottom_nav_menu " et ajoutez-y le code suivant:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_content_paste_black_24dp" android:title="@string/title_home"/> <item android:id="@+id/navigation_search" android:icon="@drawable/ic_search_black_24dp" android:title="@string/title_search"/> <item android:id="@+id/navigation_settings" android:icon="@drawable/ic_settings_black_24dp" android:title="@string/title_settings"/> </menu>
Créez un fichier de
styles dans le dossier de
valeurs et ajoutez le code suivant:
<resources> <style name="MyLinearLayout"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:orientation">vertical</item> </style> </resources>
Les styles créés sont utilisés pour les vues afin de séparer les fichiers de marquage et les fichiers de style. Ils contiennent des attributs de mise en forme qui sont responsables de l'apparence et du comportement des éléments. Tout d'abord, vous pouvez écrire tous les attributs dans le fichier de balisage, puis les exporter dans le fichier de styles en cliquant sur la combinaison suivante: RMB ->
Refactor ->
Extract ->
Style . Le style ne sera disponible que dans les vues. En savoir plus à ce sujet
ici .
Après cela, vous pouvez passer directement à la création d'une mise en page pour l'activité. Dans le dossier de
présentation , créez un
fichier de ressources de présentation , nommez-le "
activity_main " et ajoutez le code suivant:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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" tools:context=".MainActivity" style="@style/MyLinearLayout"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_container" android:layout_marginBottom="?attr/actionBarSize" /> <android.support.design.widget.BottomNavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/nav_view" app:menu="@menu/bottom_nav_menu" android:background="#6986c2" android:layout_gravity="bottom"/> </FrameLayout>
Voyons ce qui s'est passé.
Écran de l'onglet Accueil
Ouvrez le fichier de
styles et ajoutez des styles pour la barre d'outils avec un TextView et un RecyclerView enfant:
<style name="MyToolbar"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">#6986c2</item> </style> <style name="Toolbar_TextView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:gravity">center</item> </style> <style name="MyRecyclerView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:background">#fff</item> </style>
Ajoutez les lignes suivantes au fichier de
chaînes :
<string name="desc_home">Notification list</string> <string name="movie_title">Movie title</string> <string name="default_imdb_rating">IMDb rating: 7,4</string>
Créez maintenant une
mise en page appelée "
fragment_home " et ajoutez-y le code suivant:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_home" style="@style/MyToolbar"> <TextView android:text="@string/desc_home" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_home" style="@style/MyRecyclerView"/> </LinearLayout>
Ajoutez les icônes
Notification et
Notification none au dossier
dessinable .
Passons à la création d'un élément de liste. Ajoutez le fichier "
item_movie " dans le dossier de
mise en page et écrivez-y le code suivant:
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView 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="120dp" app:cardCornerRadius="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="8dp" android:layout_marginRight="16dp" android:layout_marginBottom="8dp" app:cardBackgroundColor="#00FFFFFF"> <ImageView android:layout_width="98dp" android:layout_height="98dp" app:srcCompat="@mipmap/ic_launcher" android:id="@+id/item_image" android:layout_gravity="center|start" android:layout_marginLeft="10dp"/> <TextView android:text="@string/movie_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_title" android:layout_marginTop="18dp" android:layout_marginLeft="120dp" android:textStyle="bold" android:textColor="@android:color/black" android:ellipsize="end" android:maxLines="1" android:layout_marginRight="16dp"/> <TextView android:text="@string/default_imdb_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_rating" android:layout_marginLeft="120dp" android:layout_marginTop="50dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_notifications_black_24dp" android:id="@+id/item_notification" android:layout_gravity="bottom|right" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" tools:ignore="VectorDrawableCompat"/> </android.support.v7.widget.CardView>
Regardons le résultat:
Écran de l'onglet Recherche
Dans le fichier de
chaînes , ajoutez l'en-tête de la barre d'outils:
<string name="desc_settings">Preferences</string>
Et créez une
mise en page appelée "
fragment_search ", en ajoutant simultanément le bloc de code suivant:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_search" style="@style/MyToolbar"> <android.support.v7.widget.SearchView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/border_search_view" android:layout_marginRight="15dp" android:id="@+id/search_view"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_search" style="@style/MyRecyclerView"/> </LinearLayout>
Voyons le résultat:
Écran de l'onglet Paramètres
Cet écran s'est avéré être le plus volumineux, car il a peu de styles répétitifs.
Ajoutez le code de TextView et CardView au fichier de
styles :
<style name="MyTextView"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textStyle">bold</item> <item name="android:textColor">@android:color/black</item> <item name="android:layout_marginLeft">16dp</item> <item name="android:layout_marginTop">8dp</item> <item name="android:layout_marginBottom">8dp</item> <item name="android:typeface">normal</item> </style> <style name="MyCardView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_margin">16dp</item> </style>
Ajoutez également quelques lignes supplémentaires au fichier de
chaînes :
<string name="imdb_rating">IMDb rating</string> <string name="default_rating">6</string> <string name="movie_genres">Movie genres</string>
Vous devez également ajouter l'icône de
bordure étoile au dossier
dessinable .
Créez une
mise en page nommée "
fragment_settings " et ajoutez le code suivant:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" style="@style/MyLinearLayout" android:background="#fff"> <android.support.v7.widget.Toolbar style="@style/MyToolbar" android:id="@+id/toolbar_home" app:title="@string/desc_home"> <TextView android:text="@string/desc_settings" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_star_border_black_24dp" android:layout_gravity="right" android:layout_marginRight="50dp" android:layout_marginTop="8dp" tools:ignore="VectorDrawableCompat"/> <TextView android:text="@string/default_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/rating_value" android:layout_gravity="right" android:layout_marginRight="40dp" android:layout_marginTop="8dp" android:textColor="#666666"/> <TextView android:text="@string/imdb_rating" android:id="@+id/textView" style="@style/MyTextView"/> <SeekBar style="@style/Widget.AppCompat.SeekBar.Discrete" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="10" android:progress="6" android:id="@+id/seek_bar" android:layout_marginLeft="16dp" android:layout_marginTop="50dp" android:layout_marginBottom="20dp" android:layout_marginRight="16dp"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <TextView android:text="@string/movie_genres" style="@style/MyTextView"/> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00FFFFFF" android:layout_marginLeft="16dp" android:layout_marginTop="36dp" android:layout_marginBottom="16dp" android:layout_marginRight="16dp" android:id="@+id/recView_settings"/> </android.support.v7.widget.CardView> </LinearLayout>
Créez un élément pour la liste. Ajoutez le fichier "
item_genre " dans le dossier de
mise en page et écrivez le code suivant:
<?xml version="1.0" encoding="utf-8"?> <CheckBox xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:text="@string/movie_genres" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/item_check_box" />
Regardons le résultat:
Test de conception
Voyons à quelle fréquence la même section de l'écran est redessinée, c'est-à-dire qu'un travail supplémentaire est effectué.
Couleur bleu - redessine une fois. Bon.
Couleur verte - redessine deux fois. Optimisation requise.
Couleur rouge clair - redessine
trois fois. Dommage.
Couleur rouge - redessine plus de
4 fois. Quelque chose a mal tourné.
Et si rien n'est peint, l'intrigue n'est pas redessinée. Excellent travail.
Pourquoi tout est rouge sur la deuxième capture d'écran? Un fond blanc a été ajouté à chaque mise en page, RecyclerView et CardView, ce qui a entraîné le chevauchement des calques. Ce n'est pas le cas dans la conception décrite ci-dessus, l'exemple ne montre que l'application infructueuse de la stylisation.
Dans la première capture d'écran, un seul arrière-plan a été utilisé sur LinearLayout pour le fragment Home, dont le redessin a été annulé par programme à l'aide de la méthode suivante:
window.setBackgroundDrawable(null)
Voyons combien de temps il faut pour rendre les images.
Cyan est responsable du temps utilisé pour créer et mettre à jour la vue.
La partie violette représente le temps mis pour transférer les ressources de rendu du flux.
Le rouge est le moment de dessiner.
Une couleur orange indique le temps que le processeur a mis à attendre que le GPU termine son travail. C'est une source de problèmes avec de grandes quantités. - Alexander Klimov
Dans notre cas, presque tous les onglets sont dessinés en moins de 16 ms, c'est-à-dire en dessous de la barre verte. Si la barre est plus grande que cette ligne, le programme peut ralentir.
Conclusion
Dans le prochain article, nous envisagerons de travailler avec le serveur, et pendant que l'auteur l'écrit, vous pouvez évaluer la conception actuelle dans l'enquête ci-dessous.
Si certains points restent flous, posez des questions dans les commentaires.
Si vous pensez que la conception (XML) peut être simplifiée ou améliorée, veuillez en parler.