פסקת סגנון

בדף הזה מוסבר איך אפשר להגדיר סגנון לטקסט בפסקה. כדי להגדיר עיצוב ברמת הפסקה, אפשר להגדיר פרמטרים כמו textAlign ו-lineHeight או להגדיר ParagraphStyle משלכם.

הגדרת יישור הטקסט

הפרמטר textAlign מאפשר להגדיר את היישור האופקי של הטקסט בתוך אזור משטח שאפשר להרכיב ממנו תצוגה Text.

כברירת מחדל, Text יבחר את יישור הטקסט הטבעי בהתאם לערך התוכן שלו:

• הקצה השמאלי של מאגר Text לאלפבית שנקרא משמאל לימין, כמו לטינית, קירילית או האנגול
• הקצה הימני של מאגר Text לאלפבית שנכתב מימין לשמאל, כמו ערבית או עברית

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

אם רוצים להגדיר ידנית את יישור הטקסט של רכיב Text שאפשר להוסיף, עדיף להשתמש ב-TextAlign.Start וב-TextAlign.End במקום ב-TextAlign.Left וב-TextAlign.Right בהתאמה, כי הם מיושרים לקצה הימני של רכיב Text שאפשר להוסיף בהתאם לכיוון הטקסט בשפה המועדפת. לדוגמה, TextAlign.End מיושר לצד שמאל בטקסט בערבית ולצד ימין בטקסט בצרפתית, אבל TextAlign.Right מיושר לצד ימין לא משנה באיזו שפה משתמשים.

הוספת כמה סגנונות בפסקה

כדי להוסיף כמה סגנונות לפסקה, אפשר להשתמש ב-ParagraphStyle ב-AnnotatedString, שאפשר להוסיף לו הערות עם סגנונות של הערות שרירותיות. אחרי שחלק מהטקסט מסומן ב-ParagraphStyle, החלק הזה מופרד משאר הטקסט כאילו היו בו מעברי שורה בהתחלה ובסוף.

מידע נוסף על הוספת כמה סגנונות לטקסט זמין במאמר הוספת כמה סגנונות לטקסט.

‫AnnotatedString יש לו builder בטוח לטיפוסים כדי להקל על יצירת: buildAnnotatedString. בקטע הקוד הבא נעשה שימוש ב-buildAnnotatedString כדי להגדיר את 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

שינוי גובה השורה והמרווח הפנימי

‫includeFontPadding הוא מאפיין מדור קודם שמוסיף ריווח פנימי נוסף על סמך מדדי גופן בחלק העליון של השורה הראשונה ובחלק התחתון של השורה האחרונה של טקסט. החל מגרסת Compose BOM‏ 2024.01.01, הערך של includeFontPadding מוגדר כ-false כברירת מחדל, כך שפריסת הטקסט תהיה דומה יותר לזו של כלי עיצוב נפוצים.

האפשרות להגדיר את lineHeight לא חדשה – היא זמינה מאז Android Q. אפשר להגדיר את lineHeight עבור Text באמצעות הפרמטר lineHeight, שמחלק את גובה השורה בכל שורה של טקסט. אחר כך תוכלו להשתמש ב-LineHeightStyle API החדש כדי להגדיר עוד את אופן היישור של הטקסט במרחב ולהסיר רווחים לבנים.

כדי לשפר את הדיוק, מומלץ לשנות את lineHeight באמצעות יחידת הטקסט em (גודל גופן יחסי) במקום sp (פיקסלים מותאמים). מידע נוסף על בחירת יחידת טקסט מתאימה זמין במאמר 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

בנוסף לשינוי הגודל של lineHeight, עכשיו אפשר למרכז ולעצב את הטקסט באמצעות הגדרות עם LineHeightStyle API: LineHeightStyle.Alignment ו-LineHeightStyle.Trim (צריך להגדיר את includeFontPadding ל-false כדי שהפונקציה Trim תפעל). הפונקציות Alignment ו-Trim משתמשות ברווח שנמדד בין שורות הטקסט כדי לחלק אותו בצורה מתאימה יותר לכל השורות – כולל שורת טקסט יחידה והשורה העליונה של בלוק טקסט.

‫LineHeightStyle.Alignment מגדיר את אופן יישור השורה במרחב שמוגדר על ידי גובה השורה. בכל שורה, אפשר ליישר את הטקסט לחלק העליון, התחתון או המרכזי, או באופן יחסי. ‫LineHeightStyle.Trim מאפשר לכם להסיר את הרווח הנוסף או להשאיר אותו בחלק העליון של השורה הראשונה ובחלק התחתון של השורה האחרונה של הטקסט שנוצר מכל lineHeight והתאמות של Alignment. בדוגמאות הבאות אפשר לראות איך נראה טקסט רב-שורה עם הגדרות שונות של LineHeightStyle.Trim כשהיישור הוא למרכז (LineHeightStyle.Alignment.Center).

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

בפוסט בבלוג תיקון ריווח הגופן בטקסט ב-Compose אפשר לקרוא מידע נוסף על ההקשר של השינוי הזה, על האופן שבו includeFontPadding פעל במערכת View, על השינויים שבוצעו ב-Compose ועל ממשקי ה-API החדשים של LineHeightStyle.

הוספת מעברי שורה

ממשק ה-API‏ LineBreak מגדיר את הקריטריונים שלפיהם הטקסט מפולג לכמה שורות. אפשר לציין את סוג מעברי השורה שרוצים להגדיר בבלוק TextStyle של רכיב ה-Text. סוגי מעברי השורה המוגדרים מראש כוללים את האפשרויות הבאות:

• Simple — מעבר שורה מהיר ובסיסי. מומלץ לשדות קלט של טקסט.
• ‫Heading — מעבר שורה עם כללים פחות מחמירים. מומלץ לטקסט קצר, כמו כותרות.
• ‫Paragraph — פיצול שורות איטי יותר ואיכותי יותר, לשיפור הקריאות. מומלץ להשתמש באפשרות הזו אם רוצים להדפיס כמויות גדולות של טקסט, כמו פסקאות.

בקטע הקוד הבא נעשה שימוש ב-Simple וב-Paragraph כדי לציין את אופן מעבר השורה בבלוק טקסט ארוך:

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

בפלט שלמעלה, אפשר לראות שהתנהגות מעבר השורה של Paragraph יוצרת תוצאה מאוזנת יותר מבחינה ויזואלית בהשוואה למעבר השורה של Simple.

התאמה אישית של מעברי שורה

אפשר גם ליצור הגדרה משלכם של LineBreak באמצעות הפרמטר Strategy. הערך Strategy יכול להיות כל אחת מהאפשרויות הבאות:

• ‫Balanced — ניסיונות לאזן את אורך השורות של הטקסט, וגם החלת מקפים אוטומטית אם האפשרות הזו מופעלת. מומלץ למסכים קטנים, כמו שעונים, כדי להציג כמה שיותר טקסט.
• ‫HighQuality — מבצע אופטימיזציה לפסקה כדי שהטקסט יהיה קריא יותר, כולל מקפים אם האפשרות הזו מופעלת. (צריך להיות ערך ברירת המחדל לכל מה שלא Balanced או Simple).
• ‫Simple – שיטה בסיסית ומהירה. אם האפשרות הזו מופעלת, המקפים מתווספים רק למילים שלא נכנסות לשורה שלמה. שימושי לעריכת טקסט כדי למנוע שינוי מיקום בזמן ההקלדה.

קטע הקוד הבא מראה את ההבדל בין פסקה עם הגדרות ברירת מחדל לבין פסקה שעברה אופטימיזציה למסכים קטנים עם האסטרטגיה Balanced line-breaking:

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

שיקולים לגבי שפות CJK

אפשר גם להתאים אישית את LineBreak באמצעות ממשקי ה-API‏ Strictness ו-WordBreak, שנועדו במיוחד לשפות CJK. יכול להיות שלא תמיד תראו את ההשפעות של ממשקי ה-API האלה בשפות שאינן CJK. באופן כללי, כללי מעבר השורה מוגדרים על סמך הלוקאל.

המאפיינים הבאים מתארים את רמת ההקפדה על מעברי שורה:Strictness

• ‫Default – כללי מעבר שורות שמוגדרים כברירת מחדל עבור הלוקאל. יכול להיות שיהיה תואם לערך Normal או לערך Strict.
• ‫Loose – הכללים הכי פחות מגבילים. מתאים לשורות קצרות.
• ‫Normal — הכללים הנפוצים ביותר לשבירת שורות.
• ‫Strict — הכללים המחמירים ביותר לשבירת שורות.

WordBreak מגדיר איך להוסיף מעברי שורה בתוך מילים באמצעות המאפיינים הבאים:

• ‫Default – כללי ברירת המחדל להפרדה לפי מיקום.
• ‫Phrase – מעברי השורה מבוססים על ביטויים.

בקטע הקוד הבא נעשה שימוש בהגדרה של Strict רמת דיוק ושל Phrase פיצול מילים לטקסט ביפנית:

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

הוספת מקף לטקסט שמפוצל בין שורות

ממשק ה-API‏ Hyphens מאפשר להוסיף תמיכה במיקוף לאפליקציה. מיקוף הוא הוספה של סימן פיסוק דמוי מקף כדי לציין שמילה מחולקת בין שורות טקסט. כשההגדרה הזו מופעלת, מתווסף מקף בין ההברות של מילה בנקודות המתאימות לפיסוק.

כברירת מחדל, ההגדרה 'מקפים חוצצים' לא מופעלת. כדי להפעיל מקפים, מוסיפים את Hyphens.Auto כפרמטר בבלוק 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

כשמפעילים את האפשרות הזו, המקפים מופיעים רק בתנאים הבאים:

• מילה לא נכנסת בשורה. אם משתמשים באסטרטגיה של Simple מעבר שורה, המילה תופרד באמצעות מקף רק אם השורה קצרה יותר מהמילה.
• הלוקאל המתאים מוגדר במכשיר, כי המקפים המתאימים נקבעים באמצעות מילונים שקיימים במערכת.