Styl akapitu

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)
    )
}
TextSnippets.kt

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")
            }
        }
    )
}
TextSnippets.kt

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
            )
        )
    )
)
TextSnippets.kt

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
                )
            )
        }
    )
)
TextSnippets.kt

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ów Balanced lub Simple).
• 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
            )
        }
    )
)
TextSnippets.kt

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ści Normal lub Strict.
• 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
    )
)
TextSnippets.kt

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
                )
            )
        }
    )
)
TextSnippets.kt

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

.