Comment créer le "look" pour votre application Android avec Java - les nuls

Une directive générale sur le développement d'applications Android vous permet de séparer la logique de la présentation. En termes moins techniques, la directive met en garde contre la confusion entre une application et l'apparence d'une application. La ligne directrice s'applique à de nombreux aspects de la vie. Par exemple, si vous concevez un site Web, demandez aux artistes de faire la mise en page et demandez aux geeks de coder. Si vous rédigez un rapport, faites d'abord écrire les idées. Plus tard, vous pouvez vous inquiéter des polices et des styles de paragraphe.

La documentation sur le développement d'applications décrit des techniques et des cadres spécifiques pour vous aider à séparer la forme de la fonction.

Pour ajouter des boutons, des boîtes et d'autres gadgets à votre application, procédez comme suit:

Lancez Android Studio et commencez un nouveau projet. Lorsque vous avez terminé ces étapes, vous avez un tout nouveau projet avec une activité vide. Le projet apparaît dans la fenêtre principale d'Android Studio.
Dans la branche app / res / layout du nouveau projet (dans la fenêtre de l'outil Projet de la fenêtre principale), double-cliquez sur activity_main. xml . Par conséquent, l'outil Designer d'Android Studio affiche le contenu de activity_main. xml . L'outil Concepteur dispose de deux modes: le mode Création pour l'édition visuelle par glisser-déposer et le mode Texte pour l'édition de code XML. Le bas de l'outil Designer comporte donc deux onglets: un onglet Conception et un onglet Texte.
Cliquez sur l'onglet Conception.

En mode Conception, vous voyez la palette, l'arborescence des composants, deux écrans de prévisualisation et le volet Propriétés.

Si vous ne voyez pas la palette, recherchez le petit bouton Palette sur le bord gauche de l'outil Designer. Si vous cliquez sur ce bouton, la palette devrait apparaître.

L'arborescence des composants a une branche étiquetée TextView - "Hello World! " Cette branche représente le texte Hello World! qui apparaît automatiquement dans le cadre de votre application. Vous n'avez pas besoin de ce texte dans votre application.
Sélectionnez la branche TextView - "Hello World!" dans l'arborescence des composants, puis appuyez sur Supprimer. La branche "Hello World" disparaît de l'arborescence des composants et les mots Hello World! disparaît de l'écran d'aperçu.

Les étapes suivantes vous guident tout au long de la création de l'application.

La mise en page de l'application comporte trois types de composants différents, et chaque type de composant porte plusieurs noms différents. Voici les trois types de composants:
- EditText (aussi appelé texte brut): Un endroit où l'utilisateur peut modifier une seule ligne de texte. Un nom commun pour ce type de composant est un champ de texte.
- Bouton : Un bouton est un bouton est un bouton. Voulez-vous cliquer sur le bouton? Allez-y et cliquez dessus.
- TextView (également appelé Texte brut, Texte large, Texte moyen, etc.): Emplacement où l'application affiche du texte. Normalement, l'utilisateur ne modifie pas le texte dans un composant TextView .
  Pour être extrêmement précis, les composants EditText , Button et TextView d'Android ne sont pas vraiment différents. Chaque composant EditText est une sorte de TextView , et chaque Button est aussi une sorte de TextView . Dans le langage de la programmation orientée objet, la classe EditText étend la classe TextView . La classe Button étend également la classe TextView .
Faites glisser un élément Texte brut (c'est-à-dire, EditText ) du groupe Widgets de la palette vers l'un des écrans d'aperçu. L'élément Texte brut peut atterrir dans un endroit laid. C'est bon. Vous ne créez pas une œuvre d'art. Vous apprenez à écrire du code Java.
Répétez l'étape 5, cette fois en plaçant un élément Button sur l'écran d'aperçu. Placez le composant Button sous le composant Texte brut (EditText). Plus tard, si vous n'aimez pas l'endroit où vous placez le composant Button, vous pouvez facilement le déplacer en le faisant glisser ailleurs sur l'écran d'aperçu.
Répétez l'étape 6 en mettant cette fois un composant TextView sur l'écran d'aperçu. Placez le composant TextView sous le composant Button mais, encore une fois, c'est à vous de décider.

Dans les étapes restantes, vous modifiez le texte qui apparaît dans chaque composant.
Sélectionnez le composant Bouton sur l'écran d'aperçu ou dans l'arborescence des composants. Par conséquent, le volet Propriétés de l'outil Designer affiche certaines des propriétés du composant Button.

Après avoir sélectionné le composant Bouton , vous pouvez voir le mot TextView dans le volet Propriétés. Ne confondez pas cela avec le composant TextView que vous avez fait glisser depuis la palette à l'étape 7. Avec le bouton sélectionné, tous les champs du volet Propriétés font référence à ce composant Button . Si l'apparition du mot TextView dans le volet Propriétés vous rend confus, reportez-vous à l'icône Technical Stuff à l'étape 4. (Si le mot TextView ne vous rend pas confus, ne le faites pas ne lisez pas l'icône Technical Stuff!)
Dans le volet Propriétés, dans le champ text, tapez le mot COPY. Lorsque vous le faites, le mot COPY apparaît sur la face du composant Button . Vous pouvez vérifier cela en regardant l'écran d'aperçu de Wysiwyg.

Dans le volet Propriétés, vous pouvez voir deux champs étiquetés texte. Si oui, l'un est pour tester et l'autre pour exécuter l'application. En cas de doute, il ne fait aucun mal de taper le mot COPY dans ces deux champs.
Répétez les étapes 8 et 9 avec les composants EditText et TextView de votre activité, mais cette fois, ne placez pas le mot COPY dans ces composants. Au lieu de cela, supprimez les caractères de ces composants.Lorsque vous avez terminé, les écrans de prévisualisation ressemblent aux écrans ci-dessous. Si vos écrans de prévisualisation ne ressemblent pas exactement à cela, ne vous inquiétez pas. Vos composants peuvent être dispersés à différents endroits sur les écrans de prévisualisation ou les créateurs d'Android Studio peuvent avoir modifié la présentation des écrans de prévisualisation. Tant que vous avez un composant EditText , un composant Button et un composant TextView , tout va bien.
Choisissez Fichier → Tout enregistrer pour enregistrer votre travail jusqu'à présent.