تصف هذه الصفحة كيف يمكنك تصميم
نص للفقرة. لضبط نمط على مستوى الفقرة، يمكنك ضبط معلَمات مثل
textAlign
وlineHeight
أو تحديد ParagraphStyle
الخاص بك.
تعيين محاذاة النص
تتيح لك المعلَمة textAlign
ضبط المحاذاة الأفقية للنص داخل مساحة سطح قابلة للإنشاء Text
.
سيختار Text
تلقائيًا محاذاة النص الطبيعية استنادًا إلى قيمة المحتوى:
- الحافة اليسرى لحاوية
Text
بالأحرف الأبجدية من اليسار إلى اليمين، مثل اللاتينية أو السيريلية أو الهانغول - الحافة اليمنى لحاوية
Text
بالأحرف الأبجدية من اليمين إلى اليسار مثل العربية أو العبرية
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
إذا أردت ضبط محاذاة النص يدويًا في 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") } } ) }
ضبط ارتفاع السطر والمساحة المتروكة
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 ) ) ) )
بالإضافة إلى تعديل السمة lineHeight
، يمكنك الآن توسيط النص وتصميمه بشكل أكبر باستخدام الإعدادات باستخدام واجهة برمجة التطبيقات التجريبية LineHeightStyle
: LineHeightStyle.Alignment
وLineHeightStyle.Trim
(يجب ضبط includeFontPadding
على false
لكي تعمل ميزة "قطع الفيديو"). تستخدم المحاذاة والقطع المسافة التي تم قياسها بين سطور النص لتوزيعها بشكل أكثر ملاءمة على جميع الأسطر، بما في ذلك سطر واحد من النص والسطر العلوي من جزء من النص.
تحدّد LineHeightStyle.Alignment
كيفية محاذاة الخط في المساحة
التي يوفّرها ارتفاع السطر. داخل كل سطر، يمكنك محاذاة النص إلى الأعلى
أو الأسفل أو المنتصف أو بشكل متناسب. تتيح لك علامة LineHeightStyle.Trim
بعد ذلك ترك المسافة الإضافية أو إزالتها أعلى السطر الأول وأسفل السطر الأخير من النص، والتي تم إنشاؤها من أي من إعدادات lineHeight
والمحاذاة. توضّح النماذج التالية كيف يبدو النص متعدد الأسطر مع إعدادات LineHeightStyle.Trim
المختلفة عندما يتم توسيط المحاذاة (LineHeightStyle.Alignment.Center
).
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
يمكنك الاطّلاع على مشاركة المدونة إصلاح مساحة الخطوط في إنشاء النص لمعرفة المزيد من المعلومات حول سياق هذا التغيير وطريقة عمل includeFontPadding
في نظام العرض والتغييرات التي تم إجراؤها في Compose وواجهات برمجة التطبيقات LineHeightStyle
الجديدة.
إدراج فواصل أسطر
تحدّد واجهة برمجة التطبيقات 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 ) ) } ) )
في الناتج أعلاه، يُرجى ملاحظة أنّ سلوك فاصل الأسطر 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 ) } ) )
اعتبارات CJK
يمكنك أيضًا تخصيص "LineBreak
" باستخدام واجهتَي برمجة التطبيقات Strictness
وWordBreak
اللتين تم تصميمهما خصيصًا للغات CJK.
وقد لا تظهر في بعض الأحيان تأثيرات واجهات برمجة التطبيقات هذه في اللغات التي لا تستخدم لغة 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 ) )
واصلة النص مقسمة على الأسطر
تتيح لك واجهة برمجة التطبيقات 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 ) ) } ) )
عند تفعيل هذا الإعداد، لا تحدث الواصلة إلا في الحالات التالية:
- لا تتناسب الكلمة مع الخط. في حال كنت تستخدم استراتيجية تقسيم الأسطر
Simple
، لا يتم تطبيق واصلة الكلمة إلا إذا كان السطر أقصر من الكلمة المفردة. - ويتم ضبط اللغة المناسبة على جهازك، حيث يتم تحديد الواصلة المناسبة باستخدام القواميس المتوفّرة على النظام.
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
- تحديد نمط النص
- أساسيات إنشاء التنسيق
- القياسات الأساسية في تنسيقات Compose