Jetpack Compose Glimmer jest oparty na Jetpack Compose i zawiera funkcje kompozycyjne, komponenty, zachowania i motyw zaprojektowane z myślą o okularach z wyświetlaczem. Glimmer umożliwia tworzenie natywnych interfejsów AI do okularów z AI za pomocą Compose. Dzięki temu możesz ożywić swoje aplikacje przy użyciu mniejszej ilości kodu, zaawansowanych narzędzi i intuicyjnych interfejsów Kotlin API.
Komponenty Jetpack Compose Glimmer
Jetpack Compose Glimmer udostępnia funkcje @Composable dostosowane do wyświetlaczy okularów AI, takie jak Text, Button i ListItem. Oto niektóre unikalne cechy komponentów kompozycyjnych Glimmer w Jetpack Compose:
- Uproszczone style: komponenty
Surfacemają na przykład domyślnie czarne lub przezroczyste tło, co pozwala zoptymalizować wyświetlanie. - Zoptymalizowane domyślne kolory: Glimmer w Jetpack Compose domyślnie oblicza kolor treści na podstawie koloru tła, więc programiści rzadko muszą ręcznie ustawiać kolory tekstu, co zwiększa czytelność bez dodatkowej pracy.
Zróżnicowane zaznaczenie: zaznaczenie jest sygnalizowane za pomocą wizualnego obrysu zamiast efektu fali, co zapewnia lepszą widoczność.
Rysunek 1. 3 stany skupienia w Glimmer w Jetpack Compose, które są rozróżniane za pomocą wizualnych informacji zwrotnych opartych na konturach. Zoptymalizowane podniesienie: Glimmer w Jetpack Compose używa ograniczonej liczby cieni, aby wizualnie oddzielić elementy.
Rysunek 2. 5 poziomów uniesienia w Jetpack Compose Glimmer, które są rozróżniane za pomocą ograniczonych cieni.
Komponenty Glimmer w Jetpack Compose
Jetpack Compose Glimmer zawiera własny zestaw zaprojektowanych specjalnie komponentów, podobnych do komponentów w Jetpack Compose, ale zoptymalizowanych pod kątem wyjątkowych wymagań wizualnych i interaktywnych okularów AI. Komponenty Glimmer w Jetpack Compose można dostosowywać za pomocą motywu Glimmer w Jetpack Compose. Bazują one na funkcjach Compose niższego poziomu, aby domyślnie obsługiwać metody wprowadzania danych przez użytkownika, takie jak klikanie i przesuwanie.
Więcej informacji o korzystaniu z poszczególnych komponentów znajdziesz w tych przewodnikach:
Jeśli jeden z tych komponentów wysokiego poziomu nie pasuje do Twojego przypadku użycia, możesz użyć surface, aby utworzyć komponent niestandardowy. Powierzchnie to podstawowy element składowy w Jetpack Compose Glimmer – puste płótno, na którym możesz tworzyć dowolne, niestandardowe projekty lub interakcje.
Modyfikatory Glimmer w Jetpack Compose
Modyfikatory w funkcji Glimmer w Jetpack Compose działają identycznie jak modyfikatory Compose, dzięki czemu możesz rozszerzać funkcjonalność komponentów kompozycyjnych, dostosowując ich układ, wygląd i zachowanie. Jetpack Compose Glimmer może wprowadzać konkretne modyfikatory lub stosować unikalne wartości domyślne w przypadku wizualnych informacji zwrotnych i wydajności specyficznych dla okularów.
Głębokość efektu Glimmer w Jetpack Compose
Komponenty Glimmer w Jetpack Compose używają głębi do reprezentowania hierarchii, co pomaga wizualnie odróżnić elementy wyświetlane nad innymi kartami. Głębia w przypadku okularów AI to połączenie umieszczenia w przestrzeni Z i cieni. W przypadku większości komponentów wyższego poziomu, takich jak elementy listy, głębia jest stosowana automatycznie na podstawie stanu fokusu. Gdy komponent jest zaznaczony, zyskuje głębię, a gdy traci zaznaczenie, wraca do normalnego stanu. Jeśli jednak pracujesz z komponentami niestandardowymi, możesz użyć parametru depth w przypadku Modifier.surface lub Modifier.depth.
Motyw Glimmer w Jetpack Compose
Jetpack Compose Glimmer ma specjalny system motywów dla okularów AI.
Motyw Glimmer w Jetpack Compose zawiera uproszczoną i zoptymalizowaną paletę kolorów, typografii i kształtów. Zapewnia to maksymalną widoczność i zwięzłość w przypadku okularów z AI. Wszystkie komponenty Glimmer w Jetpack Compose są zaprojektowane z myślą o automatycznej integracji z określonymi metodami wprowadzania danych w okularach AI. Motyw Glimmer w Jetpack Compose jest udostępniany za pomocą klasy GlimmerTheme.
Podobnie jak inne motywy w Jetpack Compose, GlimmerTheme zawiera kilka podsystemów: kolory, kształty, typografię i ikony (symbolografię). Motyw Jetpack Compose Glimmer zawiera też komponenty Jetpack Compose Glimmer, które możesz dostosować.
Kolory
System kolorów Glimmer w Jetpack Compose obejmuje 7 kolorów w zoptymalizowanej palecie, które zapewniają maksymalną widoczność i zwięzłość na wyświetlaczach okularów AI, gdzie wartości czerni nie są renderowane.
GlimmerTheme.Pamiętaj, że kolory „On ...” nie są dostępne w GlimmerTheme. Te kolory są automatycznie obliczane przez system na podstawie koloru tła.
Te kolory są udostępniane za pomocą GlimmerTheme.colors.primary, a wartości dla każdej roli koloru są opisane w tej tabeli:
Rola koloru |
Domyślne |
|---|---|
główny |
#A8C7FA |
dodatkowy, |
#4C88E9 |
pozytywny |
#4CE995 |
minus |
#F57084 |
platforma |
#000000 |
konspekt |
#606460 |
outlineVariant |
#42434A |
Pamiętaj, że chociaż wartości surface, outline i outlineVariant są oznaczone jako konfigurowalne, zdecydowanie zalecamy, aby ich nie dostosowywać.
Kształty
System kształtów Glimmer w Jetpack Compose definiuje zestaw standardowych kształtów narożników i form geometrycznych komponentów, które mają tworzyć spójny i minimalistyczny język wizualny w interfejsach okularów AI. Wszystkie kształty są dostępne w GlimmerTheme.shapes.
Typografia
System typografii Jetpack Compose Glimmer obejmuje 6 stylów typograficznych, które zapewniają czytelność i zwięzłość na wyświetlaczach okularów AI. Te style zostały zaprojektowane tak, aby zmaksymalizować kontrast i poprawić czytelność tekstu dzięki pogrubionym znakom, większym odstępom między literami i odpowiednim wysokościom wierszy. Te style są udostępniane za pomocą elementu GlimmerTheme.typography.
Ikony
System ikon Glimmer w Jetpack Compose został zaprojektowany tak, aby spójnie integrować się z uproszczonym językiem wizualnym interfejsów okularów AI. Często wykorzystuje zaokrąglone kształty, takie jak Material Symbols Rounded, aby zapewnić optymalną czytelność.