Share
Dans cette vidéo de mon cours sur la création d'une application de conception de matériaux, vous apprendrez à créer l'interface utilisateur d'une application de conception de matériaux. Vous apprendrez à utiliser des FAB (FloatingActionButtons), des widgets d'entrée avec des étiquettes flottantes, des éléments de menu de la barre d'actions, etc..
Le tutoriel s'appuie sur le travail de configuration de base effectué précédemment dans le cours, mais vous devriez pouvoir suivre et vous pouvez toujours vérifier le code source sur GitHub..
Commencez par créer deux activités: une pour l'écran d'accueil (indiquée à gauche dans la capture d'écran ci-dessous) et une pour les deux autres écrans affichés, identiques à l'exception de leurs titres..
Commençons par créer l’activité pour l’écran d’accueil: faites un clic droit sur le nom de votre paquet et sélectionnez Nouveau> Activité> Activité vide. Vous verrez l'écran suivant:
Comme vous pouvez le constater, ce modèle d'activité comporte déjà un bouton d'action flottant. Changez le titre de l’activité en liste de courses et choisissez le Activité du lanceur champ de laisser Android Studio savoir que cela va être l'écran d'accueil. presse terminer pour générer l'activité. Android Studio essaie de suivre de près les directives de conception des matériaux.
Si vous ouvrez activity_main.xml, vous verrez le code du bouton d'action flottante. Changez la valeur de la propriété source en @ drawable / ic_add_24dp parce que nous voulons que ce bouton affiche le symbole plus. Changer la propriété de teinte pour ajouter @android: couleur / blanc changer la couleur du symbole plus en blanc.
Le bouton d'action flottante est maintenant prêt. Passons maintenant à la création de l'activité pour les écrans d'ajout et de modification d'élément. Cliquez à nouveau avec le bouton de droite sur le nom du paquet et sélectionnez Nouveau> Activité> Activité vide.
Je vais appeler ça ItemActivité et appuyez sur terminer. Cette disposition va avoir deux widgets de saisie de texte, l'un en dessous de l'autre. Par conséquent, il est plus facile d'utiliser une disposition linéaire au lieu d'une disposition relative. Définir son orientation à la verticale.
Dans la mise en page, créez une étiquette pour une mise en page de saisie de texte. Définissez sa largeur sur match_parent et mettre sa hauteur à wrap_content. Dans la balise, ajoutez une balise de texte de saisie et définissez sa largeur sur match_parent et hauteur à wrap_content. Appeler input_item_name. Ensuite, définissez son attribut indice sur Nom de l'article. La valeur que vous spécifiez pour l'indicateur va être rendue sous la forme d'une étiquette flottante animée..
Nous devons maintenant répéter les mêmes étapes pour le deuxième widget de saisie. Vous pouvez donc simplement copier et coller tout ce code. Changer l'identifiant en input_item_quantity et changez l'indice en Quantité.
La présentation de l'activité est presque terminée. Ce qui manque, c'est un bouton de sauvegarde. Pour ajouter un bouton à l'intérieur de la barre d'action, nous devons l'ajouter en tant qu'élément de menu..
Faites un clic droit sur le Ressources dossier et sélectionnez un Nouveau fichier de ressources Android. Changer la Type de ressource à Menu et nommer le fichier menu_item_activity. Ajoutez l'espace de nom de l'application à l'élément racine en tapant simplement appNs et en appuyant Entrer.
Créez ensuite une nouvelle étiquette d’élément pour représenter le bouton d’enregistrement. Définir son identifiant sur save_action et mettre le titre à sauvegarder. Et maintenant, ajoutez un attribut appelé application: showAsAction, et mettre sa valeur à toujours. Cet attribut est important car si vous oubliez de l'ajouter, le bouton de sauvegarde va se retrouver dans le menu de débordement de la barre d'action..
Nous devrions maintenant gonfler le fichier de menu dans ItemActivity. Pour ce faire, ouvrez ItemActivity.java et remplacez sa méthode du menu d'options onCreate.
Ensuite, substituez la méthode onOptionsItemSelected afin que nous soyons avertis lorsque l'utilisateur appuie sur le bouton. À l'intérieur, ajoutez une instruction if et utilisez getItemId vérifier si l'id de l'option sélectionnée correspond à l'id du bouton de sauvegarde, qui est R.id.save_action.
Écrivons maintenant du code pour ouvrir ItemActivity lorsque l’utilisateur appuie sur le bouton d’action flottante. Alors ouvrez MainActivity.java. Le bouton d'action flottante a déjà un sur clic écouteur d'événement attaché à elle. Il contient un code d’espace réservé que vous pouvez supprimer. Nous allons maintenant utiliser l'intention de lancer ItemActivity.
Initialiser l’intention en utilisant Activité principale comme le contexte et ItemActivité comme la classe. Quand ItemActivité ouvre de cette façon, son TITRE devrait être Ajouter un item. Nous pouvons utiliser un extra à cet effet. Et enfin appeler startActivity réellement lancer ItemActivité.
Ouvrez ItemActivity.java maintenant car nous devons utiliser le supplément que nous envoyons. Donc, ajoutez une condition ici pour vérifier si la valeur de retour de la obtenirIntent méthode a un extra appelé TITRE. Si la condition est vraie, utilisez setTitle pour changer le titre. Notez que vous devez utiliser le getStringExtra méthode pour récupérer la valeur de l'extra.
Ajoutons maintenant cette icône "retour" à notre activité.
Pour ce faire, ouvrez AndroidManifest.xml. Ici, à l'intérieur de la balise pour ItemActivité, ajouter un parentActivityName attribuer et définir sa valeur à Activité principale.
Nous pouvons maintenant exécuter notre application pour voir ce que nous venons de créer.
Notre écran d'accueil a maintenant un bouton d'action flottant. Si vous cliquez dessus, vous serez dirigé vers ItemActivity.
Et si vous essayez de saisir quelque chose dans les widgets d’entrée, vous devriez pouvoir voir leurs étiquettes flottantes..
Vous savez maintenant comment créer des interfaces utilisateur comportant des boutons d'action flottante et des présentations de saisie de texte. Avant de terminer, laissez-moi vous donner un conseil rapide. Si vous n'aimez pas les couleurs par défaut de l'application, qui sont des nuances d'indigo et de rose, vous pouvez facilement les changer en allant simplement au fichier colors.xml et en modifiant les valeurs hexadécimales des couleurs ici..
Dans la prochaine leçon du cours, vous allez apprendre à utiliser un autre widget d'interface utilisateur compatible avec la conception de matériau, appelé vue Recycleur..
La conception matérielle de Google est rapidement devenue un langage de conception populaire et largement implémenté. De nombreux utilisateurs d'Android s'attendent maintenant à ce que leurs applications soient conformes aux spécifications de conception matérielle, et les concepteurs d'applications s'attendent à ce que vous puissiez appliquer ses principes de base..
Dans le cours complet, Construire une application de conception matérielle, je vais vous montrer comment créer une application de conception matérielle pratique et entièrement fonctionnelle, prête à être publiée sur Google Play. À partir de la conception de l'application créée par l'instructeur Adi Purdila dans son cours intitulé Apprendre à connaître la conception de matériel, vous apprendrez à travailler avec les différents widgets d'interface utilisateur de conception de matériel disponibles dans la bibliothèque de support Android. Vous apprendrez également à effectuer des opérations de lecture et d’écriture sur une base de données mobile moderne appelée Realm..
Accentsconagua