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)
    )
}

Słowa

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")
            }
        }
    )
}

Trzy akapity w 3 różnych stylach: niebieski, czerwony i pogrubiony oraz zwykły czarny

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.

Obraz przedstawiający wysokość elementu lineHeight jako pomiar na podstawie linii bezpośrednio nad i pod spodem.
Rysunek 1. Użyj opcji Wyrównanie i Przytnij, aby dostosować tekst w zestawie lineHeight i w razie potrzeby przyciąć dodatkową spację.

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

Obraz przedstawiający element LineHeightStyle.Przytnij.None Obraz pokazujący element LineHeightStyle.Przytnij.Both
LineHeightStyle.Trim.None LineHeightStyle.Trim.Both
Obraz przedstawiający element LineHeightStyle.Przytnij.FirstLineTop Obraz przedstawiający element LineHeightStyle.Przytnij.LastLinebottom
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
                )
            )
        }
    )
)

Blok tekstowy, który przedstawia prostą strategię przerywania wierszy oraz tekst
  ze strategią podziału na strony zoptymalizowaną pod kątem akapitów. Blok tekstowy z prostymi
strategia przerywania wierszy ma większą zmienność w długości wierszy.
Rysunek 1. Blok tekstowy z prostą strategią podziału wiersza (u góry) i blok tekstowy z rozbiciem wiersza zoptymalizowanym pod kątem akapitu (u dołu).

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
            )
        }
    )
)

Akapit ze zrównoważoną strategią przerywania wierszy oraz akapit
  nie mają określonej strategii. Akapit z przerywanym wierszem
  ma bardziej stabilną długość wierszy niż domyślna.
Rysunek 2. Akapit sformatowany zgodnie ze strategią podziału wierszy Balanced (u góry) w odróżnieniu od akapitu sformatowanego bez strategii podziału wiersza.

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
    )
)

Tekst japoński z ustawieniami Ścisłości i Podziału słów w porównaniu z tekstem domyślnym.
Rysunek 3. Tekst sformatowany z użyciem ustawień Strictness i WordBreak (u góry) a tekst sformatowany tylko z użyciem LineBreak.Heading (u dołu).

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
                )
            )
        }
    )
)

akapitu bez łączników, a także akapitu z włączonym dzieleniem.
  Gdy łącznik jest włączony, wyraz zostaje dzielony na 2 wiersze.
Rysunek 4. akapitu bez łącznika włączonego (u góry) a akapitu. z włączonym myśleniem (u dołu).

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.
. .