פסקת סגנון

bookmark_border קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

בדף הזה נסביר איך לעצב טקסט בפסקה. כדי להגדיר סגנון ברמת הפסקה, אפשר להגדיר פרמטרים כמו 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 יש כלי יצירה בטוח לסוגים שמקל על היצירה: 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 הוא מאפיין מדור קודם שמוסיף עוד רווח על סמך מדדי הגופן בחלק העליון של השורה הראשונה ובחלק התחתון של השורה האחרונה בטקסט. החל מגרסה 2024.01.01 של Compose BOM, הערך של 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 תפעל). התכונות 'יישור' ו'חיתוך' משתמשות במרחב שנמדד בין שורות הטקסט כדי לחלק אותו בצורה הולמת יותר בין כל השורות, כולל שורה אחת של טקסט והשורה העליונה של מקטע טקסט.

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

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

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

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

ממשק ה-API LineBreak מגדיר את הקריטריונים שבאמצעותם הטקסט מחולק לכמה שורות. אפשר לציין את סוג הפסקה שרוצים בשורה בבלוק TextStyle של ה-composable‏ 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 לחלוקת שורות:

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 לחלוקת שורות, מילה תוחצה רק אם השורה קצרה יותר מהמילה היחידה.
• השפה והאזור שמוגדרים במכשיר קובעים את ההפרדה המתאימה של המילים, על סמך מילונים שנמצאים במערכת.