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
.
![](https://developer.android.com/static/training/material/images/material-themes_2x.png?authuser=9&hl=pl)
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:
- Dodaj element
<style>
o unikalnej nazwie identyfikującej styl. - Dodaj element
<item>
dla każdego atrybutu stylu, który chcesz zdefiniować. Atrybutname
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.
- 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. - Automatyczne stosowanie atrybutów
- Stosowanie poszczególnych atrybutów bezpośrednio w widoku danych.
- Stosuję styl do widoku.
- Styl domyślny.
- Zastosowanie motywu do kolekcji widoków danych, aktywności lub całej aplikacji.
- Zastosowanie określonych stylów związanych z widokiem danych, na przykład ustawienie
TextAppearance
–TextView
.
![](https://developer.android.com/static/guide/topics/ui/images/text-multiple-styles.png?authuser=9&hl=pl)
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
- Styl Androida: motywy a style
- Styl Androida: typowe atrybuty motywów
- Styl Androida: preferowanie atrybutów motywu