Na tej stronie dowiesz się, jak dostosować styl tekstu
akapitu. Aby ustawić styl na poziomie akapitu, możesz skonfigurować takie parametry jak
textAlign
i lineHeight
lub zdefiniuj własne ParagraphStyle
.
Ustawianie wyrównania tekstu
Parametr textAlign
umożliwia ustawienie linii poziomej
wyrównanie
tekstu w obszarze kompozycyjnym Text
.
Domyślnie Text
wybiera naturalne wyrównanie tekstu na podstawie
wartość treści:
- Lewa krawędź kontenera
Text
dla alfabetów pisanych od lewej do prawej, takich jak łaciński, cyrylica lub hangul - Prawa krawędź kontenera
Text
dla alfabetów pisanych od prawej do lewej, takich jak arabski lub hebrajski
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
Jeśli chcesz ręcznie ustawić wyrównanie tekstu w funkcji kompozycyjnej Text
, wybierz preferowany sposób
używasz TextAlign.Start
i TextAlign.End
zamiast TextAlign.Left
i
TextAlign.Right
, ponieważ rozciągają się do prawej krawędzi Text
kompozycyjne zależnie od preferowanej orientacji tekstu. Przykład:
TextAlign.End
wyrównuje się do prawej strony w przypadku tekstu w języku francuskim i do lewej
dla tekstu arabskiego, ale TextAlign.Right
jest wyrównany do prawej strony w każdym przypadku
alfabetu.
Dodawanie wielu stylów w akapicie
Aby dodać wiele stylów w akapicie, możesz użyć opcji ParagraphStyle
w
AnnotatedString
, do których można dodawać dowolne style adnotacji.
Gdy fragment tekstu zostanie oznaczony symbolem ParagraphStyle
, zostanie on oznaczony
oddzielone od pozostałego tekstu, tak jakby miały na początku pliki z pozostałymi wierszami
na ich końcu.
Więcej informacji o dodawaniu wielu stylów do tekstu znajdziesz w artykule Dodawanie wielu stylów do tekstu
Plik AnnotatedString
zawiera bezpieczne
kreator
aby ułatwić tworzenie: buildAnnotatedString
. Ten fragment kodu używa
buildAnnotatedString
, aby ustawić ParagraphStyle
:
@Composable fun ParagraphStyle() { Text( buildAnnotatedString { withStyle(style = ParagraphStyle(lineHeight = 30.sp)) { withStyle(style = SpanStyle(color = Color.Blue)) { append("Hello\n") } withStyle( style = SpanStyle( fontWeight = FontWeight.Bold, color = Color.Red ) ) { append("World\n") } append("Compose") } } ) }
dostosować wysokość wiersza i dopełnienie;
includeFontPadding
to starsza wersja usługi, która dodaje dodatkowe dopełnienie oparte na
dane dotyczące czcionki znajdującej się u góry pierwszego i na dole ostatniego wiersza tekstu.
Od momentu utworzenia BOM w wersji 2024.01.01
ustawiona jest wartość includeFontPadding
na false
, co pozwala lepiej dostosować domyślny układ tekstu do
popularne narzędzia do projektowania.
Możliwość konfigurowania lineHeight
nie jest nowa – została już dostępna
od Androida Q. Możesz skonfigurować usługę lineHeight
dla domeny Text
za pomocą
lineHeight
, który rozdziela wysokość wiersza w każdym wierszu argumentu
tekstu. Następnie możesz użyć nowej wersji LineHeightStyle API
, aby dokładniej skonfigurować
wyrównanie tekstu w obrębie spacji i usunięcie odstępów.
Możesz dostosować lineHeight
, używając jednostki tekstowej „em” (czcionka względna
rozmiaru) zamiast „sp” (skalowanych pikseli), co zapewnia większą precyzję. Więcej informacji na temat:
wybierając odpowiednią jednostkę tekstową, zapoznaj się z sekcją TextUnit
.
Text( text = text, style = LocalTextStyle.current.merge( TextStyle( lineHeight = 2.5.em, platformStyle = PlatformTextStyle( includeFontPadding = false ), lineHeightStyle = LineHeightStyle( alignment = LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None ) ) ) )
Oprócz dostosowania elementu lineHeight
możesz teraz wyśrodkować tekst i określić jego styl
używając konfiguracji z eksperymentalnym interfejsem API LineHeightStyle
: LineHeightStyle.Alignment
i LineHeightStyle.Trim
(includeFontPadding
musi mieć wartość false
dla
i dotnij do pracy). Wyrównanie i przycinanie korzystają z pomiaru odstępu między wierszami
tekstu, aby odpowiednio rozmieścić go we wszystkich wierszach, w tym w jednym wierszu
i górnym wierszem bloku tekstu.
Parametr LineHeightStyle.Alignment
określa, jak wyrównać linię w pokoju.
korzystając z wysokości wiersza. W każdym wierszu możesz wyrównać tekst
do góry, na dole, do środka lub proporcjonalnie. LineHeightStyle.Trim
następnie umożliwi Ci
, aby opuścić lub usunąć dodatkową przestrzeń u góry pierwszego wiersza i na dole
ostatni wiersz tekstu wygenerowany na podstawie dowolnych elementów lineHeight
i wyrównania
korekty. Poniższe przykłady pokazują, jak tekst wielowierszowy wygląda w przypadku funkcji
różne konfiguracje LineHeightStyle.Trim
przy wyśrodkowaniu
(LineHeightStyle.Alignment.Center
).
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
Więcej informacji znajdziesz w poście na blogu Naprawianie dopełnienia czcionek w trakcie tworzenia tekstu.
możesz dowiedzieć się więcej o kontekście tej zmiany, o tym, jak usługa includeFontPadding
działała w widoku
oraz zmiany w funkcji Utwórz i LineHeightStyle
API.
Wstaw podziały wierszy
Interfejs API LineBreak
definiuje kryteria, według których tekst jest dzielony
wiele wierszy. Typ podziału wiersza możesz określić w
Blok TextStyle
elementu kompozycyjnego Text
. Gotowe typy podziału wiersza
należy uwzględnić następujące elementy:
Simple
– szybkie, proste łamanie linii. Zalecane w przypadku pól do wprowadzania tekstu.Heading
– łamanie wiersza z luźniejszymi regułami łamania. Zalecane w przypadku krótkich filmów tekst, np. tytuły.Paragraph
– wolniejsze łamanie wierszy o wyższej jakości dla lepszej czytelności. Zalecane w przypadku dużej ilości tekstu, np. akapitów.
Ten fragment kodu używa Simple
i Paragraph
do określenia
dzielenie wierszy na długi blok tekstu:
TextSample( samples = mapOf( "Simple" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Simple ) ) }, "Paragraph" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph ) ) } ) )
Zwróć uwagę, że w powyższych danych wyjściowych
złamanie wiersza Paragraph
powoduje
jest bardziej zrównoważony wizualnie niż podział wiersza Simple
.
Dostosowywanie podziałów wierszy
Za pomocą Strategy
możesz też utworzyć własną konfigurację LineBreak
. Strategy
może być dowolnym z tych elementów:
Balanced
– próbuje zrównoważyć długość wierszy tekstu. Stosowane są również automatyczne łączniki, jeśli jest włączone. Zalecane na małe ekrany, takie jak zegarki, aby zmaksymalizować ilość wyświetlanego tekstu.HighQuality
– optymalizuje akapit, aby zwiększyć czytelność tekstu, w tym: łącznik (jeśli jest włączony). (Powinien być ustawieniem domyślnym dla wszystkich typówBalanced
lubSimple
).Simple
– podstawowa, szybka strategia. Jeśli ta opcja jest włączona, łącznik jest używany tylko w przypadku domen, słowa, które same w sobie nie mieszczą się w jednym wierszu. Przydatne do edytowania tekstu w celu uniknięcia zmiany pozycji podczas pisania.
Ten fragment kodu pokazuje różnicę między akapitem z ustawieniami domyślnymi
i akapit zoptymalizowany pod kątem małych ekranów z funkcją podziału wierszy Balanced
strategia:
TextSample( samples = mapOf( "Balanced" to { val smallScreenAdaptedParagraph = LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced) Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = smallScreenAdaptedParagraph ) ) }, "Default" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default ) } ) )
Uwagi dotyczące CJK
Możesz również dostosować LineBreak
za pomocą funkcji Strictness
oraz
Interfejsy API WordBreak
zaprojektowane specjalnie pod kątem języków CJK.
Efekty działania tych interfejsów API nie zawsze są widoczne w językach innych niż CJK. Ogólnie
reguły podziału wierszy są definiowane na podstawie języka.
Strictness
opisuje stopień dokładności podziału wiersza w ten sposób:
właściwości:
Default
– domyślne reguły naruszające zasady dla danego języka. Może odpowiadać wartościNormal
lubStrict
.Loose
– najmniej restrykcyjne reguły. Odpowiedni dla krótkich linii.Normal
– najpopularniejsze reguły łamania wierszy.Strict
– najbardziej rygorystyczne reguły łamania wierszy.
WordBreak
określa sposób wstawiania podziałów wierszy w słowach ze znakiem
tych właściwości:
Default
– domyślne reguły naruszające zasady dla danego języka.Phrase
– podział wierszy opiera się na wyrażeniach.
W tym fragmencie kodu użyto rygorystyczności Strict
i podziału słowa na Phrase
ustawienia tekstu w języku japońskim:
val customTitleLineBreak = LineBreak( strategy = LineBreak.Strategy.HighQuality, strictness = LineBreak.Strictness.Strict, wordBreak = LineBreak.WordBreak.Phrase ) Text( text = "あなたに寄り添う最先端のテクノロジー。", modifier = Modifier.width(250.dp), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = customTitleLineBreak ) )
Dziel tekst między wierszami
Interfejs API Hyphens
umożliwia dodanie obsługi łączników do aplikacji.
Łącznik polega na wstawieniu znaku interpunkcyjnego przypominającego myślnik, aby wskazać, że
słowo jest podzielone na wiersze tekstu. Gdy ta opcja jest włączona, łącznik jest dodawany między
sylabariacie słowa w odpowiednich miejscach łącznika;
Dzielenie łączników jest domyślnie wyłączone. Aby włączyć łącznik, dodaj
Hyphens.Auto
jako parametr w bloku TextStyle
:
TextSample( samples = mapOf( "Hyphens - None" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.None ) ) }, "Hyphens - Auto" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.Auto ) ) } ) )
Gdy ta opcja jest włączona, łącznik pojawia się tylko wtedy, gdy:
- Słowo nie mieści się w wierszu. Jeśli używasz strategii podziału wiersza
Simple
, Dzielenie słowa następuje tylko wtedy, gdy wiersz jest krótszy od pojedynczego słowo. - Na urządzeniu jest ustawiony odpowiedni język, stosując łącznik można określić za pomocą słowników dostępnych w systemie.
Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Styl tekstu
- Podstawowe informacje o układzie tworzenia wiadomości
- Pomiary wewnętrzne w układach Compose