Style

Dni coraz piękniejsze, coraz ciężej spędzać je z komputerem. Niemniej jednak, jak mówią starzy Indianie:

Lepiej 2% dziś niż 200% jutro.

Dlatego postanowiłam popracować trochę nad wyglądem widżeta Losowy fakt z WikipediiSC20160522-144021 (z dzisiejszej daty) – uważne oko czytelnika na pewno dostrzeże subtelne róźnice w nowym wyglądzie widżeta. Na początek kilka słów o stylach w Androdzie.

Przy pisaniu aplikacji na Androida, style pełnią podobną funkcję do CSS-a przy tworzeniu stron internetowych. Umożliwiają zebranie atrybutów dotyczących wyglądu widoku w oddzielnym pliku xml – czyli oddzielenie wyglądu widoku od jego zawartości.

Tak wyglądała definicja widoku TextView z nagłówkiem widżetu Today in Wikipedia w pliku main_widget.xml, który definiuje UI widżetu:

 

<TextView
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Today in Wikipedia:"
    android:textColor="#ff000000"
    android:textSize="12sp"
    android:textStyle="bold"
    />

Atrybuty takie jak wymiary układu, kolor, rozmiar i format czcionki można zdefiniować jako Styl (u mnie to styl o nazwie Header). Wtedy ta sama definicja będzie wyglądać tak:

<TextView
    android:id="@+id/header"
    style="@style/Header"
    android:text="Today in Wikipedia:"
/>

A jak zdefiniować styl Header? Style należy definiować w pliku z rozszerzeniem .xml w katalogu  res/values/.Nazwa pliku jest dowolna, ale przy rozpoczynaniu projektu, Android Studio tworzy dla nas plik style.xml. Korzeniem XML-a ze stylami  musi być <resources>.Dodając nowy styl do dokumentu, dodajemy element <style>. Wybrane atrybuty umieszczamy w elementach <item>. Poniżej znajduje się plik styles.xml Losowego Faktu z Wikipedii. Styl Header odpowiada TextView z nagłówkiem widżetu, a styl FunFact TextView z losową ciekawostką z dzisiejszej daty.

<resources>
    <style name="Header" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#ff000000</item>
        <item name="android:textSize">12sp</item>
        <item name="android:textStyle">bold</item>
    </style>
    <style name="FunFact" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#ff000000</item>
        <item name="android:textSize">10sp</item>
    </style>
</resources>

Style mogą po sobie dziedzić. Atrybut parent elementu <style> umożliwia wskazanie stylu, po którym dany element dziedziczy.

Zamiast definiować style dla poszczególnych widoków, można też definiować je jako motywy (themes) dla całych aktywności lub aplikacji. We’ll get there.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s