Android App Teil 1: Begrüßungsbildschirm mit Fragmenten/Kotlin - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:16

Hallo wieder, höchstwahrscheinlich haben Sie aufgrund von COVID19 etwas "freie" Zeit zu Hause und können zurückgehen, um Themen zu überprüfen, die Sie in der Vergangenheit lernen wollten.

Die Entwicklung von Android-Apps ist definitiv eine davon für mich und ich habe mich vor ein paar Wochen entschieden, es noch einmal zu versuchen.

Die Programmierung in Kotlin reduziert definitiv den Codierungsaufwand und hilft, in relativ kurzer Zeit Ergebnisse zu erzielen. Es ist wirklich großartig!

In dieser Tutorial-Reihe erkläre ich, wie man einen Tennis Score Tracker entwickelt. Diese App kann verwendet werden, wenn Sie mit Freunden und/oder der Familie spielen (Sie können Ihrem Kind das Tablet geben und es beschäftigen:)). Diese App basiert auf folgendem Kotlin Counter-Beispiel.

Das Tutorial besteht aus folgenden Teilen:

Teil 1: Begrüßungsbildschirm mit Fragmenten (wir sind jetzt hier)

Teil 2: Match-Konfiguration - Eigenschaften

Teil 3: Match-Score-Tracker

Die Hauptidee besteht darin, die App in 3 verschiedene Bildschirme aufzuteilen, von denen jeder den nächsten aufruft, sobald er abgeschlossen ist oder der Benutzer die entsprechende Schaltfläche drückt.

In diesem ersten Teil werde ich erklären, wie man einen Intro-Screen erstellt -> siehe Video oben.

Lieferungen

In diesem Teil verwendete Android-Funktionen:

• Fragmente
• Animation
• Vibration
• Media Player
• Zuhörer

Notwendige Werkzeuge:

• Android-Studio
• Kotlin 1.3.61
• API-Ebene 28

Erforderliche Assets

Eine Signaltondatei

Schritt 1: User Experience Design

Lassen Sie uns die Funktionen unseres Intro-Bildschirms erklären.

1. wir wollen einen Vollbild in weißer Farbe haben
2. wir wollen den Bildschirm immer im Querformat haben
3. wir wollen unsere Logo-Textfarbe in Grau
4. wir wollen unsere Ballfarbe in Grüntönen
5. wir möchten, dass unser Logo-Text eingeblendet wird
6. wir wollen, dass sich ein Tennisball im Bildschirm bewegt (hüpfender Ball)
7. Wir möchten jedes Mal einen Ton abspielen, wenn der Ball eine Oberfläche berührt
8. wir möchten eine Telefonvibration auslösen, wenn ein Ton abgespielt wird
9. Wir möchten, dass die Intro-Dauer weniger als 4 Sekunden beträgt.

Schritt 2: Fragment Manager und 3 Bildschirme

Erinnern wir uns an die Grundidee unserer App, wir möchten 3 Bildschirme haben (Intro, Eigenschaften und Match-Score). Dafür werden wir Fragmente verwenden. Wir brauchen also 3 davon, einen für jeden Bildschirm. Siehe erstes Code-Snippet.

Im zweiten finden wir, wie wir unser erstes Fragment nennen. Das Splash-Fragment wird für unser Intro verwendet.

Schritt 3: App- und Einführungsbildschirm-Layout

• Um die Position des Bildschirms zu fixieren und jede Drehung des Telefons zu ignorieren, müssen wir den folgenden Code Bild 1 in AndroidManifest.xml hinzufügen.
• Um die Aktionsleiste von allen Bildschirmen zu entfernen, müssen wir den folgenden Code Bild 2 in der style.xml hinzufügen
• Um den Vollbildmodus in allen Bildschirmen zu verschieben, müssen wir einige Flags wie in Bild 3 auf 2 verschiedene Methoden setzen. Oncreate() und onWindowFocusChanged.

Schritt 4: Definieren von Logo- und Ballstilen

• Wir haben vor unserem Text als grau definiert, dies geschieht in der Datei style.xml. Siehe Bild 1.
• Wir haben auch definiert, dass der Ball in Grüntönen sein soll. Dazu erstellen wir ball.xml im Zeichenordner. Überprüfen Sie Bild 2

Schritt 5: Animationsbeschreibung

Ich erkläre hier die Logik und den Ablauf der Animation. Ich denke, es macht keinen Sinn, hier Code-Schnipsel hinzuzufügen, besser Sie gehen den Code selbst durch.

Die Idee der Animation ist wie folgt:

• Nachdem das Fragment erstellt wurde, wird das Textlogo erstellt und gestartet
• Sobald die Text-Logo-Animation abgeschlossen ist, wird die erste parabolische Bewegung des Tennisballs aufgerufen
• Sobald die erste parabolische Bewegung abgeschlossen ist, wird ein Ton abgespielt und das Telefon vibriert..und die nächste parabolische Bewegung wird aufgerufen
• Sobald die letzte parabolische Bewegung abgeschlossen ist und Ton/Vibration ausgeführt wird, erreichen wir den Punkt, um unseren zweiten Bildschirm aufzurufen.

Anmerkung: Ich habe keine abstrakte Klasse für Animationen erstellt, weil ich den Code flach halten wollte… zumindest für mich einfacher zu folgen:)

Den zweiten Teil der Reihe poste ich in den nächsten Tagen, folgt mir wenn euch dieser Teil gefällt und wenn nicht, freue ich mich über euer Feedback.