Material You

W Androidzie 12 i nowszych wersjach interfejs Material You skupia się na wyrażaniu siebie i płynności w systemie operacyjnym Android, aby pomóc użytkownikom tworzyć i korzystać z jednego spójnego środowiska dostosowanego do ich potrzeb. Jako partner Androida zachęcamy do uwzględnienia w swoich urządzeniach z Androidem projektu Material You w tych obszarach:

• Kolory dynamiczne
• Ruch
• Widżety

Kolory dynamiczne

Dynamiczne kolory są podstawą projektu Material You i kluczowym elementem wieloletniej strategii Androida, która ma na celu zapewnienie użytkownikom prostszej i bardziej zaawansowanej personalizacji niż na innych urządzeniach. Material You oferuje:

• Użytkownikom i programistom zapewniają spójną, bogatą personalizację na dowolnym urządzeniu z Androidem.

• możliwości dla producentów urządzeń z Androidem, aby nadal ulepszać interfejs systemu i własne aplikacje w sposób zgodny z kolorami, marką i formą ich sprzętu i marki;

Aby korzystać z dynamicznych kolorów, wykorzystaj w swojej ofercie oprogramowania dla użytkowników Androida 12 historię wyodrębniania kolorów Material You. Na urządzeniu używaj logiki wyodrębniania kolorów, która jest dostępna w AOSP, zwłaszcza logiki, która pobiera kolor źródłowy z pojedynczej tapety lub motywu i wyprowadza go za pomocą 65 interfejsów API kolorów. Wymagania dotyczące kolorów dynamicznych znajdziesz w artykule Korzystanie z kolorów dynamicznych.

Pełny proces dynamicznego kolorowania składa się z 4 etapów, jak pokazano poniżej:

Rysunek 1. Przepływ kolorów dynamicznych w Material You

1. Użytkownik zmienia tapetę lub motyw za pomocą selektora OEM.

2. Użytkownik wybiera jedną z tych opcji:

   • Motyw urządzenia. Gdy ta opcja jest zaznaczona, Android automatycznie wybiera jeden kolor źródłowy, który spełnia wymagania.

   • Nowa tapeta i motyw. Gdy ta opcja jest zaznaczona, logika AOSP automatycznie wybiera jeden kolor źródłowy z wybranej tapety.

3. AOSP rozszerza pojedynczy kolor źródłowy na 5 palet tonalnych z 13 wariantami kolorów tonalnych każdy, zgodnie z logiką AOSP, które następnie wypełniają 65 atrybutów kolorów.

4. Interfejs aplikacji używa 65 atrybutów kolorów w sposób spójny w całym ekosystemie aplikacji na Androida. Zalecamy używanie tej samej palety kolorów w interfejsie systemu i aplikacji OEM.

poprawki Androida 12,

Aby uzyskać kompleksową logikę wyodrębniania kolorów tapety i umożliwić urządzeniu wypełnianie interfejsów API 65 kolorów w sposób zgodny z ekosystemem, dodaj do implementacji Androida 12 te poprawki:

• Obowiązkowe

  • Dodawanie monet do AOSP
  • Dostosowywanie filtrów chromatycznych/lstar do kolorów nasion
  • Użyj maksymalnej wartości 40 w przypadku tonu 90

• Zdecydowanie zalecane

  • Naprawiono warunek wyścigu podczas ustawiania koloru uruchamiania w syspropach.
  • Zezwalanie na powiadomienia o zmianach motywu w przypadku nakładek
  • Naprawianie warunku wyścigu podczas ustawiania właściwości sysprop koloru uruchamiania (druga tura)
  • Przenieś flagi funkcji do pakietu flag.
  • Prawidłowe wdrożenie obsługi motywów dla wielu użytkowników
  • Rozwiązanie problemu polegającego na tym, że po ponownym uruchomieniu urządzenia nie było dostępnej opcji wybranego koloru tapety
  • Naprawianie błędu obliczania odcienia trzeciorzędowego
  • Nie zezwalaj aplikacjom działającym w tle na zmianę motywu

Określanie niestandardowych kolorów w ThemePicker

Jeśli używasz aplikacji AOSP ThemePicker, aplikacja WallpaperPicker wyświetla sekcję kolorów, jeśli oba z tych warunków są spełnione:

• flag_monet w frameworks/base/packages/SystemUI/res/values/flags.xml: true.
• Systemowy plik APK stub z nazwą pakietu jest zdefiniowany w pliku themes_stub_package w pliku packages/apps/ThemePicker/res/values/override.xml.

Format pliku APK stub

Przykładową wersję tego pliku APK znajdziesz w packages/apps/ThemePicker/themes.

Plik APK powinien zawierać tylko zasoby, które opisują dostępne kolory podstawowe i ich nazwy.

Element stub powinien zawierać plik XML w sekcji res/xml w takim formacie:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

W tym pliku każdy element item w elementach color_bundles ma inną nazwę, o ile tylko ciągi znaków poniżej mają nazwę bundle_name_item.

Dla każdego koloru powinien być dostępny ciąg tekstowy bundle_name_item z opisową nazwą koloru. Można je przetłumaczyć, dodając odpowiednie przetłumaczone ciągi znaków do katalogów res/values-language code.

Rzeczywiste wartości kolorów mogą znajdować się w tym samym pliku XML lub w osobnym pliku XML z zasobami w formacie:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

W przypadku każdego elementu w tablicy kolorów musi istnieć wpis color_primary_item i color_secondary_item (oba kolory powinny być takie same). Wartości tych wpisów color to rzeczywiste kody kolorów, które mają być wyświetlane w sekcji kolor podstawowy.

Krok 1. Utwórz motyw dla użytkownika

W selektorze motywów użytkownicy mogą korzystać z nowych funkcji personalizacji Material You i wybierać opcje kolorów lub gotowe zestawy kolorów. Jeśli pasuje on do Twojego produktu i grupy demograficznej użytkowników, możesz zaoferować im większą personalizację i dodatkowe opcje kolorystyczne, korzystając z selektora motywów lub selektora tapet.

• Podczas używania selektora tapety wyodrębnianie kolorów tapety jest domyślnie włączone. Możesz jednak wprowadzić pewne zmiany w selektorze, aby udostępnić użytkownikowi więcej opcji.

Krok 2. Wyodrębnij kolor tapety jako kolor źródłowy

Aby umożliwić wyodrębnianie kolorów tapety, wybierz z wymienionych powyżej łatek do Androida 12 (ta funkcja zostanie domyślnie włączona w przyszłej wersji AOSP). Logika AOSP, która powoduje wyodrębnienie tapety, zaczyna się w frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java na ThemeOverlayController#mOnColorsChangedListener przez WallpaperManager#onWallpaperColorsChanged. Zalecamy używanie niezmodyfikowanej logiki AOSP, aby zapewnić spójne środowisko programistyczne.

Domyślnie logika wybiera kolor o najwyższej częstotliwości, który nadaje się do użycia. Aby korzystać z innych kolorów źródłowych zwracanych przez algorytm i prezentować je użytkownikom w selektorze motywów, użyj elementu ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Aby nadawał się do użycia, kolor źródłowy (czy wyodrębniony z tapety, czy wybrany przez użytkownika jako wstępny) musi mieć wartość chromatycznaCAM16co najmniej 5. Dzięki temu nie będzie on pod wpływem subtelnych ciemnych odcieni, gdy zostanie przekształcony z jednego koloru na 65 odcieni tonalnych, i nadal będzie reprezentować wybór użytkownika. Aby odczytać i zmodyfikować kolory w CAM16, użyj Cam#fromInt lub Cam#getInt.

Używanie niedynamicznej palety kolorów Na urządzeniach, które nie obsługują wyodrębniania kolorów z tapety, możesz nadal dbać o to, aby aplikacje Google i aplikacje innych firm obsługujące dynamiczne kolory dobrze wyglądały. Aby to zrobić:

• Aby użyć domyślnej palety Material, wyłącz flag_monet w sekcji frameworks/base/packages/SystemUI/res/values/flags.xml.
• Upewnij się, że użytkownicy nadal mogą personalizować system operacyjny za pomocą gotowego selektora motywów.

Krok 3. Rozwiń kolor źródłowy do interfejsów API kolorów

Na podstawie pojedynczego koloru źródłowego uzyskanego w poprzednim kroku Android generuje 5 unikalnych palet tonalnych (akcentowe 1–3, neutralne 1–2), z których każda zawiera 13 kolorów, a każdy kolor ma różne wartości luminacji (0–1000), co daje w sumie 65 kolorów. Logika zawarta w aktualizacjach Androida 12 implementuje tę funkcję rozszerzania kolorów prawidłowo. Szczegóły implementacji znajdziesz poniżej.

Ze względu na spójność dla deweloperów 5 palet barw (accent1, accent2, accent3, neutral1, neutral2) i odpowiadających im 13 kolorów muszą być oparte na jednym kolorze źródłowym z odpowiednimi zmianami wartości chroma i hue w CAM16, jak podano poniżej:

• system_accent1

  • Chroma: użyj wartości „40” dla wariantów kolorów kończących się na: 0, 10, 50, 100, w przeciwnym razie użyj wartości „48”.
  • Odcień: taki sam jak źródło

• system_accent2

  • Chroma: użyj „16”.
  • Odcień: taki sam jak źródło

• system_accent3

  • Chroma: użyj wartości „32”.
  • Barwa: obrót o 60 stopni w kierunku dodatnim

• system_neutral1

  • Chroma: użyj wartości „4”.
  • Odcień: taki sam jak źródło

• system_neutral2

  • Chroma: użyj „8”.
  • Odcień: taki sam jak źródło

CTS obejmuje testy weryfikujące wywołania interfejsu API dotyczące luminancji i odcienia. Aby uruchomić, użyj polecenia atest SystemPalette.

Krok 4. Używaj dynamicznych kolorów w aplikacjach i interfejsie systemu

Po ustawieniu dynamicznych kolorów na urządzeniu aplikacje wykorzystują je zgodnie ze wskazówkami w Material Design. Wytyczne dotyczące materiałów zostaną opublikowane na stronie material.io do 26 października 2021 r., aby aplikacje innych firm mogły je zastosować. W przypadku interfejsu systemu i aplikacji własnych zdecydowanie zalecamy zintegrowanie dynamicznych kolorów w całości interfejsu w sposób odpowiedni dla Twojego sprzętu i marki, który pozwoli Ci wyróżnić swoje urządzenia.

Ogólne wskazówki dotyczące dynamicznych kolorów znajdziesz w tych materiałach:

• Używaj kolorów uzupełniających w przypadku elementów pierwszego planu w aplikacjach i interfejsie systemu:

  @android:color/system_accent1_0 … 1000 // most-used foreground color group
  @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
  @android:color/system_accent3_0 … 1000 // playful, analogous color
  

• Używaj neutralnych kolorów w przypadku elementów tła w aplikacjach i interfejsie systemu:

  @android:color/system_neutral1_0 … 1000 // most-used background color group
  @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
  

Więcej informacji o tym, jak Material You mapuje kolory i jak interfejsy API są używane w SysUI, znajdziesz w dodatkowych materiałach.

Krok 5. Dodaj opcje dynamicznych kolorów w implementacji AOSP WallpaperPicker

kompilować na Androida 13 lub nowszego,

Od Androida 13 funkcja android.theme.customization.accent_color jest wycofana. Dodano nowy atrybut android.theme.customization.theme_style, aby umożliwić obsługę różnych wersji kolory. Obecnie w kodzie mamy 4 warianty:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

Są one wysyłane na adres Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, jak pokazano w pliku JSON poniżej:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Wersja na Androida 12 lub starszego

Podczas korzystania z elementu dobierania niestandardowego motywu urządzenie musi wysłać prawidłowy kolor źródłowy do elementu Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, podając plik JSON w takim formacie (gdzie 746BC1 to przykładowy prawidłowy kolor źródłowy):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

Spowoduje to pominięcie ekstrakcji koloru tapety (krok 2) i bezpośrednie rozwinięcie podanego koloru źródłowego na 65 atrybutów koloru (krok 3).

Krok 6. Prześlij zgłoszenie

Oprócz integracji z systemem musisz przesłać zgłoszenie i poinformować nas o nazwie swojej marki (Build.MANUFACTURER). Większość aplikacji innych firm używa komponentów Material Design na Androida do wyświetlania dynamicznych kolorów, dlatego używamy zakodowanej na stałe listy dozwolonych, aby określić, które urządzenia zintegrowały funkcję dynamicznych palet barw tonów.

Ruch

Płynne animacje sprawiają, że urządzenia wydają się nowoczesne i luksusowe. Aby budować i utrzymywać zaufanie deweloperów oraz ich zadowolenie, płynne przewijanie i efekt falowania są kluczowymi elementami płynnego ruchu, które muszą wyglądać i działać spójnie.

Przewijanie w górę w systemie operacyjnym

Android 12 zawiera bardziej responsywny, dynamiczny ruch przewijania w formie rozciągania widoku, który jest wyświetlany, gdy użytkownik próbuje przewinąć listę poza jej krawędź. Poniżej znajdziesz przykład:

Rysunek 2. Efekt przewijania do końca w Androidzie 12, jak pokazano w Ustawieniach

Aby zapewnić spójność, upewnij się, że ogólny efekt przewijania na urządzeniach jest podobny do tego:

• Na urządzeniach, które zwracają wartość Prawda dla ActivityManager.isHighEndGfx(), efekt przewijania jest nieliniowym rozciąganiem ekranu (jak pokazano powyżej).

• Na urządzeniach o niższej wydajności efekt rozciągania jest uproszczony do rozciągania liniowego (aby zmniejszyć obciążenie systemu).

Przewijanie w aplikacji własnej

Jeśli korzystasz z widoków niestandardowych, może być konieczne dostosowanie niektórych aplikacji i interfejsu systemu, które korzystają z rozciągania.

• Aby obsługiwać rozciąganie podczas przewijania, zaktualizuj biblioteki do najnowszych wersji:

  • androidx.recyclerview:recyclerview:1.3.0-alpha01 za RecyclerView
  • androidx.core:core:1.7.0-alpha01 co NestedScrollView i EdgeEffectCompat
  • androidx.viewpager:viewpager:1.1-alpha01 za ViewPager

• W przypadku niestandardowych układów, które używają EdgeEffect, rozważ wprowadzenie tych zmian w UX:

  • W przypadku rozciągania podczas przewijania użytkownicy nie powinni wchodzić w interakcję z treściami układu, gdy jest on rozciągany. Użytkownicy powinni manipulować tylko samym rozciągnięciem, a nie mieć możliwości naciśnięcia przycisku w treści.

  • Gdy użytkownicy dotykają treści podczas animacji EdgeEffect, powinni zatrzymać animację i mieć możliwość manipulowania rozciągnięciem. Bieżąca wartość pull jest dostępna w EdgeEffectCompat.getDistance().

  • Aby zmienić wartość funkcji pull i zwrócić zużytą ilość, użyj funkcji onPullDistance(). Dzięki temu deweloperzy mogą płynnie przechodzić od rozciągania do przewijania, gdy palec odciąga palca od pozycji początkowej.

  • Jeśli podczas pracy z przewijaniem zagnieżdżonym treści są rozciągnięte, rozciągnięcie powinno pochłaniać ruch dotykowy przed treściami zagnieżdżonymi, w przeciwnym razie zagnieżdżenie może się przewijać, gdy palec zmienia kierunek, zamiast zwalniać rozciągnięcie.

Szczegółowe informacje o przewijaniu ponad górną krawędź ekranu znajdziesz w artykule Animowanie gestu przewijania.

Korzystanie z efektu falowania (dotykowego sygnału zwrotnego) w systemie operacyjnym

Android 12 zawiera delikatniejszy efekt falowania, który daje użytkownikom sygnał, że kliknięcie zostało zarejestrowane.

Rysunek 3. Efekt falowania w Androidzie 12 z delikatniejszą animacją wypełnienia

Aby zapewnić deweloperom przewidywalność i wygodę użytkownikom, zadbaj o to, aby efekt falowania na Twoich urządzeniach był podobny do przykładu pokazanego powyżej. Chociaż nie musisz wykonywać żadnych konkretnych czynności integracyjnych, aby obsługiwać efekty falowania, warto przetestować efekt na swoich urządzeniach, aby sprawdzić, czy nie doszło do niezamierzonego cofnięcia zmian w implementacji.

Widżety

Widgety to kluczowe komponenty urządzenia z Androidem. Android 12 zawiera nowe interfejsy API i ich funkcje, które powinny obsługiwać wszyscy producenci OEM.

• W systemie operacyjnym obsługiwane są interfejsy API deweloperów dotyczące układów widżetów, ich rozmiarów i parametrów oprogramowania (np. rozmiaru zaokrąglonych narożników). Twoja implementacja powinna prawidłowo obsługiwać widżety w ramach udostępniania parametrów przez interfejsy API oraz zapewniać możliwość zmiany rozmiaru widżetów i ich konfigurowania przez użytkownika.

• W swoich aplikacjach korzystaj z nowych funkcji interfejsu API, aby w miarę możliwości aktualizować lub tworzyć nowe widżety własne. W przypadku wszystkich widżetów aplikacji własnych, które są w Twoim zakresie, przejrzyj poniższą listę kontrolną dla deweloperów.

  • Priorytet jest ustalany na podstawie rekomendacji platformy.
  • Aby uzyskać szczegółowe informacje o rekomendacji, kliknij link w kolumnie Zmiana.

  Obszar	Zmień	Priorytet implementacji
  Ulepszenie strony głównej	Dodawanie skalowanych podglądów	P1S
  	Dodawanie opisu widżetu	P1S
  	Ułatwienie personalizowania widżetów	P2 (opcjonalnie)
  	Włączanie płynniejszych przejść	P0
  	Unikaj trampolin nadawania	P0
  Wdrożenie wytycznych dotyczących widżetów	Ulepszenie rozmiarów i układów widżetów	P2
  	Stosowanie kolorów dynamicznych	P0
  	Zaokrąglenie rogów	P0
  	Dodawanie nowych złożonych przycisków	P2
  Upraszczanie kodu dotychczasowego widżetu	Uprość kolekcje RemoteView	P2
  	Upraszczanie obsługi środowiska wykonawczego RemoteView	P2

Dodatkowe materiały

Używanie kolorów w interfejsie systemu

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Rysunek 4. Używanie dynamicznych kolorów w interfejsie systemu

Aktualizacje atrybutu koloru w bibliotece Material

W nadchodzącej wersji Material zaktualizuje atrybuty motywu, tworząc role kolorów, które służą do dostarczania kolorów do określonych widoków.

Materiał będzie aktualizował atrybuty stanów za pomocą tych wskaźników:

Najczęstsze pytania

Wyodrębnianie kolorów

Czy po zmianie tapety przez użytkownika wyodrębnianie kolorów odbywa się automatycznie, czy musi być wywołane z jakiegoś miejsca?

W przypadku łatek do Androida 12 wyodrębnianie kolorów tapety jest domyślnie włączone.

ThemeOverlayController.java uruchamia logikę z ThemeOverlayController#mOnColorsChangedListener i WallpaperManager#onWallpaperColorsChanged.

Czy w przypadku animowanych tapet lub tapet wideo można określić, kiedy wyodrębnianie kolorów pobiera kolor z ekranu? Niektórzy użytkownicy mogą chcieć kolorów z ostatniej klatki, ponieważ jest ona wyświetlana przez większość czasu.

Wyodrębnianie kolorów jest wywoływane, gdy użytkownik ustawi tapetę lub po cyklu zasilania ekranu (w odpowiedzi na zdarzenie WallpaperEngine#notifyColorsChanged). Ostatnie zdarzenie WallpaperColors (z tapety na żywo) jest stosowane po wyłączeniu i ponowym włączeniu ekranu.

Selektor motywów/tapet

Jak włączyć selektor motywów, aby użytkownicy mogli wybrać więcej niż jeden kolor źródłowy? Czy istnieje sposób na uzyskanie tych kolorów z logiki wyodrębniania?

Tak. W selektorze motywów możesz użyć opcji ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Nazwy Pixeli można wyświetlać jako ikony tematyczne. Czy jest ona zawarta w 3 łatkach, które udostępniłeś? Jak producenci OEM mogą to zastosować?

Nie. Ikony z motywem są w wersji beta i nie są dostępne w Androidzie 12.

Czy można korzystać z aplikacji Tapeta Google z włączonymi funkcjami wyodrębniania i wybierania kolorów?

Tak. Funkcje te można wdrożyć w najnowszej wersji aplikacji Tapety Google, wykonując czynności integracyjne opisane wcześniej na tej stronie.

Aby dowiedzieć się więcej, skontaktuj się z menedżerem ds. konta.

Czy Google może udostępnić aplikację lub kod źródłowy, aby producenci urządzeń oryginalnych mogli wdrożyć własną wersję podglądu dynamicznych kolorów w menu ustawień, która wygląda podobnie do sekcji podglądu w aplikacji Google do wybierania tapet?

Główne klasy, które renderują podgląd, to WallpaperPicker2 i Launcher3.

Ekran podglądu tapety:WallpaperSectionController.

Jak zaimplementować podgląd po zmianie koloru, jak pokazano w aplikacji Tapeta Google?

Aplikacja do wybierania tapety oczekuje, że ContentProvider będzie dostępna w Menu z aplikacjami (aplikacja z menu opartym na Launcher3 ją ma). Podgląd jest udostępniany przez GridCustomizationsProvider w Menu z aplikacjami. Aby go odczytać, aplikacja tapety i stylu powinna odwoływać się do metadanych głównej czynności tej aplikacji. Wszystko to jest wdrażane w ramach Launcher3 w AOSP i jest dostępne dla OEM-ów.