GUIDE Ionic Toolbar + Buttons, Segement, Search

Ionic Toolbar desingt Steffen LippkeDer Kopf jeder App ist die Toolbar.

Damit die Toolbar in Deiner App ein Highlight wird, habe ich ein Tutorial für dieses Thema entwickelt.

Die Toolbar, das Gehirn jeder App, ermöglicht den Nutzer die Steuerung der App auf seine Art. Die Bar zeichnet sich mit Ihrer Wandelbarkeit und Möglichkeiten aus.

Starten mit etwas Ionic Code?!

Inhalt - Weg zu Deiner Kontakte App

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Deine eigenen Kontakte App

Herausforderung und Ziel
Herausforderung und Ziel

Wolltest Du nicht schon immer einmal Deine eigene Kontakte App entwickeln?

Die Stock-Kontakte Apps von Android, Samsung und Apple sind sehr fade und unpersönlich. Wir wollen dem entgegensetzten und die Telefonzentrale zu einem Highlight machen.

Mit dem Ionic Framework kannst Du mit dem zentralen Element der Toolbar Deine eignen App bauen.

 

 

Unser Ziel: Besser als Google, Apple, Microsoft.

Die Toolbar ist das funktionale Herzstück jeder App. Die Zurückfunktion, Suche und Navigation platzieren sich auf dem zentralen Steuerelement. Ionic biete Dir viele Möglichkeiten die Toolbar nach deinen Ideen zu gestalten.

Kontakte App Toobar in iOS
Kontakte App Toobar in iOS

Die Suche und der Refresher aus den letzten Tutorial ergänzen die Toolbar, welche Funktionen zu Verfügung stellt, die Du als Grundlage für jede andere App nutzen kannst.

Technische Grundlagen - Dein Vorwissen

Lerninhalte - Kontakte App

In diesem Tutorial lernst Du...

... eine Toolbar zu erstellen
... diese mit IconButtons auszustatten
... den praktieschen Refresher und die Suche hinzuzugfügen

 

2. Kapitel

Konzept: Grundlage der Toolbar in HTML. TypeScript macht den Rest.

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Der Look der Ionic Toolbar basiert auf der HTML des Ionic Projekts. Dabei steht die Komponente nicht im ion-content, sondern im ion-header.

Sehen wir uns mal die grundlegenden Prinzipien näher an.

 

 

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Das Kopfelement der HTML erweitert sich mit einigen Buttons, einem Logo in der Mitte und einer schnellen Suche unterhalb.

Im oberen Teil der Toolbar kannst Du bei einer Unterseite den Zurück-Button, einen Titel (oder Logo) und einen Optionen-Button (oder vergleichbares) platzieren. Die App kann die Toolbar durch einen Eintrag „Humburger“ links oben für das Seitmenu erweiterten, welches für Android typisch ist.

3. Kapitel

Grundlagen: Ionic Directives – Grundlage für Ionic Toolbar

Theorie einfach erklärt
Grundlagen einfach erklärt

Um die Funktion und Aussehen der Toolbar besser zu verstehen erklärt der folgende Abschnitt Angular Directives (Anweisungen) als ein zentrales Kernkonzept.

Angular unterscheidet strukturierende, beschreibende Anweisungen und die Anweisungen zur Erstellung einer Komponente.

Der Sinn und Zweck von den Directives ist es ein bestimmtes Verhalten, einen Stil oder eine Funktion über ein festgelegtes Attribut allen HTML-Tags zuzuweisen, die damit deklariert sind.

 

Die strukturierenden Anweisungen *ngFor und *ngIf ermöglichen Wiederholungen und Validation. Der Programmierer nutzt diese Structual Directives oft bei Listen und Menus.

Die beschreibenden Anweisungen wie ngClass und ngStyle als Attribute von Tags verändern Komponenten im Aussehen.

Der dritte Typ von Directives erstellt eigenen Komponenten wie Buttons und Eingabefelder selbst. Ionic als Framework baut auf dem dritten Typen der Angular Directives auf. Viele Komponenten in Ionic basieren auf den Anweisungen wie z. B. ion-button oder ion-input.

Wie Angular die HTML verändert

Angular greift in den Aufbau,  das Aussehen und  das Verhalten der HTML Datei ein.

Die Angular Bibliotheken ElementRef und Renderer2 ermöglichen die Veränderung der DOM.  Dazu muss die HTML die Komponenten, die Angular verändert soll, markieren. Der Marker in der HTML ist der Selektor.

ion-button ist ein solcher Marker
ion-button ist ein solcher Marker

„Marker der HTML“  Die Angular Selektoren.

Der Selektor greift auf die DOM für den Angular Code zu. Das Konzept ist vergleichbar mit den ID- und class-Attribut bei der CSS. Ein bestimmtes Verhalten der Komponente definiert die Klasse, die für den Selektor geschrieben ist.

Die Macher von Ionic nutzen dieses Prinzip, um die Elemente der mobilen, hybriden App an die verschiedenen Plattformen anzupassen.

Angular stellt verschiedene Typen von Auswählern (selectors) zur Entwicklung bereit:

  • ion-button: Wählt einen Elementen-Namen innerhalb eines Tags aus.
  • .class: Sucht nach der class- Deklaration von Tags
  • :not(sub_selector): nur die Auswahl wenn es nicht ist
  • [attribute]: Selektiert das Attribut, welches in den Klammern steht
  • [input=radio]: Wie davor, nur, dass auch noch der Wert (z.B Type) übereinstimmen muss
  • selector1, selector2: Entweder 1. Selektor oder 2. Selektor

Ionic Toolbar und Selectors

Die Toolbar in Ionic gehört zu der dritten Kategorie der Directives.

Die Anweisung ion-toolbar generiert oben die Navigationsleiste oben. Die Buttons der Toolbar fügen sich mit den Attributen end und start an die Toolbar an.

Zusätzlich kannst Du in Ionic in varibales.css über die CSS- und den SCSS-Zugriff die Toolbar in ihrem Aussehen verändern, um sie an Dein Design anzupassen.

4. Kapitel

Coden:Jetzt wird’s ernst

Coding und Umsetzung
Coding zur Umsetzung

Angular Direktives in der Anwendung ist praktisch.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Durch die vordefinierten Elemente geht das eigentliche Programmieren blitzschnell.

Die Toolbar steht im Header der home.html. Die Farbe der Toolbar bestimmt das Attribut Color wie die NavBar. Mit der von Ionic vordefinierten, reduzierten Farbpalette in variables.css geht das Stylen einfach.

Variables css Styles global definieren
Variables css Styles global definieren

Typisch für den begrenzten Platz in der Toolbar sind die Ionic Icons. Anstatt Text zunehmen empfehlen Google und Apple Symbole zu verwenden: Die kleinen Bildchen versteht fast jeder sofort und die Bar wirkt aufgeräumter.

Die Ionic Segmente sind eine Gruppe von Buttons, die eine inhaltlich engen Zusammenhang haben. Gute Use-Cases für Segmente sind die Auswahl eines Tages, eines Projekts oder jegliche andere sinnvolle Gruppierung, die einen separaten Screen gebrauchen kann.

Toolbar bei Windows Phone
Toolbar bei Windows Phone

Die Searchbar und der Refresher ist aus einen vorhergehenden Tutorial bekannt. Diese sind häufig Teil der Toolbar. Für lange Listen und schnell aktualisierenden Inhalten in Deiner App sind Refresher und Suche ein absolutes Muss.

Beachte aber, dass Du den Code direkt in die Toolbar einfügst und nicht unterhalb des Headers!

Toolbar bei Windows Phone
Toolbar bei Windows Phone

5. Kapitel

Erweiterungen: Funktion braucht's noch

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Das Design, Struktur und Aufbau sind fertig.

Füge noch die Funktionalität ein.

Erwecke die App zum Leben und probiere neue Funktionen aus.

Aus unseren vorhergehenden Tutorials ist Dir bereit einiges bekannt bzw. erklärt worden. Baue die Funktionen in Deine Kontakte App ein, sodass Du sie Dir auf Dein Phone laden kannst.

6. Kapitel

Fazit: Comment Me Maybe – Zeit für Kommentare

Ziel und Fazit
Ziel und Fazit

Deine Kontakte App ist fertig.

Zeig mal Deine App, wie Du sie gestaltet hast. Lasse ein Kommentar mit Screenshot in Disqus da.

Oder Share mal lippke.li

Es lohnt sich.

 

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

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4,00 out of 5)
Loading...

Schreibe einen Kommentar

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