Ionic ist ein open source front-end SDK für die Entwicklung von hybriden Apps durch Webtechnologien wie HTML, CSS und AngularJS. Ionic verfügt über ein nützliches CLI (command line interface), das einfaches Erstellen, Kompilieren, Ausführen und Exportieren von mobilen Applikationen ermöglicht

Durch die umfassende Dokumentation zu diesem Framework kann man relativ schnell erste Prototypen erstellen.

Während ich mit meiner Studienkollegin Theres-Sophie Scheucher an einer mobilen App basierend auf Ionic gearbeitet habe (restaurantApp), bin ich auf einige interessante Informationen gestoßen, die in diesem Artikel kurz beschrieben werden.

Getting Started

Der einfachste Weg, eine Ionic App mit dazu benötigtem Template zu erstellen, ist, die übersichtliche Anleitungen auf der Seite von Ionic „Getting Started“ zu befolgen.

Customizing Styles

Es gibt mehrere Möglichkeiten, das Styling der App zu definieren. Wichtig dabei ist, dass man die default Ionic Gulp Files nicht unnötig verändert, da diese beim nächsten update wieder verworfen werden.

Styles im www Ordner

Schnell und einfach kann man neue CSS Dateien in den WWW Ordner geben, und diese in der index.html referenzieren. Allerdings funktioniert das nicht sehr gut mit dem Ionic Gulp setup. Daher wird dies Methode eher nicht empfohlen.

Styles im ionic.app.scss

Im Ordner /scss gibt es die ionic.app.scss Datei, welche die Haupt SASS Datei ist, die alle Styles der Applikation kompiliert. Diese Methode wird auch von Ionic’s Gulp set up empfohlen. In dieser Datei können unzählige neue Styles hinzugefügt werden und funktionieren gut für kleine und einfache Applikationen mit wenig Anpassungen.

Eigene Datein

Aufgrund der Übersichtlichkeit habe ich für unsere restaurantApp ein eigenes File mit den jeweiligen Styles angelegt und dieses Datei anschließend mittels @import Statement in die sass Datei eingefügt.

Variablen überschreiben

Ionic verfügt über zahlreiche vordefinierte Variablen, die für das adaptieren des Designs genutzt werden können. Bevor selbst Variablen definiert werden, sollte ein Blick auf die Liste der Default Variablen geworfen und diese gegebenenfalls überschrieben werden.

Der korrekte Weg ,Variablen zu überschreiben, kann im File scss/ionic.app.scss nachgelesen werden. Diese Datei beinhaltet eine Anleitung, wie beziehungsweise wo diese überschrieben werden sollen. Diese Datei sieht folgendermaßen aus (Default)

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

 

Wichtig ist, dass das Überschrieben der Variablen vor dem ionic import geschieht, da ansonsten die Default Values von Ionic die eigenene Values überschreiben würden.

Unterschiedliche Icons bei iOS und Android

Ionic hat nützliche Funktionen wie ionic.Platform.isIOS(), ionic.Platform.isAndroid() und ionic.Platform.isWindowsPhone(), um festzustellen, welches Icon verwendet werden soll. Beispiel:

var icon;
 
if (ionic.Platform.isIOS()) {
  
  icon = 'ion-ios-arrow-back';
} else if (ionic.Platform.isAndroid()) { 
 
  icon = 'ion-android-arrow-back';
} else { 
 
  icon = 'ion-android-arrow-back';
}