Item Sliding mit Ionic Icons – Optionen für Listeneinträge

Ionic Beginner Tutorial Steffen Lippke Sliding itemTinder, eine polarisiernede App, nutzt erfolgreich Gesten, um den Nutzer eine unverwechselbare Experience zu bieten.

Natürliche Gesten wie Wischen und langes Drücken unterstreichen die Funktionen in Diener App.

Mit Ionic integrierst Du mit sliding item Wisch- und Drückgesten in Deine App.

Viel Spaß bei einer „visuellen“ Einführung.

Inhalt - Weg zu Optionen in Listen

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Interaktive Liste für eine Rezepte App

Herausforderung und Ziel
Herausforderung und Ziel

Rezept hinzufügen, löschen, editieren. Alles das geht mit einer intelligenten Liste, die mit Wischen (sliding) und Drücken (drag) Befehlen umsetzen kann.

Ionic stellt für Dich eine Lösung bereit mit der Du Listenscreens etwas mehr pep gibst.

 

 

Swiping ausprobiert item sliding-min
Swiping ausprobiert item sliding

Unser Ziel: Rezepte im 21. Jahrhundert verwalten

Gesten unterstützen den Workflow und reduzieren störende Kontrollelemente auf dem Bildschirm.

Der Nutzer hat freie Sicht auf den Inhalt. Dem Designer steht mehr Platz für echten Content zu Verfügung.

Heute wollen wir in diesem Tutorial eine Rezepte App entwickeln, die mit Ionic item sliding arbeitet.

Bild

Technische Grundlagen - Dein Vorwissen

Lerninhalte für das Ionic Tutorial

In diesem Tutorial erfährst Du, wie Du …

… „natürliche“ Optionen in Deine Liste einfügen kannst
… die App mit funktionalen Ionic Icons erweitern kannst
… und wie Die Optionen ansprechender gemacht werden

 

2. Kapitel

Konzept: Schachtelung von ion sliding

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Bei dem Ionic item sliding müssen wir eine strikte Schachtelungsstruktur beachten.

Nur wenn Du die vorgesehene Struktur anwendest, erhältst Du Dein gewünschtes Ergebnis. Mit Symbolen und Strings kannst Du die Option in Ionic betiteln.

 

 

Der Nutzer sieht bei den sliding items nur einen kleinen Ausschnitt des Listeneintrags. Der Wisch des Nutzers verschiebt den Sichtbarkeitsbereich. Die folgende Grafik soll die Idee etwas verdeutlichen.

Vorstellung von item sliding in der Anzeige
Vorstellung von item sliding in der Anzeige

Koch-App Konzept

Für die Rezepte App brauchen wir noch einen Avatar für die Bilder, einen knackigen Titel und einen Beschreibungstext.

Die notwendigen Strings entnimmt der Code aus einer fertigen JSON Datei. Die Avatar Bilder links sollen die Bilder der Rezepte zeigen.

Die Funktionen, die wir an die HTML Struktur von sliding item binden, können Operationen wie löschen, editieren, hinzufügen oder sperren … durchführen. Die Funktionen kannst Du nach Belieben schreiben. In diesem Tutorial gehe aber nicht weiter auf die möglichen Funktionen ein. Wir konzentrieren uns auf die Struktur und das Verständnis von sliding item.

3. Kapitel

Grundlagen: Jetzt auch visuell

Theorie einfach erklärt
Grundlagen einfach erklärt

Die Schachtelungsstruktur braucht etwas Erklärung, um diese zu verstehen.

Wenn man noch nicht so viel mit HTML gearbeitet hat, kann item sliding schnell verwirrend sein. Das klärt sich jetzt …

 

Ionic sieht vor, dass der Programmierer die Listenzeile und die Optionen seperat definiert. Obwohl in der HTML logischerweise von oben nach unten und links nach rechts aufgebaut ist, haben wir in Ionic eine andere Struktur. Wir schreiben den Code nicht in der Reihenfolge: die linke Optionen, dann der mittige Inhalt und die rechten Optionen

Struktur item sliding

Die Kapselung übernimmt der Ober-Tag ion-sliding. Dann folgt direkt der Tag des normalen Listeneintrags. Dann kommen gebündelt am Ende alle Optionen: linke und rechte Seite schreibest Du direkt hintereinander in den Code. Nur an dem Attribut side erkennst DU, auf welcher Seite die App die Option anzeigt.

item sliding im Code Schachtelung
item sliding im Code Schachtelung

Die Funktionen bindest Du mit Ein-Weg-Bindungen (One-Way-Binding) an die HTML Tags. Die eigentlichen Funktionen schreibst Du in der TypeScript Datei.

4. Kapitel

Coden: Dynamische Listen in Ionic

Coding und Umsetzung
Coding zur Umsetzung

Von der Theorie zur Praxis. Entwickle Diene erste Koch App.

Wenn Du ein paar Zeilen Code geschrieben hast, verstehst Du das System item sliding auch schneller.

Grundlage für jede Liste in Ionic ist die ion-list. Dieses Element rahmt die Liste. Für das sliding item ersetzt ion-item komplett.

Rezepte App mit Item Sliding
Rezepte App mit Item Sliding

Diese fügst Du so wie im folgenden Code hinzu:

Die strukturierende Anweisung *ngFor in Angular (Directives) ermöglicht die Wiederholung der item-sliding Struktur. Dadurch vermeidest Du Hart-Coding. Zu Listen habe ich schon ein ausführlicheres Tutorial erarbeitet. Werfe ein Blick auf den Post, wenn Du in diesem Thema noch nicht so sicher bist.

Provider als Datenlieferant - Angular

Damit die App die JSON nutzen kann, brauchen wir einen Provider, eine Angular Service. Diesen schreiben wir uns selber. Die JSON stellt die Grundlage für die App dar, die Du als Schnittstelle für ein Backend nutzen kannst. Die Datei landet in dem Ordner src/assets, sodass der Provider diese auslesen kann.

Der Provider nimmt sich die JSON und wandelt es in ein verständliches Format um.

Jetzt fügst Du noch den Provider zu app.modules.ts hinzu und in die home.ts integrieren Du diese. Der Provider ist bereit, sodass wir ihn nutzen können. Du erweiterst den Konstruktor mit dem Provider und schreibst in den Rumpf den Aufruf für die Datenanfrage. Die vorher deklarierte Variable recipes nimmt die Daten des Providers entgegen. *ngFor in der HTML Datei gibt dann die Rezepte aus.

Spezielle Funktionen für item sliding

Die TypeScript Datei enthalt die swipe und drag Funktionen des sliding items. Glücklicherweise muss Du nicht das Erscheinen der Optionen durch den Swipe programmieren. Das übernimmt der Codes des Framworks für Dich. Für die Funktion der Optionen muss Du lediglich die Funktionen für das Ausführen der einzelnen Optionen schreiben.

Auswahlen von Rezepten
Auswahlen von Rezepten

Oder wähle mehrere aus..

Muli Select von Items-min
Muli Select von Items

5. Kapitel

Erweiterungen: Füge weitere Optionen hinzu

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Ändern alleine reicht Dir nicht aus? Dann erweitere es doch um noch mehr Funktionen.

Jetzt kannst Du die vorbereiteten Funktion wie drag, click, edit, share ... mit etwas Leben füllen. Probiere verschiedenes aus.

Ionic Listen Optionen
Ionic Listen Optionen

Erstelle weitere Funktionen.

Ändere die Icons mit Ideen vom Framwork.

6. Kapitel

Fazit: App für’s 21. Jahrhundert

Ziel und Fazit
Ziel und Fazit

Du kannst stolz auf die neuen Funktionen sein. Mit Gesten schaffst Du den ersten Schritt in Richtung Zukunft. Du entfernst Dich von den statischen Webseiten und dem unnatürlichen Klicken.

Was macht aus Deiner Sich ein App moderns? Schreibt mal in die Kommentare.

Oder lasst eine Like da.

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.