Style CSS w aplikacjach iOS! Darmowy Framework – Pixate Freestyle

Nigdy nie lubiłem edycji wyglądu standardowych kontrolek. Dużo pisania kodu, ewentualnie dużo klikania. Następnie żmudne dostosowywanie, aby klient był zadowolony. Kłopotliwe i mało wygodne. Pod tym względem zawsze się dziwiłem czemu nikt nie pomyślał o stylach CSS.

A jednak jakiś czas temu via Adam Śliwakowski dowiedziałem się o świetnym, darmowym (open source) frameworku, który sprawia, że można korzystać z CSSów przy tworzeniu aplikacji iOS. Adamowi dziękuję za informacje, a z Wami dzielę się tym znaleziskiem.

Nie, to nie jest primaaprilisowy żart. Framework daje radę o czym przekonacie się za chwilę (:

Możliwości

Przedstawiam te najważniejsze. Freestyle cały czas odkrywam, więc pewnie jeszcze nie raz się zaskoczę.

Instalacja

Najszybciej będzie, jeśli odpalicie przykładowe kody. Od razu widać efekty. Paczka do pobrania w repozytorium. Tam również jest instrukcja w jaki sposób dodać Freestyle do nowego projektu. Tu przedstawiam najszybszy sposób na instalację. Po utworzeniu pustego projektu w Xcode

Użyj CocoaPods

Instalacja odbywa się przy pomocy specjalnego managera bibliotek. CocoaPods jest po prostu najlepszy.

pod 'PixateFreestyle'

Gdyby ktoś miał problemy, w linku zamieszczam szybki tutorial w jaki sposób używać CocoaPods.

Jak używać?

Bardzo prosto. Dodajmy nowy UIViewController z widokiem XIB. W AppDelegate ustawmy go tak, aby wyświetlał się na starcie.

 
#import "AppDelegate.h"
#import "FreestyleViewController.h"

@interface AppDelegate ()
@property (strong, nonatomic) FreestyleViewController *viewController;
@end
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    _viewController = [[FreestyleViewController alloc] initWithNibName:@"FreestyleViewController" bundle:nil];
    self.window.rootViewController = self.viewController;

    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;

Do pliku main.m należy zaimportować bibliotekę PixateFreestyle oraz sprawić, aby była zainicjalizowana.

#import <pixatefreestyle /PixateFreestyle.h>;

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

Dodajmy do widoku XIB dwie kontrolki, których wygląd spróbujemy zmodyfikować przy pomocy CSS. Niech będzie UILabel + UIButton.

Teraz jedna z najważniejszych kwestii. Dla wybranej kontrolki należy ustawić specjalny atrybut, który będzie odpowiadał temu co zawarte w pliku CSS. Doskonale przedstawia to obrazek:
styleIdFreestyle W prawym dolnym roku widać, że dla styleId typu string przypisaliśmy wartość label.

Na koniec wystarczy dodać plik default.css w którym implementujemy wszelkie style dla identyfikatorów, klas itd.

#view {
    background-color: #fcfcfc;
}

#button {
    color: #333;
    font-weight: 100;
    font-size: 24pt;
    border: 0.5px solid rgba(#000000, 0.75);

}

#label {
    font-weight: 100;
    font-size: 78pt;
}

Tyle, wszystko działa!

Teraz pozostaje mi odesłać Was na stronę główną Pixate w celu dalszej podróży. Życzę udanej pracy z tym Frameworkiem 😉

You may also like...