Spielen Sie mit der Implementierung der Pythonista-Benutzeroberfläche [Bildschirmelemente]

Einführung

Ich werde die Elemente erklären, die in der UI-Implementierung von Pythonista verwendet werden können!

Art

Zunächst die Einführung der Typen! Es gibt so ein ↓, aber ich denke, dass es viele Elemente gibt, die ich gesehen habe, wenn ich eine Smartphone-Anwendung verwende, daher werde ich die Erklärung dafür weglassen.

Wenn Sie diese Elemente vollständig nutzen, erstellen wir den Bildschirm der Anwendung, die Sie erstellen möchten. Ja genau so.

Da die Bedienung intuitiv ist, denke ich, dass Sie es auf dieser Ebene ohne zu zögern schaffen können, aber vorerst ↓ ① Decken Sie den Bildschirm mit "Benutzerdefinierte Ansicht" ab und stellen Sie "Hintergrundfarbe" auf eine subtile Farbe ein, die nicht als blau oder grau bezeichnet werden kann. ② Platzieren Sie Label und setzen Sie die Problemstellung in Text ③ Platzieren Sie "Textfeld" für die Antwort ④ Platzieren Sie Button und setzen Sie Text auf OK. Stellen Sie "Hintergrundfarbe" ein

Parameter von Bildschirmelementen

Auf dem Bildschirm oben sehen Sie, dass sich die Parameter des ausgewählten Elements rechts befinden. Es ist fast das gleiche, aber einige sind für jedes Element vorbereitet.

Verbreitet

Name Position Size Unnötig zu sagen hier. Kürzung. Auto-Resizing / Flex Sie können die Position für die automatische Größenänderung und Platzierung festlegen, wenn die Bildschirmgröße der erstellten Benutzeroberfläche und des Terminals, das die Benutzeroberfläche verwendet, unterschiedlich sind. Background Color Hintergrundfarbe. Sie können aus der Farbkarte auswählen, so dass es einfach zu spielen ist. Wenn Sie in Farbcode schreiben möchten, verwenden Sie für jedes Element das ** Benutzerdefinierte Attribut ** (später beschrieben). Tint Color Wenn es sich nicht um die Hintergrundfarbe handelt, wird die ausgewählte Farbe irgendwo angehängt. Die Verwendung dieser Farbe ist je nach Element unterschiedlich. Beispielsweise ist "Textfeld" die Farbe zum Zeitpunkt der Auswahl und "Beschriftung" die Textfarbe. Border Die Grenzen liegen näher an den Konturen. Breite gibt die Breite der Kontur an, Radius hat 0 abgerundete Ecken Geben Sie mit ~ 100 an. Was für eine Berechnung machst du? Border Color Die Farbe der Konturlinie. Wenn die Breite von ** Rand ** 0 ist, macht es keinen Sinn, sie anzugeben. Alpha Transparenz. Geben Sie 0 bis 1 an. 0 ist vollständig transparent.

Einzigartig für jedes Element

Wenn Sie alles erklären, gibt es kein Ende, also werde ich weglassen, was Sie verstehen können, ohne es zu erklären.

Etikettenspezifisch

Nun, ich erkläre aber nicht so viel. Text Font Color Diese werden weggelassen. Number of Lines Anzahl der Zeilen. Ja das Ende. Alignment Ausrichten. Links / Mitte / rechts. Ja das Ende.

Knopfspezifisch

Title Font Size Bold Image Verarbeiten Sie den Schaltflächentext und fügen Sie Symbole hinzu. Action Was machst du, wenn du den Knopf drückst? Geben Sie die in der py-Datei beschriebene Methode an. "Aktion" ist auch in jedem Element vorhanden, das Bewegung hat, und es ist wichtig, es beim Erstellen der Benutzeroberfläche der Anwendung zu verwenden. Die "Aktion" ist in Separater Artikel zusammengefasst. Schauen Sie sich das also bitte an! !!

Schieberegler spezifisch

Value

Action

Continuous

Value

Action Ähnlich wie "Button". Das Verhalten unterscheidet sich jedoch je nach "Continuous" -Spezifikation. Geben Sie die Betriebsbedingungen von "Aktion" an. Bei Einstellung auf Ein (True) funktioniert "Aktion" so lange, wie der Benutzer den "Schieberegler" -Knopf bewegt (berührt). Bei Einstellung auf Aus (Falsch) wird "Aktion" ausgeführt, wenn der Benutzer den Knopf nicht mehr bewegt (die Berührung wird freigegeben). Schalterspezifische Ausgangsposition. Im Gegensatz zu "Slider" ist es "Wahr / Falsch". Gleich wie "Button".

Segmentsteuerung spezifisch

Segments Beschreiben Sie die beiden Auswahlmöglichkeiten, die mit "Segmentsteuerung" ausgewählt werden sollen. Action Es ist Zeit zu erklären.

Textfeldspezifisch

Placeholder Die Zeichenfolge, die angezeigt werden soll, wenn "Textfeld" leer ist. Text Color Font Alignment Auslassung uuuuuu Abkürzung! Keine Erklärung erforderlich! Auto-Correction Bestimmt das Verhalten von Autocollect. Es gibt False (Deaktivieren), None (Systemabhängig) und True (Aktivieren). Spell-Checking Bestimmt das Rechtschreibprüfungsverhalten. Es gibt False (Deaktivieren), None (Systemabhängig) und True (Aktivieren). Password Field Wenn aktiviert, wird die Eingabe ausgeblendet (⚫︎). Action Kürzung!

Textansicht spezifisch

Editable Entscheiden Sie, ob Sie bearbeiten möchten. Text Color Font Alignment Auto-Correction Spell-Checking Gleich wie "Textfeld".

Web View spezifisch

Scale Page to Fit Gibt an, ob die Größe der anzuzeigenden Ansicht mit der Größe der Webansicht übereinstimmen soll. Wahr falsch.

TableView-spezifisch

Row Height Die Höhe einer Linie. Editing Ermöglicht der Benutzerinteraktion das Löschen von Zeilen. Davon hängen die unten beschriebenen "Delete Enable" und "Move Enabled" ab. Data source Für "Tabellenansicht" kann die Datenquelle, die in der Tabelle angezeigt werden soll, auch auf der Pyui-Seite angegeben werden. Wenn Sie den Wert der Tabelle jedoch dynamisch abrufen möchten, können Sie ihn nicht in Pyui schreiben. Es wird auf der Py-Seite geschrieben. Ich habe einen separaten Artikel darüber verfasst. Delete Enabled Ermöglicht das Löschen von Zeilen. Derjenige, der zur Seite drückt. Wenn Sie dies verwenden möchten, aktivieren Sie Bearbeiten. Move Enabled Ermöglicht das Sortieren der Zeilen. Aktivieren Sie wie bei "Löschen aktivieren" die Option "Bearbeiten", um sie zu verwenden. Font Ich werde nicht reden. Number of Lines Anzahl der Zeilen. Die Anzahl der Zeilen der Zeichenfolge, die in eine Zeile der Tabelle passen. Action Aktion, wenn ein Tabellenwert ausgewählt (getippt) ist. Aufgrund der Art der "Tabellenansicht" gibt es mehrere Aktionen. Action übergibt die Zeilennummer an die aufgerufene Methode. Edit Action Eine Aktion, die sich verhält, wenn Tabellenwerte gelöscht oder sortiert werden. Accessory Action Der Auslöser für die Arbeit ist derselbe wie "Aktion", übergibt jedoch die in der Zeile gespeicherten Daten anstelle der Zeilennummer.

Datumsauswahl spezifisch

Mode Wählen Sie aus den folgenden vier Modi. Datum: Datum auswählen Zeit: Wählen Sie Stunde und Minute Datum und Uhrzeit: Wählen Sie Datum und Uhrzeit aus Countdown: Wählen Sie die Zeit aus, die nach Stunde und Minute gezählt werden soll Action Dies ist das Verhalten, wenn "Datumsauswahl" ausgewählt ist.

Bildlaufansicht spezifisch

Content Size Gibt die Größe des Inhalts an, der in der Bildlaufansicht platziert werden soll. natürlich Es kann größer als "Bildlaufansicht" angegeben werden.

Bildansicht spezifisch

Image Keine Erklärung erforderlich.

Navigationsansicht spezifisch

Root View Name Geben Sie zuerst den Namen an, der in der Navigationsansicht angezeigt werden soll. Die angezeigte Zeichenfolge ändert sich, wenn sich der Bildschirm ändert. Title Color Titeltextfarbe Title Bar Color Titelleistenfarbe Comment Comment Dies ist ein Kommentar.

Custom Attributes Zusätzlich zu den bisher eingeführten Elementen verfügt jedes Element über ein benutzerdefiniertes Attribut. Dies bedeutet, dass die Parameter jedes Elements im Python-Wörterbuchformat beschrieben werden können, wenn beispielsweise die Anzeigezeichenfolge "Text" von "Label" hier ist.

{
  'text': 'hogehoge'
}

Kann geschrieben werden als. Wenn Sie sowohl Text als auch benutzerdefiniertes Attribut angeben, hat das benutzerdefinierte Attribut übrigens Priorität. Es scheint, dass es verwendet werden kann, wenn Sie ein Element schreiben möchten, das eine Farbe mit einem Farbcode angibt. Action Zum Beispiel ist das Drücken einer Taste nicht das Ende, oder? Die meisten Bildschirmelemente sind Dinge, die beim Berühren oder Klicken etwas bewirken. Durch Angabe einer Methode, die die willkürliche Verarbeitung in "Aktion" beschreibt, können Sie das Verhalten beim Berühren oder Klicken definieren.

Das Schreiben in diesem Artikel ist etwas lang, daher habe ich es in einem separaten Artikel zusammengefasst! Spielen Sie mit der Pythonista-UI-Implementierung [Action-Implementierung] Wenn Sie es überhaupt nicht verstehen, auch wenn Sie googeln, lesen Sie es bitte!

abschließend

Ich habe vorgestellt, was Sie vorerst verwenden können! Versuchen Sie beim Betrachten dieses Artikels, eine App zu erstellen, die Ihren Vorstellungen entspricht. Ich spielte damit und stellte fest, dass es einen katastrophalen Mangel an Designgefühl gab. Dies ist sehr einfach, da Sie Elemente auf dem Bildschirm platzieren können, ohne Ihr Bestes geben zu müssen, um HTML, JavaScript oder CSS zu schreiben. Ich frage mich, wie man ein gemeinsames Design für mehrere Bildschirme erstellt.

Nun, es gibt viele Parameter, die Sie verstehen können, wenn Sie sie tatsächlich betrachten. Daher war es möglicherweise ein Artikel, der für diejenigen, die die Referenz reibungslos lesen können, nicht erforderlich ist. Dieses Mal werden wir dem gestalteten Bildschirm Bewegung hinzufügen!