Jouer avec l'implémentation de l'interface utilisateur de Pythonista [Éléments d'écran]

introduction

Je vais vous expliquer les éléments qui peuvent être utilisés dans l'implémentation ui de Pythonista!

type

Tout d'abord, l'introduction des types! Il y a une telle ↓, mais je pense qu'il y a beaucoup d'éléments que j'ai vus si j'utilise une application pour smartphone, alors j'omettrai l'explication de ce à quoi cela sert.

En utilisant pleinement ces éléments, nous créerons l'écran de l'application que vous souhaitez créer. Oui comme ça.

Puisque le fonctionnement est intuitif, je pense que vous pouvez le faire sans hésitation à ce niveau, mais pour le moment ① Couvrez l'écran avec «Vue personnalisée» et définissez «Couleur du fond» sur une couleur subtile qui ne peut pas être considérée comme bleue ou grise. ② Placez Label et définissez l'énoncé du problème dans Text ③ Placez Text Field pour la réponse ④ Placez Button et réglez Text sur OK. Définir la couleur d'arrière-plan

Paramètres des éléments d'écran

En regardant l'écran ci-dessus, vous pouvez voir que les paramètres de l'élément sélectionné sont à droite. C'est presque la même chose, mais certains sont préparés pour chaque élément.

Commun

Name Position Size Inutile de dire ici. réduction. Auto-Resizing / Flex Vous pouvez définir le redimensionnement automatique et la position de placement lorsque la taille d'écran de l'interface utilisateur créée et du terminal qui utilise l'interface utilisateur sont différentes. Background Color Couleur de l'arrière plan. Vous pouvez choisir parmi la carte de couleurs, donc c'est facile à jouer. Si vous souhaitez écrire en code couleur, utilisez ** Attribut personnalisé ** (décrit plus loin) fourni pour chaque élément. Tint Color Si ce n'est pas la couleur d'arrière-plan, la couleur sélectionnée sera attachée quelque part. L'utilisation de cette couleur diffère selon l'élément, par exemple, «Champ de texte» sera la couleur au moment de la sélection et «Étiquette» sera la couleur du texte. Border Les limites sont plus proches des contours. Width spécifie la largeur du contour, Radius a 0 coins arrondis Spécifiez avec ~ 100. Quel genre de calcul faites-vous? Border Color La couleur de la ligne de contour. Si la Width de ** Border ** est 0, il est inutile de la spécifier. Alpha Transparence. Spécifiez de 0 à 1. 0 est complètement transparent.

Unique à chaque élément

Si vous expliquez tout, il n'y a pas de fin, je vais donc omettre ce que vous pouvez comprendre sans l'expliquer.

Spécifique à l'étiquette

Eh bien, je n'explique pas beaucoup ça. Text Font Color Ceux-ci sont omis. Number of Lines Nombre de lignes. Oui la fin. Alignment Aligner. Gauche / centre / droite. Oui la fin.

Spécifique au bouton

Title Font Size Bold Image Traitez le texte du bouton et ajoutez des icônes. Action Que faites-vous lorsque vous appuyez sur le bouton? Spécifiez la méthode décrite dans le fichier py. ʻAction` existe également dans chaque élément qui a du mouvement, et il est essentiel de l'utiliser lors de la création de l'interface utilisateur de l'application. «L'action» est résumée dans Article séparé, alors jetez un œil là-bas! !!

Spécifique au curseur

Value La position initiale de «Slider». Spécifiez de 0 à 1. 0.5 est spécifié sans aucune réflexion. Action Similaire à Button. Cependant, le comportement diffère en fonction de la spécification «Continuous». Continuous ʻSpécifier les conditions de fonctionnement de l'action. Lorsqu'il est réglé sur On (True), ʻAction continuera à fonctionner tant que l'utilisateur bouge (touche) le bouton Slider. Lorsqu'il est réglé sur Off (False), ʻAction` fonctionne lorsque l'utilisateur a fini de déplacer le bouton (relâche la touche).

Commutateur spécifique

Value Position initiale. Contrairement à Slider, il est vrai / faux. Action Identique à «Button».

Spécifique au contrôle de segment

Segments Décrivez les deux choix à sélectionner avec Contrôle de segment Action Il est temps d'expliquer.

Spécifique au champ de texte

Placeholder La chaîne à afficher lorsque «Champ de texte» est vide. Text Color Font Alignment Omission abréviation uuuuuu! Aucune explication requise! Auto-Correction Détermine le comportement de l'autocollect. Il existe False (désactiver), Aucun (dépendant du système) et True (activer). Spell-Checking Détermine le comportement de la vérification orthographique. Il existe False (désactiver), Aucun (dépendant du système) et True (activer). Password Field Lorsqu'elle est activée, l'entrée sera masquée (⚫︎). Action réduction!

Vue de texte spécifique

Editable Décidez si vous souhaitez modifier. Text Color Font Alignment Auto-Correction Spell-Checking Identique à «Champ de texte».

Spécifique à la vue Web

Scale Page to Fit S'il faut faire correspondre la taille de la vue à afficher avec la taille de la Vue Web. Vrai faux.

Spécifique à TableView

Row Height La hauteur d'une ligne. Editing Permet à l'utilisateur d'interagir pour supprimer des lignes. Les options Delete Enable et Move Enabled décrites ci-dessous en dépendent. Data source Pour Table View, la source de données à afficher sur la table peut également être spécifiée du côté pyui. Cependant, si vous souhaitez obtenir la valeur de la table de manière dynamique, vous ne pouvez pas l'écrire dans pyui. Il sera écrit du côté py. J'ai fait un article séparé à ce sujet. Delete Enabled Vous permet de supprimer des lignes. Celui qui se serre sur le côté. Si vous souhaitez l'utiliser, activez la modification. Move Enabled Vous permet de trier les lignes. Comme avec Delete Enable, activez ʻEditing et utilisez-le. **Font** Je ne parlerai pas. **Number of Lines** Nombre de lignes. Le nombre de lignes de la chaîne qui tient dans une ligne du tableau. **Action** Action lorsqu'une valeur de table est sélectionnée (tapée). En raison de la nature de la «vue tableau», il existe plusieurs actions. ʻAction transmet le numéro de ligne à la méthode appelée. Edit Action Une action qui se comporte lorsque les valeurs de table sont supprimées ou triées. Accessory Action Le déclencheur pour fonctionner est le même que ʻAction`, mais il transmet les données stockées dans la ligne au lieu du numéro de ligne.

Spécifique au sélecteur de date

Mode Choisissez parmi les quatre modes suivants. Date: Sélectionnez la date Heure: sélectionnez l'heure et les minutes Date et heure: sélectionnez la date et l'heure Compte à rebours: sélectionnez le temps à compter par heure et minute Action C'est le comportement lorsque «Date Picker» est sélectionné.

Vue de défilement spécifique

Content Size Spécifie la taille du contenu à placer dans la Vue de défilement. bien sûr Il peut être spécifié plus grand que «Scroll View».

Vue d'image spécifique

Image Aucune explication nécessaire.

Vue de navigation spécifique

Root View Name Spécifiez d'abord le nom à afficher dans la Vue de navigation. La chaîne de caractères affichée change lorsque l'écran change. Title Color Couleur du texte du titre Title Bar Color Couleur de la barre de titre Comment Comment Ceci est un commentaire.

Custom Attributes En plus des éléments introduits jusqu'à présent, chaque élément a un «Attribut personnalisé». Cela signifie que les paramètres de chaque élément peuvent être décrits au format de dictionnaire Python, par exemple, si la chaîne de caractères d'affichage «Texte» de «Label» est ici.

{
  'text': 'hogehoge'
}

Peut être écrit comme. À propos, si vous spécifiez à la fois le texte et l'attribut personnalisé, l'attribut personnalisé a la priorité. Il semble qu'il puisse être utilisé lorsque vous souhaitez écrire un élément qui spécifie une couleur avec un code couleur. Action Par exemple, dans le cas d'un bouton, appuyer sur ce n'est pas la fin, non? La plupart des éléments de l'écran sont des choses qui font quelque chose lorsque vous touchez ou cliquez. En spécifiant une méthode qui décrit le traitement arbitraire dans ʻAction`, vous pouvez définir le comportement lorsque touché ou cliqué.

C'est un peu long à écrire dans cet article, donc je l'ai résumé dans un article séparé! Jouer avec l'implémentation de l'interface utilisateur Pythonista [Action implementation] Si vous ne comprenez pas du tout même si vous recherchez sur Google, veuillez le lire!

en conclusion

J'ai présenté ce que vous pouvez utiliser pour le moment! En lisant cet article, essayez de créer une application qui vous ressemble. J'ai joué avec cela et j'ai trouvé qu'il manquait de sens du design. C'est très simple car vous pouvez placer des éléments à l'écran sans avoir à faire de votre mieux pour écrire du HTML, du JavaScript ou du CSS. Je me demande comment faire une conception commune pour plusieurs écrans.

Eh bien, il existe de nombreux paramètres que vous pouvez comprendre en le regardant réellement, il peut donc s'agir d'un article qui n'est pas nécessaire pour ceux qui peuvent lire la référence en douceur. Cette fois, nous ajouterons du mouvement à l'écran conçu!