العمل مع النصوص

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

بالنسبة إلى الساعات الرقمية، يجب استخدام DigitalClock كلما أمكن. بالنسبة إلى كل النصوص أو الساعات الأخرى التي لا يمكن تمثيلها باستخدام DigitalClock، PartText هي الحاوية لعرض النصوص.

استنادًا إلى ما إذا كنت تريد عرض نص دائري أو عادي، يجب أن يحتوي العنصر PartText على عنصر Text أو TextCircular.

العمل مع الخطوط والخطوط المخصّصة للصور النقطية

من خلال استخدام خطوط مخصّصة، يمكنك إبراز خلفية شاشة الساعة بأسلوبها الخاص.

هناك طريقتان لاستخدام الخطوط المخصّصة، وكلاهما داخل حاويات TimeText وPartText.

1. حدِّد خطًا مخصّصًا family في عنصر Font. تتوفّر مجموعة من التنسيقات الشائعة التي يجب وضعها في res/font.

   على سبيل المثال، باستخدام خط Pacifico من Google Fonts، ووضع المادة في res/font/pacifico.ttf:

   <PartText x="0" y="100" width="450" height="250">
     <Text align="CENTER">
       <Font family="pacifico" size="96">Hello!</Font>
     </Text>
   </PartText>
   

2. بدلاً من ذلك، يمكنك تحديد BitmapFont يقدّم صورًا بتنسيق bitmap في res/drawable:

   <WatchFace width="450" height="450" clipShape="CIRCLE">
   <BitmapFonts>
       <BitmapFont name="myhandwriting">
       <Character name="1" resource="digit1" width="50" height="100" />
       <Character name="2" resource="digit2" width="50" height="100" />
       <Character name="3" resource="digit3" width="50" height="100" />
       <Character name="4" resource="digit4" width="50" height="100" />
       <!-- ... -->
       <!-- Treat "12" specially, instead of a 1 followed by a 2-->
       <Word name="12" resource="digit12" width="80" height="100" />
       </BitmapFont>
   </BitmapFonts>
   <!-- ... -->
   

يُرجى ملاحظة كيفية معالجة تسلسلات الأحرف بشكل خاص. على سبيل المثال، إذا كان المطلوب تمثيل الرقم "12" من خلال رقمَي 1 و2 متصلَين، يمكن تحقيق ذلك باستخدام عنصر Word.

لاستخدام الخط المحدّد:

<TimeText ... format="hh:mm">
  <BitmapFont family="myhandwriting" size="48" color="#ff0000" />
</TimeText>

تأثيرات النص

يوفّر تنسيق خلفية شاشة الساعة العديد من تأثيرات النصوص التي يمكن تطبيقها، مثل OutGlow وShadow. لاستخدام هذه العناصر، طبِّقها كعناصر فرعية للعنصر Font:

<Font family="pacifico" size="96" color="#e2a0ff">
  <OutGlow color="#e8ffb7" radius="30">Hello!</OutGlow>
</Font>

العمل باستخدام النماذج

بدلاً من النص الثابت، قد تحتاج إلى إنشاء النص من مصادر بيانات أو تعبيرات.

يتيح لك عنصر Template إجراء ما يلي:

<PartText x="100" y="150" width="300" height="120" >
  <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
      <Template>Day: %s<Parameter expression="[DAY_OF_WEEK_S]" /></Template>
    </Font>
  </Text>
</PartText>

العمل مع المراجع

إذا تمّ تحديد النصّ الثابت في مورد بدلاً من ذلك، مثل res/values/strings.xml، يمكن الإشارة إليه على النحو التالي:

<PartText x="100" y="150" width="300" height="120" >
  <Text align="CENTER">
    <!-- greeting defined in res/values/strings.xml -->
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">greeting</Font>
  </Text>
</PartText>

يتيح لك ذلك أيضًا ترجمة خلفية شاشة الساعة باستخدام موصّفات موارد مختلفة.

تباعُد الأسماء المعرِّفة

قد تواجه بعض التحديات عند العمل على المسافات والنص:

<!-- greeting defined in res/values/strings.xml -->
<!-- Works correctly: -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">greeting</Font>

<!-- Does not render in the right place because of whitespace -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
    greeting
</Font>

ويرجع ذلك إلى أنّ المسافة مهمة في ملف XML. لتجنُّب حدوث ذلك، يجب تضمين محتويات Font في عنصر CDATA:

<!-- Works correctly -->
<Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
  <![CDATA[greeting]]>
</Font>

يمكن الاطّلاع على مثال آخر عند محاولة ضبط النص على وضع الاتّزان في الوسط:

<!-- Does not render as expected - leading spaces are a problem -->
<PartText x="100" y="150" width="250" height="120" >
  <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
       Hello
    </Font>
  </Text>
</PartText>

<!-- Works correctly -->
<PartText x="100" y="150" width="250" height="120" >
    <Text align="CENTER">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
        <![CDATA[Hello]]>
    </Font>
    </Text>
</PartText>

نص متعدّد الأسطر

لإنشاء نص متعدّد الأسطر، استخدِم السمة maxLines في Text:

<PartText x="75" y="100" width="300" height="350" >
  <Text align="CENTER" maxLines="2">
    <Font family="pacifico" size="60" weight="BOLD" color="#ffffff">
      <![CDATA[Hello Wear OS world]]>
    </Font>
  </Text>
</PartText>