برای ساعت های دیجیتال، باید در صورت امکان از DigitalClock
استفاده کنید. برای تمام متنها یا ساعتهای دیگری که نمیتوان با DigitalClock
نمایش داد، PartText
محفظهای برای رندر مبتنی بر متن است.
بسته به اینکه می خواهید متن دایره ای یا معمولی را نشان دهید، PartText
باید شامل یک Text
یا یک عنصر TextCircular
باشد.
با فونت ها و فونت های بیت مپ کار کنید
استفاده از فونت های سفارشی به صفحه ساعت شما اجازه می دهد تا با سبک خاص خود متمایز شود.
دو راه برای استفاده از فونت های سفارشی وجود دارد، هر دو در ظروف TimeText
و PartText
.
یک
family
فونت سفارشی را در عنصرFont
مشخص کنید. طیف وسیعی از قالبهای رایج پشتیبانی میشوند که باید به صورتres/font
قرار گیرندبه عنوان مثال، با استفاده از فونت Pacifico از فونت های گوگل، و قرار دادن دارایی به عنوان 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>
متناوبا، یک
BitmapFont
تعریف کنید که تصاویر بیت مپ را در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>
جلوه های متنی
فرمت Watch Face چندین افکت متنی را ارائه می دهد که می توان آنها را اعمال کرد، مانند 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>