Ionic: aplicació per saber l'hora de sortida/posta del sol (VII)

Part VII: Personalització d'icones i tipus de lletra

Aquest article ens mostrarà com canviar el tipus de lletra que utilitza una aplicació i com afegir icones personalitzades.

Fins ara hem fet una aplicació per saber l'hora de sortida i posta del sol:

• En la primera part vàrem preparar el projecte inicial.
• En la segona part vàrem crear l'aplicació, fixant el lloc.
• En la tercera part vàrem afegir-hi geolocalització.
• En la quarta part vàrem afegir-hi un calendari per escollir la data.
• En la cinquena part vàrem afegir-hi Google Maps per escollir el lloc.
• En la sisena part vàrem afegir-hi traduccions a diversos idiomes.

Ara anem a personalitzar-la una mica, amb icones i tipus de lletra diferents.

Comencem pel tipus de lletra. En tenim moltes de disponibles a Google fonts. N'escollim una que s'ajusti a les necessitats (Poppins en el nostre cas) i descomprimim els fitxer *.ttf a assets/fonts. Tot seguit declarem la nova font i la posem per defecte, editant el fitxer theme/variables.scss per afegir:

 ...
 // Fonts
 // --------------------------------------------------

 //@import "roboto";
 //@import "noto-sans";

 @font-face {
  font-family: "Poppins";
  //font-style: normal;
  //font-weight: 400;
  src:  url($font-path+'/Poppins-Regular.ttf');
 }
 @font-face {
  font-family: "Poppins";
  src:  url($font-path+'/Poppins-Bold.ttf');
  font-weight: bold;
 }
 @font-face {
  font-family: "Poppins";
  src: url($font-path+'/Poppins-Italic.ttf');
  font-style: italic;
 }
 @font-face {
  font-family: "Poppins";
  src: url($font-path+'/Poppins-BoldItalic.ttf');
  font-weight: bold;
  font-style: italic;
 }

 $font-family-base: "Poppins";

 $font-family-md-base: "Poppins";
 $font-family-ios-base: "Poppins";
 $font-family-wp-base: "Poppins";

Pel que fa a les icones, si n'hem d'utilitzar moltes seria convenient declarar un nou tipus de lletra, però si són poques, és molt molt senzill afegir-les directament. Per això, escollim icones lliures, per exemple a Flaticon, procurant que siguin d'un sol color i en format SVG. Llavors les afegim a app/app.scss:

 ...
 // --- Custom icons -------------------------------------------------------------------
 //
 // https://stackoverflow.com/a/44575053/1581368
 // To generate a font : https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/
 ion-icon {
    &[class*="custom-"] {
        // Instead of using the font-based icons we're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-sunrise"] {
        mask-image: url(../assets/icon/sunrise.svg);
    }
    &[class*="custom-sunset"] {
        mask-image: url(../assets/icon/sunset.svg);
    }
 }

I llavors ja els podem utilitzar normalment a home.html:

 ...
    <ion-item-divider color="light">
      {{ "APP.timetable" | translate }}
    </ion-item-divider>
    <ion-item>
      <ion-icon name="custom-sunrise" color="orange" item-left></ion-icon>
      <ion-note item-right>{{ sunrise }}</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon name="custom-sunset" color="blue" item-left></ion-icon>
      <ion-note item-right>{{ sunset }}</ion-note>
    </ion-item>
 ...

El resultat es pot veure a continuació:

Observem en el lateral com s'ha carregat correctament el fitxer de fonts (les versions normal i negreta, que són les que s'utilitzen).

I d'aquesta manera tan senzilla podem donar-li un aspecte més polit a una aplicació. Per acabar-ho d'arrodonir, completem la pàgines de contacte, de crèdits i afegim informació al repositori de Github (en el fitxer README.md).

Com sempre, teniu tot el codi a la vostre disposició en el Github: v1.0.

I amb aquests retocs finals podem donar l'aplicació per completada. Espero que hagi resultat útil. Si teniu alguna idea per millorar-la, traduccions a altres idiomes o qualsevol comentari, no dubteu a comentar/contactar.