در این مرحله از آموزش ما یک ویجت بزرگ TextArea را به برنامه اضافه خواهیم کرد. تمام متن با استفاده از یک ویجت TextArea نشان داده می شود ، و همچنین دو دکمه دیگر را برای تغییر متن ویجت TextArea اضافه خواهیم کرد.
اما قبل از اضافه کردن یک TextArea به برنامه ، تصویر دیگری را اضافه می کنیم به پس زمینه صفحه نمایش. تصاویری که در این پروژه استفاده می شود را می توانید از اینجا دانلود کنید.
یک فایل تصویری دیگر، Settingbackground.png وارد کنید. ویجت تصویر جدید را وارد کنید
نام آن را background_Img بنویسید. دو دکمه اضافه کنید و تصاویر آن ها را هم به صورت زیر تنظیم کنید. البته فایل تصویری آن ها را هم به برنامه اضافه کنید.
نحوه اضافه کردن تصاویر به برنامه و استفاده آن در ویجت دکمه
| Widget |
Properties |
| UP_button |
Released Image: Up_48_light.png
Pressed Image: Up_48_dark.png
Style: No Style |
| DOWN_button |
Released Image: Down_48_light.png
Pressed Image: Down _48_dark.png
Style: No Style |
اکنون ما آماده اضافه کردن یک ویجت TextArea هستیم. بر روی نماد Text Area در تب ویجت ها کلیک کنید. نام ویجت را به textCounter تغییر دهید.
ما می خواهیم ویجت عدد بزرگی را نشان دهد، بنابراین خاصیت AutoSize را بردارید و اندازه را روی عرض 350 و ارتفاع 200 قرار دهید. رنگ پیش فرض ویجت TextArea سیاه است، که در پس زمینه ما تیره است. خاصیت Color آن را انتخاب کنید و رنگ را به رنگ سفید تغییر دهید.
تغییر تایپوگرافی متن
ما می خواهیم متن بزرگتر باشد. روش انجام این کار، تغییر تایپوگرافی مورد استفاده برای متن است. یک تایپوگرافی فونت را تعریف می کند، به عنوان مثال Verdana، اندازه و تراز، چپ، راست یا مرکز برای متن.
تب Texts را در بالای TouchGFX Designer انتخاب کنید، روی typographies کلیک کنید و تایپوگرافی پیش فرض را به 150 تغییر دهید:
با بازگشت به صفحه (با کلیک روی برگه Canvas در بالا)، می بینیم که اکنون متن بسیار بزرگتر است. روی نماد متمرکز در زیر خاصیت Alignment کلیک کنید تا متن متمرکز شود.
wildcard text
ما می خواهیم که TextArea عددی را نشان دهد که بتوانیم با دکمه ها آن را تغییر دهیم. برای انجام این کار، باید متن را تغییر دهیم برای این کار از نشانگر در متن استفاده می کنیم و به ازای هر کدام یک wildcard هم اضافه می کنیم که در زمان اجرا می تواند با چیز دیگری جایگزین شود.
ما فقط می خواهیم یک عدد را نشان دهیم، بنابراین متن را فقط به تغییر خواهیم داد.
در پروژه های دیگر می توانید قسمت های پویا را با یک متن ثابت ترکیب کنید، به عنوان مثال دما:
temp: <d>°C
برای تست برنامه، روی Run Simulator کلیک کنید.
در این مرحله ما یاد گرفتیم که چگونه ویجت های TextArea را در رابط کاربری خود وارد کنید و نحوه تغییر اندازه تایپوگرافی. در آموزش بعدی به نحوه تغییر متن به وسیله کدنویسی خواهیم پرداخت.
موفق باشید.