Figma umożliwia projektantom stosowanie wielu odmian stylów tekstu w pojedynczym elemencie tekstowym. Na przykład słowo „Brązowy” w spakowanym komponencie Figma poniżej to pojedynczy element tekstowy, który zawiera różne style, w tym różne rozmiary tekstu w pojedynczym słowie.
![Różne style tekstu w pojedynczym elemencie tekstowym](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/multiple-styles-in-text/mixed-text-styles.png?authuser=7&hl=pl)
Usługa Relay obsługuje translację projektową na kod wielu stylów tekstu stosowanych do podłańcuchów w warstwie tekstu Figma. W wygenerowanym kodzie źródłowym elementy AnnotatedString
i SpanStyle
w komponencie Compose są używane do reprezentowania wielu stylów w warstwach tekstowych.
Obsługiwane style to:
- krój pisma
- rozmiar tekstu
- grubość czcionki
- kolor
- odstępy między literami
- kursywa
- przekreślenie
- podkreślenie
W wygenerowanym kodzie tworzenia wiadomości funkcja RelayText
przekazywania może akceptować String
lub AnnotatedString
. Usługa Relay generuje kod Kotlin, który korzysta z klas AnnotatedString.Builder
i SpanStyle
do renderowania wielu stylów w tekście. Na poniższym fragmencie kodu widać duże odstępy między literami stosowane do słowa „skoki”, po których następuje spacja bez stylu niestandardowego, po której następuje pogrubiona kursywa.
RelayText(
content = buildAnnotatedString {
append("The ")
...
withStyle(
style = SpanStyle(
letterSpacing = 8.64.sp,
)
) { // AnnotatedString.Builder
append("jumps")
}
append(" ")
withStyle(
style = SpanStyle(
fontFamily = inter,
fontSize = 32.0.sp,
fontWeight = FontWeight(700.0.toInt()),
fontStyle = FontStyle.Italic,
)
) { // AnnotatedString.Builder
append("over")
}
...
},
...
)
Ograniczenia
- Nieobsługiwane właściwości Figma
- Odstępy w akapicie
- Wcięcie akapitu
- Styl liczb
- Litery
- Stylizowane plany zdjęciowe
- Przekreślenie i podkreślenie
- Wysokość wiersza (działa nadal po zastosowaniu do całego elementu tekstowego)
- Wiele stylów zostanie pominiętych, jeśli zostaną przekazane do parametru tekstowego z jednym stylem
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Styl tekstu
- Włączanie interakcji użytkowników
- Dodawanie parametrów