{"id":11249,"date":"2015-02-11T16:58:48","date_gmt":"2015-02-11T15:58:48","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=11249"},"modified":"2016-06-07T14:57:29","modified_gmt":"2016-06-07T12:57:29","slug":"portiamo-i-css-nelle-nostre-applicazioni-ios-e-android-native","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/portiamo-i-css-nelle-nostre-applicazioni-ios-e-android-native\/","title":{"rendered":"Portiamo i CSS nelle nostre applicazioni iOS e Android native"},"content":{"rendered":"

Oggi vi presento una libreria che mi ha veramente colpito e ritengo veramente utile e degna di nota.\u00a0La libreria di cui voglio parlare \u00e8 pixate-freestyle<\/a> ed \u00e8 una libreria che permette di definire il design delle applicazioni iOS<\/strong> (anche android a dire il vero) utilizzando i CSS<\/strong>.<\/p>\n

L’idea alla base \u00e8 semplice e riesce nel suo intento in modo pi\u00f9 efficace di qualsiasi altra strategia che io abbia mai provato.<\/p>\n

<\/p>\n

Chi sviluppa applicazioni iOS<\/strong> per mestiere o per passione sa quanto il layout delle app sia importante e quanto possa essere time-consuming<\/em> e error-prone<\/em> dover definire per ciascun elemento della nostra GUI tutti i parametri via codice oppure via storyboard… definire il colore dei pulsanti,\u00a0 font, le dimensioni e se vogliamo un pulsante con una sfumatura?\u00a0Insomma 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\u00ec a cambiare tutte le label nello storyboard…<\/p>\n

Ci sono ovviamente alcune ottimizzazioni, per esempio io spesso uso delle category sulle classi UIColor<\/em> e UIFont<\/em>, oppure ancora creo delle specifiche subclass di UILabel con il formato gi\u00e0 corretto.<\/p>\n

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

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 \u00e8 nata pixate<\/strong>.<\/p>\n

 <\/p>\n

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.<\/p><\/blockquote>\n

 <\/p>\n

Come tutte le librerie che si rispettino \u00e8 possibile installarla tramite cocoapods \ud83d\ude42<\/p>\n

pod 'PixateFreestyle'<\/pre>\n
Una volta installata la libreria va “inizializzata”\u00a0 nel main della nostra app,\u00a0 per cui\u00a0il vostro main dovrebbe essere pi\u00f9 o meno cos\u00ec<\/p>\n
#import <UIKit\/UIKit.h>\r\n#import \"AppDelegate.h\"\r\n#import <PixateFreestyle\/PixateFreestyle.h>\r\n\r\n\r\nint main(int argc, char * argv[]) {\r\n    @autoreleasepool {\r\n        [PixateFreestyle initializePixateFreestyle];\r\n        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));\r\n    }\r\n}<\/pre>\n
 <\/p>\n
Adesso la libreria \u00e8 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<\/p>\n
 <\/p>\n
label {\r\n    font-family: \"American Typewriter\";\r\n    font-size: 20;\r\n    text: \"Pixate Freestyle\";\r\n    color: red;\r\n}\r\n\r\nview {\r\n\u00a0\u00a0\u00a0 background-color: #ddd;\r\n}\r\n<\/pre>\n
con questo css andremo a modificare tutte<\/strong> le label infatti baster\u00e0 trascinare una label nel nostro viewcontroller e una volta eseguita l’app il risultato sar\u00e0 questo:<\/p>\n
\"\"<\/a><\/p>\n
Ma come fare per cambiare lo stile di alcune label?\u00a0 \u00c8 veramente semplice, prima di tutto scriviamo il nostro css specifico per una classe di label (classe nel senso CSS del termine \ud83d\ude42 non obj-c)<\/p>\n
.subtitle {\r\n    font-size: 18;\r\n    text: \"subtitle\";\r\n    color: #000;\r\n}\r\n<\/pre>\n
 <\/p>\n
fatto questo associamo la classe “subtitle” alla nostra label tramite i runtime-attribute. Guardate il video qui in basso per le istruzioni dettagliate.
\n