Style i motywy

Wypróbuj tworzenie wiadomości
Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak korzystać z motywów w funkcji Utwórz
Design Systems w Compose →

Style i motywy na Androidzie umożliwiają oddzielenie szczegółów projektu aplikacji od struktury i zachowania interfejsu użytkownika, podobnie jak w przypadku arkuszy stylów w projektowaniu stron internetowych.

Styl to zbiór atrybutów określających wygląd pojedynczej osoby View Styl może określać atrybuty, takie jak kolor czcionki, rozmiar czcionki, kolor tła itp.

Motyw to zbiór atrybutów stosowanych do całej aplikacji, aktywności lub hierarchii widoku, a nie tylko do pojedynczego widoku. Gdy zastosujesz motyw, każda widoczna w aplikacji lub aktywności widok będzie stosować wszystkie obsługiwane przez niego atrybuty motywu. Motywy mogą też stosować style do elementów, które nie są widoczne, takich jak pasek stanu i tło okna.

Style i motywy są deklarowane w pliku zasobu stylu w res/values/, zwykle o nazwie styles.xml.

Rysunek 1. Do tej samej aktywności zastosowano 2 tematy: Theme.AppCompat (po lewej) i Theme.AppCompat.Light (po prawej).

Motywy a style

Motywy i style mają wiele podobieństw, ale są używane do różnych celów. Motywy i style mają tę samą podstawową strukturę – parę klucz-wartość, która mapuje atrybuty na zasoby.

Atrybut style określa atrybuty dla konkretnego typu widoku. Na przykład jeden styl może i określ atrybuty przycisku. Każdy atrybut określony w stylu jest atrybutem, który możesz ustawić w pliku układu. Wyodrębnianie wszystkich atrybutów do stylu ułatwia ich używanie i utrzymywanie w wielu widżetach.

Motyw definiuje kolekcję nazwanych zasobów, do których można odwoływać się w stylach, układach, widżetach itp. Motywy przypisują zasobom Androida nazwy semantyczne, np. colorPrimary.

Style i motywy powinny współdziałać ze sobą. Możesz na przykład mieć styl określający że jedna część przycisku to colorPrimary, a inna colorSecondary Definicje tych kolorów są podane w motywie. Kiedy urządzenie przejdzie w tryb nocny, aplikacja może przejść z trybu światła motyw „ciemny” motyw, zmianę wartości dla wszystkich tych nazw zasobów. Nie musisz zmieniać stylów, ponieważ używają one nazw semantycznych, a nie konkretnych definicji kolorów.

Więcej informacji o tym, jak ze sobą współdziałają motywy i style, znajdziesz w poście na blogu Stylizacja na Androidzie: motywy a style.

Utwórz i zastosuj styl

Aby utworzyć nowy styl, otwórz plik res/values/styles.xml projektu. Dla: W przypadku każdego stylu, który chcesz utworzyć, wykonaj te czynności:

  1. Dodaj element <style> o nazwie jednoznacznie identyfikującej styl.
  2. Dodaj element <item> dla każdego atrybutu stylu, który chcesz zdefiniować. Atrybut name w każdym elemencie określa atrybut, który w przeciwnym razie używasz jako atrybut XML w swoim layout. Wartość w elemencie <item> to wartość tego atrybutu.

Załóżmy na przykład, że zdefiniujesz następujący styl:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

Styl możesz zastosować do widoku w ten sposób:

<TextView
    style="@style/GreenText"
    ... />

Każdy atrybut określony w stylu jest stosowany w widoku, jeśli go akceptuje. Widok ignoruje wszystkie atrybuty, które nie są akceptowane.

Jednak zamiast stosować styl do poszczególnych widoków, zwykle stosuj style jako motyw do całej aplikacji, aktywności lub kolekcji jak opisano w innej sekcji tego przewodnika.

Rozszerzanie i dostosowywanie stylu

Podczas tworzenia własnych stylów zawsze rozszerzaj istniejący styl z ramy lub biblioteki pomocy, aby zachować zgodność ze stylami interfejsu platformy. Aby rozszerzyć styl, określ który chcesz rozszerzyć za pomocą atrybutu parent. Możesz wtedy zastąpić odziedziczone atrybutów stylu i dodawać nowe.

Możesz na przykład odziedziczyć domyślny wygląd tekstu platformy Androida i zmienić go jako następujące:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Jednak zawsze dziedzicz podstawowe style aplikacji z Android Support Library. Style w Bibliotece pomocy zapewniają zgodność, ponieważ każdy z nich jest optymalizowany pod kątem atrybutów interfejsu użytkownika dostępnych w każdej wersji. Style biblioteki obsługi często mają nazwę podobną do stylu z platformy, ale z dodatkiem AppCompat.

Aby dziedziczyć style z biblioteki lub własnego projektu, zadeklaruj nazwę stylu nadrzędnego bez części @android:style/ widocznej w poprzednim przykładzie. Przykład: Ten przykład dziedziczy style wyglądu tekstu z biblioteki pomocy:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

Możesz również odziedziczyć style – z wyjątkiem tych z platformy – przez rozszerzenie stylu z kropką zamiast atrybutu parent. Oznacza to, że umieść przedrostek nazwę stylu, rozdzielając ją kropką: nazwą stylu, który chcesz odziedziczyć. Ty zwykle robi się to tylko przy rozszerzaniu własnych stylów, a nie stylów z innych bibliotek. Przykład: ten styl dziedziczy wszystkie style z elementu GreenText w poprzednim przykładzie a następnie zwiększa rozmiar tekstu:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

Możesz dziedziczyć style w taki sposób dowolną liczbę razy, dodając kolejne nazwy.

Aby dowiedzieć się, które atrybuty możesz zadeklarować za pomocą tagu <item>, zapoznaj się z tabelą „Atrybuty XML” w różnych dokumentach referencyjnych klasy. Wszystkie widoki obsługują atrybuty XML z podstawowej klasy View, a wiele widoków dodaje własne atrybuty specjalne. Na przykład parametr Atrybuty XML: TextView zastosuj android:inputType który możesz zastosować do widoku tekstowego otrzymującego dane wejściowe, np. Widżet EditText.

Stosowanie stylu jako motywu

Motyw możesz utworzyć w taki sam sposób, w jaki tworzysz style. Różnica polega na sposobie zastosowania: zamiast stosować styl za pomocą atrybutu style w widoku, możesz zastosować motyw za pomocą atrybutu android:theme w tagu <application> lub <activity> w pliku AndroidManifest.xml.

Oto jak zastosować styl Material Design z biblioteki pomocy Androida „dark” (ciemny) motyw cała aplikacja:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

A tak możesz zastosować motyw „light” tylko do jednej aktywności:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

Każdy widok w aplikacji lub aktywności stosuje style, które obsługuje, z tych zdefiniowanych w danym temacie. Jeśli widok obsługuje tylko niektóre atrybuty zadeklarowane w stylu, zostaną zastosowane. tylko te atrybuty i ignoruje te, które nie są obsługiwane.

Od Androida 5.0 (poziom interfejsu API 21) i Biblioteki wsparcia Androida 22.1 możesz też określić atrybut android:theme dla widoku w pliku układu. Spowoduje to zmianę motywu i wszelkie widoki podrzędne, co jest przydatne przy zmianie palet kolorów motywów interfejsu.

Poprzednie przykłady pokazują, jak zastosować motyw taki jak Theme.AppCompat, który jest udostępnione w Bibliotece pomocy Androida. Zazwyczaj jednak warto dostosować motyw do marki aplikacji. Najlepszym sposobem jest rozszerzenie tych stylów z Biblioteki pomocy oraz zastąpią niektóre atrybuty, tak jak to opisano w następnej sekcji.

Hierarchia stylów

Android oferuje wiele sposobów konfigurowania atrybutów w aplikacji. Przykład: możesz ustawić atrybuty bezpośrednio w układzie, zastosować styl do widoku, zastosować motyw do układu, a nawet automatycznie ustawiać atrybuty.

Wybierając styl aplikacji, weź pod uwagę hierarchię stylów Androida. Ogólnie rzecz biorąc, należy użyć funkcji jak najwięcej motywów i stylów, aby zachować spójność. Jeśli te same atrybuty podasz w kilku miejscach, o tym, które z nich zostaną ostatecznie zastosowane, decyduje poniższa lista. Lista jest posortowana od najwyższego do najniższego priorytetu.

  1. Stosowanie stylizacji na poziomie znaku lub akapitu za pomocą zakresów tekstu do klas pochodnych TextView.
  2. Automatyczne stosowanie atrybutów
  3. bezpośrednie stosowanie poszczególnych atrybutów do widoku;
  4. Stosuję styl do widoku.
  5. Styl domyślny.
  6. Zastosowanie motywu do kolekcji widoków danych, aktywności lub całej aplikacji.
  7. Zastosowanie określonych stylów związanych z widokiem danych, na przykład ustawienie TextAppearance – TextView.

Rysunek 2. Stylizacja z poziomu span zastępuje stylizację z poziomu textAppearance.

TextAppearance

Ograniczeniem stylów jest to, że do elementu View możesz zastosować tylko 1 styl. W elemencie TextView możesz też określić atrybut TextAppearance, który działa podobnie do stylu, jak w tym przykładzie:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance umożliwia zdefiniowanie stylu dla konkretnego tekstu, pozostawiając styl View do innych zastosowań. Pamiętaj jednak, że jeśli zdefiniujesz atrybuty tekstowe bezpośrednio na View lub w stylu, wartości te zastępują TextAppearance wartości.

TextAppearance obsługuje podzbiór atrybutów stylizacji, które oferuje TextView. Pełną listę atrybutów znajdziesz tutaj: TextAppearance

Niektóre typowe atrybuty TextView, które nie są uwzględnione, to: lineHeight[Multiplier|Extra] lines, breakStrategy oraz hyphenationFrequency. TextAppearance działa na poziomie znaku, a nie akapitu, dlatego atrybuty, które wpływają na cały układ, nie są obsługiwane.

Dostosowywanie motywu domyślnego

Gdy tworzysz projekt w Android Studio, do aplikacji zostaje zastosowany motyw Material Design: domyślnie (zgodnie z definicją w pliku styles.xml projektu). Ten styl AppTheme rozszerza motyw z biblioteki pomocy i zawiera zastąpienia atrybutów kolorów używanych przez kluczowe elementy interfejsu, takie jak pasek aplikacji i pływający przycisk działania (jeśli jest używany). Dzięki temu możesz szybko dostosować kolorystykę aplikacji, zmieniając dostępne kolory.

Na przykład plik styles.xml wygląda mniej więcej tak:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Wartości stylu to tak naprawdę odwołania do innych zasobów kolorów zdefiniowanych w pliku res/values/colors.xml projektu. To plik, który edytujesz, aby zmienić kolory. Zobacz Omówienie kolorów Material Design aby poprawić wrażenia użytkownika dzięki dynamicznym kolorom i dodatkowym kolorom niestandardowym.

Gdy poznasz kolory, zaktualizuj wartości w pliku res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

Możesz wtedy zastąpić dowolne inne style. Możesz na przykład zmienić kolor tła aktywności w ten sposób:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

Listę atrybutów, których możesz używać w motywie, znajdziesz w tabeli atrybutów na stronie R.styleable.Theme. Podczas dodawania stylów widoków w układzie, można także znaleźć atrybuty w sekcji „Atrybuty XML”. w odwołaniach do klas widoku. Na przykład wszystkie widoki danych obsługują Atrybuty XML z podstawowego elementu View zajęcia.

Większość atrybutów jest stosowana w przypadku określonych typów widoków, a niektóre są stosowane we wszystkich widokach. Niektóre atrybuty motywu wymienione w sekcji R.styleable.Theme dotyczą jednak okna aktywności, a nie widoków w układzie. Na przykład windowBackground zmienia tło okna, a windowEnterTransition definiuje animację przejścia, która ma być używana podczas uruchamiania aktywności. Więcej informacji znajdziesz w sekcji Rozpoczynanie aktywność za pomocą animacji.

Biblioteka pomocy Androida udostępnia też inne atrybuty, których możesz użyć do dostosowywania motywu rozszerzonego z poziomu Theme.AppCompat, np. atrybutu colorPrimary pokazanego w poprzednim przykładzie. Najlepiej wyświetlać je w plik attrs.xml biblioteki.

W bibliotece Support Library dostępne są też inne motywy, które możesz rozszerzyć zamiast motywów pokazanych w poprzednim przykładzie. Dostępne tematy najlepiej sprawdzić w pliku themes.xml biblioteki.

Dodawanie stylów dla poszczególnych wersji

Jeśli nowa wersja Androida dodaje atrybuty motywu, których chcesz użyć, możesz dodać je do motywu a jednocześnie nadal jest zgodny ze starszymi wersjami. Wystarczy, że utworzysz kolejny plik styles.xml i zapiszesz go w katalogu values, który zawiera kwalifikator wersji zasobu:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

Style w pliku values/styles.xml są dostępne dla wszystkich wersji, motywy w folderze values-v21/styles.xml mogą je dziedziczyć. Oznacza to, że możesz uniknąć powielania stylów, zaczynając od motywu „podstawowego”, a następnie rozszerzając go o style specyficzne dla wersji.

Aby na przykład zadeklarować przejścia między oknami w przypadku Androida 5.0 (poziom interfejsu API 21) lub nowszego, musisz użyć nowych atrybutów. Twój motyw podstawowy w res/values/styles.xml może wyglądać tak:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

Następnie dodaj style dla poszczególnych wersji w sekcji res/values-v21/styles.xml w ten sposób:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

Teraz możesz zastosować AppTheme w pliku manifestu, a system wybierze style dostępne dla każdej wersji systemu.

Więcej informacji o używaniu zasobów alternatywnych na różnych urządzeniach znajdziesz w artykule Udostępnianie zasobów alternatywnych.

Dostosowywanie stylów widżetów

Każdy widżet w platformie i w bibliotece pomocy ma styl domyślny. Jeśli na przykład stylu aplikacji za pomocą motywu z Biblioteki pomocy, np. Styl elementu Button jest określany na podstawie Styl: Widget.AppCompat.Button. Jeśli chcesz zastosować inny styl widżetu do użyj atrybutu style w pliku układu. Na przykład w tym przykładzie zastosowano styl przycisku bez obramowania:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

Jeśli chcesz zastosować ten styl do wszystkich przycisków, możesz go zadeklarować w swojej buttonStyle w ten sposób:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

Style widżetów możesz rozszerzać tak, jak rozszerzasz każdy inny styl. i zastosuj styl widżetu niestandardowego do układu lub motywu.

Dodatkowe materiały

Więcej informacji o motywach i stylach znajdziesz w tych materiałach:

Posty na blogu