[JAVA] Introduction à kotlin pour les développeurs iOS ⑤-XML pratique

Écrivons-le enfin

C'est pourquoi c'est une édition pratique. Je vais créer une application cette fois et la prochaine fois. Tout le monde aime les "calculatrices".

Faites d'abord un projet

Commençons par créer un projet, qui sert également de revue sommaire.

Quoi qu'il en soit, lancez Android Studio.

Cliquez ensuite sur Démarrer un nouveau projet AndroidStudio.

Le nom du projet sera Calculatrice.

Et lorsque le projet est terminé, L'écran ressemble à ceci.

Cette fois sur XML

Alors, ouvrez d'abord activity_main.xml. Cependant, s'il s'agit d'un paramètre normal, il doit être ouvert immédiatement après la création du projet, alors changez simplement l'onglet. Comme ça. Si vous faites une erreur et que activity_main.xml n'est pas ouvert ou fermé, recherchez activity_main.xml dans la barre de navigation de gauche. Si la barre de navigation est définie sur "Android", elle doit être dans app> res> layout>.

Au fait, avez-vous ouvert avec succès activity_main.xml? Si vous l'ouvrez, vous devriez voir un écran comme celui-ci. Ensuite, j'ajouterai une explication tout en le faisant.

La première porte démoniaque "Layouts"

La première chose à laquelle il faut faire attention est le lieu appelé "Component Tree". Je pense qu'il apparaît en bas à gauche de l'écran principal dans le réglage standard. Ici, vous pouvez voir quelle est la structure d'une pièce sur l'écran actuel. Dans l'état initial, il n'y a qu'un TextView avec "Hello World!" Écrit dans la disposition des contraintes. Donc, pour ceux qui ont créé des applications iOS en utilisant Xcode, il peut s'agir de "Layout?". Si vous recherchez quelque chose de similaire dans cette mise en page, Xcode, le plus proche est "StackView". Je veux dire, "Disposition linéaire" correspond à cela. Depuis le 15 mars 2017, la politique de Google semble être de se concentrer sur la mise en page des contraintes. Cela semble être utilisé de la même manière que le soi-disant AutoLayout, mais il y a encore de nombreuses parties inconnues. Donc, cette fois, j'utiliserai le LinearLayout que je connais.

Comment utiliser LinearLayout

Maintenant que le fichier XML standard est ConstraintLayout, vous devez le réécrire dans LinearLayout. Vous pouvez réécrire le XML directement, mais cette fois, c'est pour les débutants en développement Android, alors sautons l'histoire compliquée et supprimons une fois activity_main.xml et recréons-le. Cliquez avec le bouton droit sur activity_main.xml dans la barre de navigation et sélectionnez Libérer. Après la suppression, cliquez avec le bouton droit au même emplacement> nouveau> fichier de ressources de mise en page. Un écran comme celui-ci s'ouvrira, alors entrez "activty_main.xml" dans le nom du fichier. Ensuite, vérifiez si l'élément racine en dessous est "Linear Layout" (s'il est différent, entrez-le. Puisqu'il a une fonction de suggestion, entrez "Li" et il apparaîtra comme candidat). Ensuite, vous pouvez le faire en cliquant sur OK.

En ce qui concerne l'utilisation de LinearLayout, je pense que vous pouvez imaginer comment utiliser StackView of Xcode tel quel. Lorsque les pièces sont jetées dans LinearLayout, elles sont essentiellement disposées à intervalles égaux dans la direction définie (horizontale ou verticale). Vous pouvez placer le LinearLayout à l'intérieur du LinearLayout, ou vous pouvez ajuster la taille en utilisant le "poids" décrit plus loin.

Essayez de mettre les pièces

Maintenant, mettons d'abord un TextView à l'intérieur du LinearLayout, qui est l'élément racine. (TextView est équivalent à UILabel dans Xcode) Il y a une palette au-dessus de l'arbre des composants que nous avons vu plus tôt. Si vous sélectionnez un widget ici, TextView apparaîtra en haut. Utilisez ce TextView comme écran de calculatrice. J'aimerais placer quelques boutons ci-dessous, mais ici, insérons d'abord LinearLayout (horizental). Et organisons 4 boutons dans le LinearLayout ajouté. Cela ressemblait-il à ça? Cette fois, le nombre de boutons sera de 16 de 0 à 9 (chiffres) + 4 (symboles des quatre règles) + 1 (bouton d'effacement) + 1 (= boutons), alors organisons 4 pour le moment.

création d'identifiant

Ensuite, définissez chaque partie. Quoi qu'il en soit, je ne peux pas parler à moins de décider de l'identité de la pièce. Sur Android, vous devez écrire vous-même la "connexion de sortie" dans Xcode. Ce qui est nécessaire pour cela, c'est l'id de la pièce, qui peut être traitée comme une ressource en la nommant dans le fichier XML. L'ID n'est requis que pour les parties qui effectuent une action en tant qu'application en réponse aux opérations de l'utilisateur. Plus précisément, l'identifiant lui-même n'est pas requis sur Android, tout comme un UILabel qui n'affiche qu'un caractère spécifique dans Xcode (par exemple, un nom d'article) n'a pas besoin d'être connecté à une prise. (* Strictement parlant, l'identifiant est attribué lorsque la pièce est placée. Puisqu'il n'est pas nécessaire de l'utiliser dans le code, j'ai écrit "Ce n'est pas nécessaire".)

En outre, l'identifiant doit être unique tout au long du projet. Les gens ont tendance à penser que le même identifiant ne sera pas un problème parce que les écrans sont différents, mais ce n'est pas le cas des grossistes. (À un autre moment, je verrai pourquoi il en est ainsi) Maintenant, définissons réellement l'identifiant à l'écran. Sélectionnez le TextView que vous venez de placer dans l'arborescence du contenu. Il y a un écran appelé propriétés sur le côté droit de l'écran. (Sinon, je pense qu'il est plié, alors regardez attentivement vers le bord droit de l'écran.) Réécrire arbitrairement le "textView" saisi en standard dans le champ "ID" en haut de cette page. Pour l'instant, définissons-le sur "displayTextView". Ensuite, l'affichage de TextView de ComponentsTree en bas à gauche change un peu. Si le nom du TextView correspond à l'ID que vous avez entré précédemment, vous réussissez. Répétez la même opération et ajoutez des identifiants aux quatre boutons que vous avez placés précédemment. button -> no7Button button2 -> no8Button button3 -> no9Button button4 -> divisionButton Réécrivez comme ça.

paramètres des éléments de mise en page

Ensuite, définissez l'élément de mise en page. Les paramètres minimaux que vous devez définir sont layout_width et layout_height. Le point est la largeur et la hauteur, mais ici il y a deux mots inconnus, "match_parent" et "wrap_content". Comme auparavant, faisons attention aux propriétés sur le côté droit avec le displayTextView sélectionné. Eh bien, si vous pensez à la signification des deux, vous pouvez la comprendre car elle "s'aligne sur la vue parente" et "couvre votre propre contenu", mais si vous n'y pensez pas tant que vous ne vous y êtes pas habitué, "Lequel?" Ce sera. Pour l'instant, définissons layout_width sur macth_parent et saisissons "40dp" directement dans layout_height.

dp et sp

En passant, j'ai introduit des mots que je ne connais pas. C'est "dp". C'est comme: "Eh bien, ça ressemble à une unité?" C'est juste ce que l'unité indique. Il semble que dp signifie «pixels indépendants de la densité», et c'est un appareil qui a été conçu pour qu'il soit affiché uniformément même si le modèle est différent sur Android avec différentes résolutions d'écran pour chaque terminal. est. Le dp de base est utilisé pour spécifier la taille et la marge des parties d'écran. Ce n'est pas toujours recommandé, mais il est recommandé d'être un multiple de 4. C'est la relation du rapport de dpi, qui est une densité à usage général. La raison en est que ldpi est 0,75 fois celui de mdpi.

Ainsi, sp est souvent considéré comme un ensemble avec dp. Si vous pensez qu'il s'agit d'une version de taille de police de dp, il n'y a presque aucun problème. Par conséquent, il est normal de l'utiliser avec la conscience de "sp lors de l'enregistrement de la taille des caractères, dp sinon".

À propos du poids

Continuons comme ça. Pour le moment, les paramètres TextView sont presque terminés. Vient ensuite la disposition des boutons, C'est un arrangement étrange. Espérons qu'il sera de la même taille et parfaitement aligné. Dans un tel cas, layout_weight, qui est un élément de paramètre de mise en page, est utilisé. C'est comme "poids" ≒ "importance dans la séquence des parties". Plus ce nombre est petit, plus il est important -> plus il occupe dans le LinearLayout. Cette fois, l'importance est presque la même, alors alignons-les tous sur "1" Quand j'ai essayé de le trouver immédiatement, j'ai sélectionné "no7Button" et j'ai regardé les propriétés ... Rien. Il n'y a pas d'élément pour layout_weight, ne vous précipitez pas. Il y a un lien en bas qui dit "Afficher toutes les propriétés". Ensuite, une marque avec une flèche similaire s'étendant vers la gauche et la droite est secrètement attachée en haut à droite.

En fait, il y a tellement d'éléments de propriété qu'il était difficile de les trouver, le style consiste donc à n'afficher que certains des éléments qui sont principalement utilisés. Ensuite, utilisez les boutons ci-dessous et en haut à droite pour basculer vers l'affichage de toutes les propriétés. Lorsque vous changez immédiatement, cela ressemble à ceci Donc, il y avait "layout_weight" qui était le 8 à partir du haut (Si vous n'étiez pas ici, faites défiler pour trouver l'élément de "l" ou affinez en utilisant le "bouton de recherche" à côté du "bouton de commutation" ci-dessus Incluons-le.) Après avoir réglé le poids de "no7Button" sur 1, réglez également le poids sur 1 pour les autres boutons. Ensuite, cela ressemblera à ceci. (Sinon, vérifiez le layout_width et le layout_height de chaque bouton. Surtout s'il n'y a qu'un seul bouton plus grand, sa layout_width est souvent match_parent.)

• De plus, j'ai secrètement changé le paramètre layout_height de LinearLayout à 40dp.

Je vais aligner les parties les unes après les autres de cette manière.

Le reste du travail est une grande coupe, il suffit de mettre le LinearLayout et d'aligner les 4 boutons à l'intérieur et de répéter 3 fois de plus. Ce n'est pas grave si ça ressemble à ça. Après cela, sélectionnez l'élément appelé texte dans les propriétés de chaque bouton et entrez le nom du bouton pour terminer.

Voyons l'écran terminé

Maintenant que nous avons fait cela, voyons ce qui se passe avec l'émulateur. Le bouton Exécuter est comme le "bouton de lecture" vert aligné sur la barre d'outils en haut de l'écran. Appuyez sur ce gars. Ensuite, une telle fenêtre s'ouvrira. Cette fois, nous partons du principe que c'est la première fois pour nous, nous allons donc faire un émulateur à partir de maintenant. Cliquez sur "Créer un nouveau périphérique virtuel" en bas à gauche. Pour le moment, faisons-le avec le Nexus 5x car il s'agit d'un modèle de base. C'est une bonne idée de vérifier quels autres modèles peuvent être émulés pendant votre temps libre. Il vous sera ensuite demandé quelle version d'Android vous souhaitez exécuter sur ce terminal émulé. Pour le moment, le dernier Nougat va bien. (Puisque je l'ai déjà téléchargé ici, je peux choisir Nougat immédiatement, mais s'il est dans un état propre, je dois d'abord télécharger Android) Enfin, définissez les paramètres détaillés et vous avez terminé, mais ce n'est pas grave si vous l'ignorez. Puis Le Nexus 5x que vous venez de créer a été ajouté au périphérique virtuel disponible. Appuyez maintenant sur OK pour lancer l'émulateur. Si vous l'exécutez à nouveau dans cet état, le projet que vous créez actuellement s'exécutera sur l'émulateur.

L'écran est maintenant terminé. Rien ne se passe lorsque j'appuie encore sur le bouton. C'est naturel. Enfin, écrivons kotlin à ceci la prochaine fois pour terminer la calculatrice.

prime

Avez-vous remarqué qu'il existe des onglets «Conception» et «Texte» sous l'arborescence des composants? Si vous changez ceci

Il se transforme en un éditeur qui écrit du XML directement comme ça. Si vous avez de l'expérience avec XML, il peut être plus rapide de le modifier directement ici. Puisque c'est un gros problème, je vais exposer ce XML. Pour votre information.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/displayTextView"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="TextView" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no7Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="７" />

        <Button
            android:id="@+id/no8Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="８" />

        <Button
            android:id="@+id/no9Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="９" />

        <Button
            android:id="@+id/divisionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="÷" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no4Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="６" />

        <Button
            android:id="@+id/no5Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="５" />

        <Button
            android:id="@+id/no6Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="４" />

        <Button
            android:id="@+id/multiplicationButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="×" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no1Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="１" />

        <Button
            android:id="@+id/no2Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="２" />

        <Button
            android:id="@+id/no3Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="３" />

        <Button
            android:id="@+id/subtractButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="-" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no0Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="０" />

        <Button
            android:id="@+id/clearButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="C" />

        <Button
            android:id="@+id/resultButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="＝" />

        <Button
            android:id="@+id/additionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="＋" />
    </LinearLayout>

</LinearLayout>

Veuillez également inclure d'autres articles

Introduction à kotlin pour les développeurs iOS ①-Construction de l'environnement Introduction à kotlin pour les développeurs iOS (2) -Création de projet Introduction à kotlin pour les développeurs iOS ③-À propos de gradle Introduction à kotlin pour les développeurs iOS ④-Type Introduction à kotlin pour les développeurs iOS ⑤-XML pratique [Introduction à kotlin pour les développeurs iOS ⑥-kotlin creation] (http://qiita.com/parappa1002/items/9f898feb4f83e672b384)