Oggi vi presento una libreria che mi ha veramente colpito e ritengo veramente utile e degna di nota. La libreria di cui voglio parlare è pixate-freestyle ed è una libreria che permette di definire il design delle applicazioni iOS (anche android a dire il vero) utilizzando i CSS.

L’idea alla base è semplice e riesce nel suo intento in modo più efficace di qualsiasi altra strategia che io abbia mai provato.

Chi sviluppa applicazioni iOS per mestiere o per passione sa quanto il layout delle app sia importante e quanto possa essere time-consuming e error-prone dover definire per ciascun elemento della nostra GUI tutti i parametri via codice oppure via storyboard… definire il colore dei pulsanti,  font, le dimensioni e se vogliamo un pulsante con una sfumatura? Insomma un vero lavoraccio che porta via un mare di tempo. Inoltre quando abbiamo finito la nostra UI il designer di turno decide di cambiare font e allora lì a cambiare tutte le label nello storyboard…

Ci sono ovviamente alcune ottimizzazioni, per esempio io spesso uso delle category sulle classi UIColor e UIFont, oppure ancora creo delle specifiche subclass di UILabel con il formato già corretto.

La soluzione di Apple passa attraverso l’uso del protocollo UIAppearance con il quale è possibile definire una volta per tutte molte proprietà dei nostri controlli. Purtroppo questi valori valgono per tutti i controlli dello stesso tipo e non mi pare che sia molto comune avere un’app dove tutte le label hanno lo stesso colore. Per dovere di precisione diciamo che con UIAppearance è possibile definire uno stile per quei controlli che sono contenuti all’interno di specifici contenitori.. per cui per esempio è possibile definire la font di tutte le label che sono all’interno di una UITableViewCell… anche in questo caso però il tutto si rivela molto rigido e poco versatile.

Davanti a questo problema l’autore della libreria deve aver pensato “ehi ma questo problema l’hanno risolto 10 anni fa (wikipedia dice 16 anni fa, so proprio vecchio) per le pagine html, non possiamo usare lo stesso approccio?” ed ecco che è nata pixate.

Pixate Freestyle is a native iOS library that styles native controls with CSS. With Freestyle, you can replace many complicated lines of Objective-C with a few lines of CSS.

Come tutte le librerie che si rispettino è possibile installarla tramite cocoapods 🙂

pod 'PixateFreestyle'

Una volta installata la libreria va “inizializzata”  nel main della nostra app,  per cui il vostro main dovrebbe essere più o meno così

#import <UIKit/UIKit.h>
#import "AppDelegate.h"
#import <PixateFreestyle/PixateFreestyle.h>


int main(int argc, char * argv[]) {
    @autoreleasepool {
        [PixateFreestyle initializePixateFreestyle];
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
    }
}

Adesso la libreria è installata e pronta all’uso. Proviamo a creare un nuovo file all’interno del progetto e lo chiamiamo default.css e inseriamo al suo interno una semplice porzione di css

label {
    font-family: "American Typewriter";
    font-size: 20;
    text: "Pixate Freestyle";
    color: red;
}

view {
    background-color: #ddd;
}

con questo css andremo a modificare tutte le label infatti basterà trascinare una label nel nostro viewcontroller e una volta eseguita l’app il risultato sarà questo:

Ma come fare per cambiare lo stile di alcune label?  È veramente semplice, prima di tutto scriviamo il nostro css specifico per una classe di label (classe nel senso CSS del termine 🙂 non obj-c)

.subtitle {
    font-size: 18;
    text: "subtitle";
    color: #000;
}

fatto questo associamo la classe “subtitle” alla nostra label tramite i runtime-attribute. Guardate il video qui in basso per le istruzioni dettagliate.

Il risultato sarà questo:

Ok, visto così non sembra molto accattivante 😀  Però magari questa immagine rende meglio l’idea:

Mamma guarda: live!

Un aspetto ancora più interessante di questa libreria è che le modifiche al css possono essere effettuate live, cioè mentre l’applicazione è attiva: il nuovo stile viene immediatamente applicato senza necessità di ricompilare l’app.

Per attivare questo comportamento, all’interno del metodo application:didFinishLaunchingWithOptions: scriviamo queste righe:

NSLog(@"%@", [PixateFreestyle currentApplicationStylesheet].filePath);
PixateFreestyle.currentApplicationStylesheet.monitorChanges = YES;
    
self.window.styleMode = PXStylingNormal;

La prima riga ha il solo scopo di loggare nella console il path completo del css corrente, perché cambia ad ogni esecuzione ed è annidato all’interno delle cartelle del simulatore.

La seconda riga specifica attiva il monitoraggio del file css.

La terza e ultima riga specifica la modalità per la main windows, necessaria per fare in modo che reagisca ai cambiamenti del css.

Se tutto è andato per il verso giusto, aprendo e modificando il file il cui percorso è stato stampato in console, dovreste immediatamente visualizzarne il risultato sul simulatore.

Spero che questa segnalazione vi sia piaciuta.

Alla prossima!