Style i motywy

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z motywów w funkcji Utwórz
Projektowanie systemów w Compose → .

Style i motywy na Androidzie pozwalają oddzielić szczegóły projektu aplikacji od UI strukturze i zachowaniu, podobnie jak w przypadku arkuszy stylów w projektowaniu stron internetowych.

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

Motyw to zbiór atrybutów, które mają zastosowanie do całej aplikacji, aktywności lub widoku danych. hierarchii, a nie tylko pojedynczego widoku. Gdy zastosujesz motyw, każdy widok w aplikacji lub Działanie powoduje zastosowanie wszystkich obsługiwanych atrybutów motywu. Motywy mogą też stosować style do innych elementów, takich jak pasek stanu czy tło okna.

Style i motywy są deklarowane w sekcji style resource file (plik zasobów 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 resources.

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 to atrybut, który można w nim ustawić pliku układu. Wyodrębnianie wszystkich atrybutów do stylu ułatwia ich używanie i utrzymywanie w wielu widżetach.

theme definiuje zbiór nazwanych zasobów, do których mogą się odwoływać style, układy widżety itd. Motywy przypisują do Androida nazwy semantyczne, np. colorPrimary i zasobami Google Cloud.

Style i motywy powinny ze sobą współpracować. Możesz na przykład mieć styl określający że jedna część przycisku to colorPrimary, a inna colorSecondary Rzeczywiste 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, bo style używają semantycznych nazw, a nie konkretnych definicji kolorów.

Więcej informacji o współdziałaniu motywów i stylów znajdziesz w poście na blogu Styl Androida: 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 unikalnej nazwie identyfikującej styl.
  2. Dodaj element <item> dla każdego atrybutu stylu, który chcesz zdefiniować. Atrybut name w każdym produkcie określa atrybut używany jako atrybut XML w pliku układ. Wartość w elemencie <item> jest wartością 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 do tego widoku, jeśli widok go zaakceptuje. 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

Tworząc własne style, zawsze rozszerzaj istniejący styl z platformy lub pomocy Biblioteka, która pozwala 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>

Zawsze dziedzicz jednak podstawowe style aplikacji z biblioteki pomocy Androida. Style w interfejsie Biblioteka pomocy zapewnia zgodność, optymalizując każdy styl pod kątem atrybutów UI dostępnych w każdej wersji. Style biblioteki pomocy często mają nazwę podobną do nazwy używanej na platformie, ale z usługą 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 dalej dziedziczyć takie style dowolną liczbę razy, łącząc kolejne nazw.

Informacje o tym, które atrybuty można zadeklarować za pomocą tagu <item>, znajdziesz w sekcji „XML atrybuty” w różnych odwołaniach do klas. Obsługa wszystkich widoków danych Atrybuty XML z bazy View, a wiele widoków ma 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 tym, jak go zastosować: zamiast zastosować do widoku styl z atrybutem style, zastosujesz motyw z atrybutem atrybut 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>

Jak zastosować „światło” motyw tylko do jednej czynności:

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

Każdy widok w aplikacji lub aktywność ma obsługiwane style spośród tych zdefiniowanych w dla danego motywu. 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.

Począwszy od Androida 5.0 (poziom interfejsu API 21) i Biblioteki pomocy Androida w wersji 22.1, możesz też określić android:theme do 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. Zwykle dobrze jest jednak dostosować motyw, 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.

Przy wyborze stylu aplikacji pamiętaj o hierarchii 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 podasz te same atrybuty w atrybucie w wielu miejscach, ta lista określa, które atrybuty zostaną ostatecznie zastosowane. Lista jest w kolejności od najwyższego do najniższego.

  1. Stosowanie stylu na poziomie znaków lub akapitu z wykorzystaniem rozpiętości tekstu w przypadku elementów pochodzących z danych typu TextView zajęcia.
  2. Automatyczne stosowanie atrybutów
  3. Stosowanie poszczególnych atrybutów bezpośrednio w widoku danych.
  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. Styl z span zastępuje styl z textAppearance

Wygląd tekstu

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

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

TextAppearance umożliwia określenie stylu konkretnego tekstu, pozostawiając styl View – dostępne do innych celów. 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 stylu: TextView oferty. 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, więc atrybuty, które mają wpływ 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 obejmuje zastąpienia używanych atrybutów koloru według kluczowych elementów interfejsu, takich jak pasek aplikacji czy pływający przycisk polecenia, jeśli jest używany. A więc Ty, możesz szybko dostosować projekt kolorów aplikacji, aktualizując dostępne kolory.

Na przykład Twój plik styles.xml wygląda podobnie do tego:

<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 są w rzeczywistości odwołaniami do innych elementów, zasoby kolorów, zdefiniowane w tagu res/values/colors.xml projektu. To właśnie 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 znasz już 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 następnie zastąpić dowolne inne style. Możesz na przykład zmienić aktywność kolor tła:

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

Listę atrybutów, których możesz użyć w swoim 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 do określonych typów widoków, a niektóre do wszystkich. Pamiętaj jednak: niektóre atrybuty motywu wymienione na stronie R.styleable.Theme ma zastosowanie do: w oknie aktywności, a nie tylko w widokach w układzie. Na przykład windowBackground zmienia wartość Tło okna i windowEnterTransition definiuje animację przejścia, która będzie używana, gdy rozpocznie się aktywność. Więcej informacji znajdziesz w sekcji Rozpoczynanie aktywność za pomocą animacji.

W bibliotece pomocy Androida znajdziesz też inne atrybuty, których możesz użyć do dostosowania motywu. rozszerzony z Theme.AppCompat, taki jak atrybut colorPrimary widoczny w z poprzedniego przykładu. Najlepiej wyświetlać je w plik attrs.xml biblioteki.

W Bibliotece pomocy znajdziesz też różne motywy, które warto rozszerzyć niż te pokazane w poprzednim przykładzie. Dostępne motywy najlepiej zobaczyć, plik themes.xml biblioteki.

Dodaj style zależnie od 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. Potrzebujesz tylko kolejnego pliku styles.xml są zapisane w katalogu values, który zawiera wersja zasobu kwalifikator:

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ąć duplikowanie stylów, zaczynając od elementu „base” motywu, a następnie rozszerzenie go do wybranej wersji stylów.

Aby na przykład zadeklarować przejścia w oknach na Androidzie 5.0 (poziom interfejsu API 21) i nowszym, musisz aby korzystać z nowych atrybutów. Dlatego Twój motyw podstawowy w aplikacji res/values/styles.xml może wyglądać tak: to:

<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 dostosowane do konkretnej wersji w pliku 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ć styl AppTheme w pliku manifestu, a system wybierze style w każdej wersji systemu.

Aby dowiedzieć się więcej o korzystaniu z alternatywnych zasobów w przypadku różnych urządzeń, zobacz Udostępnianie alternatywnych zasobów.

Dostosuj style 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 parametr ten styl powoduje zastosowanie stylu przycisku bez obramowania z biblioteki:

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

Jeśli chcesz zastosować ten styl do wszystkich przycisków, możesz zadeklarować go w sekcji buttonStyle w następujący 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 dodatkowych materiałach:

Posty na blogu