Kotlin Android Fundamentals 10.3: طراحی برای همه

این کد لبه بخشی از دوره آموزشی Android Kotlin Fundamentals است. اگر به ترتیب روی کدها کار کنید، بیشترین ارزش را از این دوره خواهید گرفت. همه کد لبه های دوره در صفحه فرود کد لبه های Android Kotlin Fundamentals فهرست شده اند.

این کد لبه بخشی از مجموعه‌ای است که اصول طراحی برنامه اندروید را به شما آموزش می‌دهد و شما را در ساخت برنامه‌ای راهنمایی می‌کند که جلسات گروه توسعه‌دهنده Google (GDG) را پیدا می‌کند. این برنامه اطلاعات مربوط به ملاقات های آینده را به روشی زیبا و در دسترس نمایش می دهد.

توصیه می‌کنیم سه کد این مجموعه را به ترتیب انجام دهید، زیرا آنها به صورت گام به گام در کارها پیشرفت می‌کنند:

• 10.1 سبک ها و تم ها
• 10.2 طراحی مواد، ابعاد و رنگ ها
• 10.3 طراحی برای همه

مقدمه

قابل استفاده کردن یک برنامه توسط اکثر کاربران منطقی است، چه برای لذت از آن توسعه دهید، چه برای اهداف تجاری. برای تحقق آن ابعاد متعددی وجود دارد.

• پشتیبانی از زبان های RTL اروپایی و بسیاری از زبان‌های دیگر از چپ به راست خوانده می‌شوند و برنامه‌هایی که از آن زبان‌ها نشأت می‌گیرند معمولاً طوری طراحی می‌شوند که برای آن زبان‌ها مناسب باشند. بسیاری از زبان های دیگر با تعداد زیاد گویشوران از راست به چپ می خوانند، مانند عربی. برنامه خود را با زبان های راست به چپ (RTL) کار کنید تا مخاطبان بالقوه خود را افزایش دهید.
• برای دسترسی اسکن کنید. حدس زدن اینکه چگونه شخص دیگری ممکن است برنامه شما را تجربه کند، گزینه ای با مشکلات است. برنامه Accessibility Scanner کار حدس زدن را از حلقه خارج می کند و برنامه شما را تجزیه و تحلیل می کند و تشخیص می دهد که کجا می توانید دسترسی آن را بهبود بخشید.
• طراحی برای TalkBack با توضیحات محتوا. اختلالات بینایی بیشتر از آن چیزی است که تصور می شود، و بسیاری از کاربران، نه فقط نابینایان، از صفحه خوان استفاده می کنند. توضیحات محتوا عباراتی هستند که یک صفحه‌خوان می‌تواند هنگام تعامل کاربر با عنصری از صفحه نمایش بگوید.
• پشتیبانی از حالت شب برای بسیاری از کاربران کم بینا، تغییر رنگ های صفحه نمایش کنتراست را بهبود می بخشد و به آنها کمک می کند تا از نظر بصری با برنامه شما کار کنند. اندروید پشتیبانی از حالت شب را ساده می کند و همیشه باید از حالت شب پشتیبانی کنید تا جایگزینی ساده برای رنگ های پیش فرض صفحه نمایش به کاربران بدهید.

در این کد لبه، شما هر یک از این گزینه ها را بررسی می کنید و پشتیبانی از آن را به برنامه GDG Finder اضافه می کنید.

شما همچنین یاد می گیرید که چگونه از تراشه ها با برنامه اندروید خود استفاده کنید. می‌توانید از تراشه‌ها برای جذاب‌تر کردن برنامه‌تان و در عین حال در دسترس نگه داشتن آن استفاده کنید.

آنچه از قبل باید بدانید

باید با:

• نحوه ایجاد برنامه‌هایی که دارای فعالیت‌ها و قطعات هستند و بین قطعاتی که داده‌ها را ارسال می‌کنند پیمایش کنید.
• استفاده از نماها و گروه های مشاهده برای چیدمان یک رابط کاربری، به ویژه RecyclerView.
• نحوه استفاده از اجزای معماری، از جمله ViewModel ، با معماری توصیه شده برای ایجاد یک برنامه با ساختار و کارآمد.
• اتصال داده ها، برنامه های مشترک، و نحوه مدیریت کلیک های ماوس.
• نحوه اتصال به اینترنت و ذخیره اطلاعات به صورت محلی با استفاده از پایگاه داده اتاق.
• نحوه تنظیم مشخصات view و نحوه استخراج منابع و استفاده از منابع از فایل های منبع XML.
• چگونه از سبک ها و تم ها برای سفارشی کردن ظاهر برنامه خود استفاده کنید.
• نحوه استفاده از اجزای متریال، منابع ابعاد و رنگ آمیزی سفارشی.

چیزی که یاد خواهید گرفت

• چگونه اپلیکیشن خود را برای بیشترین تعداد کاربر قابل استفاده کنیم.
• چگونه برنامه خود را برای زبان های راست به چپ (RTL) کار کنید.
• چگونه دسترسی برنامه خود را ارزیابی کنیم
• نحوه استفاده از توضیحات محتوا برای اینکه برنامه شما با صفحه‌خوان‌ها بهتر کار کند.
• نحوه استفاده از چیپس
• چگونه برنامه خود را با حالت تاریک کار کنید.

کاری که خواهی کرد

• یک برنامه داده شده را ارزیابی و گسترش دهید تا با کارآمد کردن آن برای زبان های RTL، دسترسی را بهبود بخشد.
• برنامه‌تان را اسکن کنید تا مشخص کنید در کجا می‌توان دسترسی را بهبود بخشید.
• از توضیحات محتوا برای تصاویر استفاده کنید.
• نحوه استفاده از قرص ها را بیاموزید.
• قابلیت استفاده از حالت شب را به برنامه خود اضافه کنید.

برنامه شروع GDG-finder بر اساس همه چیزهایی است که تاکنون در این دوره یاد گرفته اید.

این برنامه از ConstraintLayout برای چیدمان سه صفحه استفاده می کند. دو تا از صفحه‌ها فقط فایل‌های طرح‌بندی هستند که از آن‌ها برای کاوش رنگ‌ها و متن در اندروید استفاده می‌کنید.

صفحه سوم یک یاب GDG است. GDGها یا Google Developer Groups، جوامعی از توسعه‌دهندگان هستند که بر فناوری‌های Google از جمله Android تمرکز می‌کنند. GDG ها در سراسر جهان میزبان جلسات، کنفرانس ها، برنامه های آموزشی و رویدادهای دیگر هستند.

همانطور که این برنامه را توسعه می دهید، روی لیست واقعی GDG کار می کنید. صفحه یاب از مکان دستگاه برای مرتب کردن GDG ها بر اساس فاصله استفاده می کند.

اگر خوش شانس هستید و GDG در منطقه شما وجود دارد، می توانید وب سایت را بررسی کنید و برای رویدادهای آنها ثبت نام کنید! رویدادهای GDG راهی عالی برای ملاقات با سایر توسعه دهندگان اندروید و یادگیری بهترین شیوه های صنعت است که در این دوره نمی گنجد.

اسکرین شات های زیر نشان می دهد که چگونه برنامه شما از ابتدا تا انتهای این کد لبه تغییر می کند.

تفاوت اصلی بین زبان های چپ به راست (LTR) و زبان های راست به چپ (RTL) جهت محتوای نمایش داده شده است. هنگامی که جهت UI از LTR به RTL (یا برعکس) تغییر می کند، اغلب به آن Mirroring می گویند. انعکاس روی بیشتر صفحه، از جمله متن، نمادهای فیلد نوشتاری، طرح‌بندی‌ها و نمادهای دارای جهت (مانند فلش) تأثیر می‌گذارد. موارد دیگر مانند اعداد (ساعت، شماره تلفن)، نمادهایی که جهت ندارند (حالت هواپیما، وای فای)، کنترل‌های پخش، و اکثر نمودارها و نمودارها منعکس نمی‌شوند.

زبان هایی که از جهت متن RTL استفاده می کنند توسط بیش از یک میلیارد نفر در سراسر جهان استفاده می شود. توسعه دهندگان اندروید در سرتاسر جهان هستند و بنابراین یک برنامه GDG Finder باید از زبان های RTL پشتیبانی کند.

مرحله 1: پشتیبانی RTL را اضافه کنید

در این مرحله برنامه GDG Finder را با زبان های RTL کار می کنید.

1. برنامه GDGFinderMaterial را دانلود و اجرا کنید، که برنامه آغازین این کد لبه است یا از کد نهایی کد لبه قبلی ادامه دهید.
2. مانیفست اندروید را باز کنید.
3. در بخش <application> کد زیر را اضافه کنید تا مشخص کنید که برنامه از RTL پشتیبانی می کند.

<application
        ...
        android:supportsRtl="true">

4. فعالیت_main.xml را در تب Design باز کنید.
5. از منوی کشویی Locale for Preview ، پیش نمایش از راست به چپ را انتخاب کنید. (اگر این منو را پیدا نکردید، پنجره را باز کنید یا قسمت Attributes را ببندید تا آن را باز کنید.)

نکته: برای بررسی نحوه نمایش بصری برنامه در RTL، نیازی به تغییر زبان در دستگاه خود ندارید.

6. در پیش نمایش ، توجه کنید که هدر "GDG Finder" به سمت راست حرکت کرده است و بقیه قسمت های صفحه تقریباً به همان شکل باقی می مانند. در کل این صفحه نمایش قابل عبور است. اما تراز در نمای متن اکنون اشتباه است، زیرا به جای سمت راست، به سمت چپ تراز شده است.

7. برای اینکه این کار روی دستگاهتان کار کند، در تنظیمات دستگاه یا شبیه‌ساز، در گزینه‌های برنامه‌نویس ، Force RTL layout را انتخاب کنید. (اگر نیاز دارید که Developer Options را روشن کنید، شماره ساخت را پیدا کرده و روی آن کلیک کنید تا زمانی که نان تستی دریافت کنید که نشان می دهد شما یک برنامه نویس هستید. این میزان بسته به دستگاه و نسخه سیستم Android متفاوت است.)

8. برنامه را اجرا کنید و در دستگاه بررسی کنید که صفحه اصلی مانند پیش نمایش ظاهر شود. توجه کنید که FAB اکنون به سمت چپ و منوی همبرگر به سمت راست تغییر کرده است!
9. در برنامه، کشوی پیمایش را باز کنید و به صفحه جستجو بروید. همانطور که در زیر نشان داده شده است، نمادها همچنان در سمت چپ هستند و هیچ متنی قابل مشاهده نیست. به نظر می رسد که متن خارج از صفحه نمایش است، در سمت چپ نماد. این به این دلیل است که کد از ارجاعات صفحه چپ/راست در ویژگی های view و محدودیت های طرح استفاده می کند.

مرحله 2: از شروع و پایان به جای چپ و راست استفاده کنید

"چپ" و "راست" روی صفحه (هنگامی که با صفحه روبرو می شوید) تغییر نمی کند، حتی اگر جهت متن تغییر کند. به عنوان مثال، layout_constraintLeft_toLeftOf همیشه سمت چپ عنصر را به سمت چپ صفحه محدود می کند. در مورد برنامه شما، همانطور که در تصویر بالا نشان داده شده است، متن در زبان‌های RTL خارج از صفحه است.

برای رفع این مشکل، به جای «چپ» و «راست»، از اصطلاحات Start و End استفاده کنید. این اصطلاح شروع متن و انتهای متن را به طور مناسب برای جهت متن در زبان فعلی تنظیم می کند، به طوری که حاشیه ها و طرح بندی ها در مناطق صحیح صفحه نمایش قرار می گیرند.

1. list_item.xml را Open .
2. هر ارجاع به Left و Right را با ارجاع به Start و End جایگزین کنید.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

3. layout_marginLeft ImageView را با layout_marginStart جایگزین کنید. با این کار، حاشیه را به محل صحیح انتقال می‌دهید تا نماد را از لبه صفحه دور کنید.

<ImageView
android:layout_marginStart="
?

4. fragment_gdg_list.xml را باز کنید. لیست GDG ها را در قسمت Preview بررسی کنید. توجه داشته باشید که نماد همچنان در جهت اشتباه نشان می دهد زیرا آینه ای است (اگر نماد آینه نشده است، مطمئن شوید که همچنان در حال مشاهده پیش نمایش راست به چپ هستید). طبق دستورالعمل طراحی متریال، نمادها نباید آینه شوند.
5. Res/drawable/ic_gdg.xml را باز کنید.
6. در خط اول کد XML، android:autoMirrored="true" پیدا و حذف کنید تا mirroring غیرفعال شود.
7. پیش نمایش را بررسی کنید یا برنامه را دوباره اجرا کنید و صفحه جستجوی GDG را باز کنید. طرح باید الان درست بشه!

نکته: Android Studio نکات برجسته زرد را برای تشویق به استفاده از ویژگی های شروع و پایان به شما می دهد.

از جستجو و جایگزینی با تطبیق حروف بزرگ برای یافتن تمام رخدادهای Left و Right در طرح‌بندی‌های XML خود استفاده کنید.

مرحله 3: اجازه دهید Android Studio کار را برای شما انجام دهد

در تمرین قبلی، اولین گام های خود را برای پشتیبانی از زبان های RTL برداشتید. خوشبختانه اندروید استودیو می تواند برنامه شما را اسکن کند و اصول اولیه زیادی را برای شما تنظیم کند.

1. در list_item.xml ، در TextView ، layout_marginStart به layout_marginLeft تغییر دهید تا اسکنر چیزی برای پیدا کردن داشته باشد.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

2. در Android Studio، Refactor > Add RTL support را در صورت امکان انتخاب کنید و کادرهای مربوط به به‌روزرسانی مانیفست و فایل‌های طرح‌بندی را برای استفاده از ویژگی‌های شروع و پایان علامت بزنید.

3. در قسمت Refactoring Preview ، پوشه برنامه را پیدا کنید و آن را باز کنید تا تمام جزئیات باز شود.
4. در زیر پوشه برنامه، توجه کنید که layout_marginLeft که به تازگی آن را تغییر دادید به عنوان کد برای refactor فهرست شده است.

5. توجه داشته باشید که پیش نمایش فایل های سیستم و کتابخانه را نیز فهرست می کند. روی layout و l ayout-watch-v20 و هر پوشه دیگری که بخشی از برنامه نیستند کلیک راست کرده و Exclude را از منوی زمینه انتخاب کنید.

6. برو و همین الان Refactor را انجام بده. (اگر یک پنجره بازشو درباره فایل‌های سیستم دریافت کردید، مطمئن شوید که همه پوشه‌هایی که بخشی از کد برنامه شما نیستند را حذف کرده‌اید.)

7. توجه داشته باشید که layout_marginLeft دوباره به layout_marginStart تغییر کرده است.

توجه: برخی از کامپوننت‌های View نیاز به سفارشی‌سازی بیشتری دارند تا با RTL به درستی رفتار کنند. برای اینکه کنترل دقیق تری بر رابط کاربری داشته باشید، 4 API مختلف وجود دارد که می توانید از آنها استفاده کنید:

• android:layoutDirection برای تنظیم جهت طرح بندی یک جزء.
• android:textDirection برای تنظیم جهت متن یک جزء.
• android:textAlignment برای تنظیم تراز متن یک جزء.
• getLayoutDirectionFromLocale() متدی است برای دریافت محلی که جهت را مشخص می کند.

مرحله 3: پوشه ها را برای مناطق کاوش کنید

تاکنون، فقط جهت زبان پیش‌فرض مورد استفاده برای برنامه را تغییر داده‌اید. برای یک برنامه تولید، فایل strings.xml را برای یک مترجم ارسال می کنید تا آن را به یک زبان جدید ترجمه کند. برای این نرم افزار کد، برنامه یک فایل strings.xml به زبان اسپانیایی ارائه می کند (ما از Google Translate برای تولید ترجمه ها استفاده کردیم، بنابراین آنها کامل نیستند.).

1. در Android Studio، نمای پروژه را به Project Files تغییر دهید.
2. پوشه res را باز کنید و به پوشه‌های res/values و res/values-es توجه کنید. "es" در نام پوشه، کد زبان اسپانیایی است. پوشه های values-"language code" حاوی مقادیری برای هر زبان پشتیبانی شده هستند. پوشه مقادیر بدون پسوند حاوی منابع پیش‌فرض است که در غیر این صورت اعمال می‌شوند.

3. در مقادیر-es ، strings.xml را باز کنید و توجه کنید که تمام رشته ها به زبان اسپانیایی هستند.
4. در Android Studio، activity_main.xml در تب Design باز کنید.
5. در منوی کشویی Locale for Preview اسپانیایی را انتخاب کنید. اکنون متن شما باید به زبان اسپانیایی باشد.

6. [اختیاری] اگر به یک زبان RTL مسلط هستید، یک پوشه مقادیر و یک strings.xml در آن زبان ایجاد کنید و نحوه نمایش آن را در دستگاه خود آزمایش کنید.
7. [اختیاری] تنظیمات زبان را در دستگاه خود تغییر دهید و برنامه را اجرا کنید. مطمئن شوید که دستگاه خود را به زبانی که نمی خوانید تغییر ندهید، زیرا بازگرداندن آن کمی چالش برانگیز است!

در کار قبلی، برنامه خود را به صورت دستی تغییر دادید و سپس از Android Studio برای بررسی بهبودهای اضافی RTL استفاده کردید.

برنامه Accessibility Scanner بهترین متحد شما در هنگام دسترسی به برنامه شماست. برنامه شما را در دستگاه مورد نظر شما اسکن می کند و پیشرفت هایی مانند بزرگتر کردن اهداف لمسی، افزایش کنتراست و ارائه توضیحاتی برای تصاویر برای دسترسی بیشتر به برنامه شما پیشنهاد می کند. Accessibility Scanner توسط گوگل ساخته شده است و می توانید آن را از فروشگاه Play نصب کنید.

مرحله 1: Accessibility Scanner را نصب و اجرا کنید

1. Play Store را باز کنید و در صورت لزوم وارد شوید. می توانید این کار را روی دستگاه فیزیکی یا شبیه ساز خود انجام دهید. این کد لبه از شبیه ساز استفاده می کند.
   

توجه: اگر Play Store را در شبیه ساز خود ندارید، ممکن است لازم باشد یک شبیه ساز جدید ایجاد کنید. اطمینان حاصل کنید که هنگام ایجاد شبیه ساز، گزینه ای را انتخاب کنید که نماد «فروشگاه Play» فعال باشد.

مهم: برای استفاده از فروشگاه Play از شبیه ساز، باید با یک حساب وارد شوید. می توانید از حساب معمولی خود استفاده کنید یا می توانید یک حساب کاربری فقط برای آزمایش با شبیه ساز ایجاد کنید. هر حسابی که ایجاد می‌کنید واقعی است و به خدمات واقعی Play متصل می‌شوید، نه نسخه شبیه‌سازی‌شده آن!

مهم: می‌توانید از تنظیم گزینه‌های صورت‌حساب صرفنظر کنید !

2. در فروشگاه Play، Accessibility Scanner by Google LLC را جستجو کنید. مطمئن شوید که برنامه صحیح صادر شده توسط Google را دریافت می کنید، زیرا هر اسکن به مجوزهای زیادی نیاز دارد!

3. اسکنر را روی شبیه ساز نصب کنید.
4. پس از نصب، روی Open کلیک کنید.
5. روی Get Started کلیک کنید.
6. برای شروع راه‌اندازی اسکنر دسترس‌پذیری در تنظیمات، روی تأیید کلیک کنید.

7. برای رفتن به تنظیمات دسترس‌پذیری دستگاه، روی اسکنر دسترسی کلیک کنید.

8. برای فعال کردن آن روی Use service کلیک کنید.

9. دستورالعمل های روی صفحه را دنبال کنید و همه مجوزها را اعطا کنید.
10. سپس روی OK Got it کلیک کنید و به صفحه اصلی بازگردید. ممکن است یک دکمه آبی با علامت تیک در جایی روی صفحه مشاهده کنید. با کلیک بر روی این دکمه، آزمایش برنامه در پیش زمینه آغاز می شود. با کشیدن دکمه می توانید آن را تغییر دهید. این دکمه در بالای هر برنامه‌ای قرار می‌گیرد، بنابراین می‌توانید در هر زمان آزمایش را آغاز کنید.

برای خاموش کردن اسکنر، به تنظیمات بروید و اسکنر دسترسی را خاموش کنید.

11. برنامه خود را باز یا اجرا کنید.
12. روی دکمه آبی کلیک کنید و هشدارها و مجوزهای امنیتی اضافی را بپذیرید.

اولین باری که روی نماد Accessibility Scanner کلیک می‌کنید، برنامه اجازه می‌خواهد همه چیز را روی صفحه نمایش شما نشان دهد. این یک مجوز بسیار ترسناک به نظر می رسد و همینطور است.

تقریباً هرگز نباید چنین مجوزی بدهید، زیرا این مجوز به برنامه‌ها اجازه می‌دهد ایمیل شما را بخوانند یا حتی اطلاعات حساب بانکی شما را بگیرند! با این حال، برای اینکه اسکنر Accessibility بتواند کار خود را انجام دهد، باید برنامه شما را همانطور که یک کاربر انجام می‌دهد بررسی کند—به همین دلیل است که به این مجوز نیاز دارد.

مهم: قبل از اینکه این مجوز را فعال کنید، دوباره بررسی کنید تا مطمئن شوید برنامه‌ای که نصب کرده‌اید Accessibility Scanner by Google LLC است.

13. روی دکمه آبی کلیک کنید و منتظر بمانید تا تجزیه و تحلیل کامل شود. چیزی شبیه به اسکرین شات در زیر مشاهده خواهید کرد که عنوان و FAB در کادر قرمز رنگ قرار گرفته است. این نشان دهنده دو پیشنهاد برای بهبود دسترسی در این صفحه است.

14. روی کادر اطراف GDG Finder کلیک کنید. همانطور که در زیر نشان داده شده است، صفحه ای با اطلاعات اضافی باز می شود که نشان دهنده مشکلات کنتراست تصویر است.
15. اطلاعات کنتراست تصویر را گسترش دهید، و ابزار راه‌حل‌هایی را پیشنهاد می‌کند.
16. برای دریافت اطلاعات مورد بعدی، روی فلش های سمت راست کلیک کنید.

17. در برنامه خود، به صفحه Apply for GDG بروید و آن را با برنامه Accessibility Scanner اسکن کنید. این پیشنهادات زیادی را ارائه می دهد، همانطور که در سمت چپ نشان داده شده است. 12، به طور دقیق. اگر بخواهیم منصف باشیم، برخی از این موارد تکراری برای موارد مشابه هستند.
18. روی "پشته" کلیک کنید نماد در نوار ابزار پایین برای دریافت لیستی از همه پیشنهادات، همانطور که در تصویر زیر در تصویر سمت راست نشان داده شده است. شما تمام این مسائل را در این کد لبه بررسی می کنید.

مجموعه Android Accessibility Suite ، مجموعه‌ای از برنامه‌های Google، شامل ابزارهایی برای کمک به دسترسی بیشتر برنامه‌ها است. این شامل ابزارهایی مانند TalkBack است. TalkBack یک صفحه‌خوان است که بازخورد شنیداری، لمسی و گفتاری را ارائه می‌دهد و به کاربران امکان می‌دهد بدون استفاده از چشمان خود محتوا را در دستگاه خود پیمایش و مصرف کنند.

به نظر می رسد TalkBack نه تنها توسط افراد نابینا، بلکه توسط بسیاری از افرادی که به نوعی دارای اختلالات بینایی هستند استفاده می شود. یا حتی افرادی که فقط می خواهند به چشمان خود استراحت دهند!

بنابراین، دسترسی برای همه است! در این کار، TalkBack را امتحان کرده و برنامه خود را به‌روزرسانی می‌کنید تا به خوبی با آن کار کند.

مرحله 1: Accessibility Suite را نصب و اجرا کنید

TalkBack روی بسیاری از دستگاه‌های فیزیکی از قبل نصب شده است، اما در یک شبیه‌ساز، باید آن را نصب کنید.

1. فروشگاه Play را باز کنید.
2. مجموعه دسترس‌پذیری را پیدا کنید. مطمئن شوید که برنامه درست گوگل است.
3. اگر نصب نیست، مجموعه Accessibility را نصب کنید.
4. برای فعال کردن TalkBack در دستگاه، به تنظیمات > دسترس‌پذیری بروید و TalkBack را با انتخاب استفاده از سرویس روشن کنید. درست مانند اسکنر دسترس‌پذیری، TalkBack برای خواندن محتویات روی صفحه به مجوز نیاز دارد. هنگامی که درخواست‌های مجوز را پذیرفتید، TalkBack با فهرستی از آموزش‌ها برای آموزش نحوه استفاده مؤثر از TalkBack از شما استقبال می‌کند.
5. در اینجا مکث کنید و آموزش‌ها را دنبال کنید، اگر دلیل دیگری جز یادگیری نحوه غیرفعال کردن TalkBack پس از اتمام کار نیست.
6. برای ترک آموزش، روی دکمه بازگشت کلیک کنید تا آن را انتخاب کنید، سپس روی هر نقطه از صفحه دوبار ضربه بزنید.

نکته: اگر چیزی نمی شنوید ... صدا را روشن کنید!

نکته: برای کلیک بر روی یک مورد، روی آن دو ضربه بزنید. برای پیمایش یا کشیدن، دو ضربه سریع بزنید و بکشید.

7. با استفاده از برنامه GDG Finder با TalkBack کاوش کنید. به مکان‌هایی که TalkBack هیچ اطلاعات مفیدی درباره صفحه نمایش یا یک کنترل در اختیار شما نمی‌گذارد، توجه کنید. در تمرین بعدی این مشکل را برطرف خواهید کرد.

مرحله 2: توضیحات محتوا را اضافه کنید

توصیفگرهای محتوا برچسب های توصیفی هستند که معنای نماها را توضیح می دهند. اکثر نماهای شما باید دارای توضیحات محتوا باشند.

1. در حالی که برنامه GDG Finder در حال اجرا است و Talback فعال است، برای اجرای صفحه GDG به Apply بروید.
2. روی تصویر اصلی ضربه بزنید و هیچ اتفاقی نمی افتد.
3. add_gdg_fragment.xml را باز کنید.
4. در ImageView ، یک ویژگی توصیفگر محتوا را مانند شکل زیر اضافه کنید. رشته stage_image_description برای شما در strings.xml ارائه شده است.

android:contentDescription="@string/stage_image_description"

5. برنامه خود را اجرا کنید
6. برای اجرای GDG به Apply بروید و روی تصویر کلیک کنید. اکنون باید توضیح کوتاهی از تصویر بشنوید.
7. [اختیاری] توضیحات محتوا را برای سایر تصاویر در این برنامه اضافه کنید. در یک برنامه تولیدی، همه تصاویر باید دارای توضیحات محتوا باشند.

مرحله 3: نکاتی را به فیلدهای متنی قابل ویرایش اضافه کنید

برای عناصر قابل ویرایش، مانند EditText ، می‌توانید از android:hint در XML استفاده کنید تا به کاربران کمک کنید بفهمند چه چیزی باید تایپ کنند. یک اشاره همیشه در UI نشان می دهد که متن پیش فرض در یک فیلد ورودی است.

1. هنوز در add_gdg_fragment.xml است.
2. توضیحات و نکات محتوا را با استفاده از کد زیر به عنوان راهنمایی اضافه کنید.

افزودن به textViewIntro :

android:contentDescription="@string/add_gdg"

به ترتیب به متون ویرایش اضافه کنید:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

3. یک توضیح محتوا به labelTextWhy اضافه کنید.

android:contentDescription="@string/motivation" 

4. یک اشاره به EditTextWhy اضافه کنید. هنگامی که کادرهای ویرایش را برچسب زدید، یک توضیح محتوا به برچسب و همچنین یک اشاره به کادر اضافه کنید.

android:hint="@string/enter_motivation"

5. برای دکمه ارسال توضیحات محتوا اضافه کنید. همه دکمه‌ها باید توضیحی در مورد اینکه در صورت فشار دادن چه اتفاقی می‌افتد داشته باشند.

android:contentDescription="@string/submit_button_description"

6. برنامه خود را با فعال بودن Talback اجرا کنید و فرم را برای درخواست اجرای GDG پر کنید.

مرحله 4: یک گروه محتوا ایجاد کنید

برای کنترل‌های رابط کاربری که TalkBack باید به‌عنوان یک گروه رفتار کند، می‌توانید از گروه‌بندی محتوا استفاده کنید. مطالب مرتبط که با هم گروه بندی شده اند با هم اعلام می شود. پس از آن، کاربران فناوری کمکی نیازی به کشیدن انگشت، اسکن یا منتظر ماندن برای کشف تمام اطلاعات روی صفحه ندارند. این بر نحوه نمایش کنترل ها روی صفحه تأثیر نمی گذارد.

برای گروه بندی اجزای رابط کاربری، آنها را در یک ViewGroup بپیچید، مانند LinearLayout . در برنامه GDG Finder، عناصر labelTextWhy و editTextWhy کاندیدای عالی برای گروه بندی هستند زیرا از نظر معنایی به هم تعلق دارند.

1. add_gdg_fragment.xml را باز کنید.
2. یک LinearLayout در اطراف LabelTextWhy و EditTextWhy بپیچید تا یک گروه محتوا ایجاد کنید. کد زیر را کپی و پیست کنید. این LinearLayout قبلاً حاوی برخی از استایل مورد نیاز شما است. (مطمئن شوید که button خارج از LinearLayout باشد.)

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

3. Code > Reformat code را انتخاب کنید تا همه کدها به درستی تورفتگی داشته باشند.
4. تمام حاشیه های طرح بندی را از labelTextWhy و editTextWhy حذف کنید.
5. در labelTextWhy ، محدودیت layout_constraintTop_toTopOf به contentGroup تغییر دهید.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

6. در editTextWhy چرا محدودیت layout_constraintBottom_toBottomOf به contentGroup تغییر دهید.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. EditTextRegion و Button در contentGroup محدود کنید تا از شر خطاها خلاص شوید.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. اضافه کردن حاشیه به LinearLayout . در صورت تمایل، این حاشیه را به عنوان یک بعد استخراج کنید.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

اگر به کمک نیاز دارید، کد خود را با add_gdg_fragment.xml در کد راه حل بررسی کنید.

9. برنامه خود را اجرا کنید و Apply را برای اجرای صفحه GDG با TalkBack کاوش کنید.

مرحله 5: یک منطقه زنده اضافه کنید

در حال حاضر، برچسب روی دکمه ارسال خوب است. بهتر است این دکمه قبل از ارسال فرم دارای یک برچسب و توضیحات باشد و پس از کلیک کاربر و ارسال فرم به صورت پویا به برچسب و توضیحات محتوای دیگری تغییر یابد. شما می توانید این کار را با استفاده از یک منطقه زنده انجام دهید.

یک منطقه زنده به خدمات دسترس‌پذیری نشان می‌دهد که آیا کاربر باید هنگام تغییر نما مطلع شود یا خیر. به عنوان مثال، اطلاع رسانی به کاربر در مورد رمز عبور نادرست یا خطای شبکه یک راه عالی برای دسترسی بیشتر برنامه شما است. در این مثال، برای ساده نگه داشتن آن، زمانی که دکمه ارسال وضعیت خود را تغییر می دهد، به کاربر اطلاع می دهید.

1. add_gdg_fragment.xml را باز کنید.
2. تخصیص متن دکمه را به ارسال با استفاده از منبع رشته submit ارائه شده تغییر دهید.

android:text="@string/submit"

3. با تنظیم ویژگی android:accessibilityLiveRegion ، یک منطقه زنده به دکمه اضافه کنید. همانطور که تایپ می کنید، چندین گزینه برای مقدار آن دارید. بسته به اهمیت تغییر، می‌توانید انتخاب کنید که کاربر قطع شود یا خیر. با مقدار «مطمئن»، سرویس‌های دسترس‌پذیری، گفتار جاری را قطع می‌کنند تا فوراً تغییرات در این نما را اعلام کنند. اگر مقدار را روی "none" تنظیم کنید، هیچ تغییری اعلام نمی شود. با تنظیم روی "مودب"، سرویس های دسترسی تغییرات را اعلام می کنند، اما منتظر نوبت خود باشید. مقدار را روی "مودب" تنظیم کنید.

android:accessibilityLiveRegion="polite"

4. در بسته افزودن ، AddGdgFragment.kt را باز کنید.
5. در داخل showSnackBarEvent Observer ، پس از اتمام نمایش SnackBar ، توضیحات و متن جدیدی را برای دکمه تنظیم کنید.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

6. برنامه خود را اجرا کنید و روی دکمه کلیک کنید. متاسفانه دکمه و فونت خیلی کوچک است!

مرحله 6: یک ظاهر طراحی شده دکمه را اصلاح کنید

1. در add_gdg_fragment.xml ، width و height دکمه را به wrap_content تغییر دهید، بنابراین برچسب کامل قابل مشاهده است و دکمه اندازه مناسبی دارد.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. ویژگی های backgroundTint ، textColor و textSize را از دکمه حذف کنید تا برنامه از استایل بهتری برای تم استفاده کند.
3. ویژگی textColor را از textViewIntro حذف کنید. رنگ های تم باید کنتراست خوبی ایجاد کنند.
4. برنامه را اجرا کنید. به دکمه ارسال بسیار کاربردی تر توجه کنید. روی ارسال کلیک کنید و متوجه شوید که چگونه به انجام شد.

تراشه ها عناصر فشرده ای هستند که یک ویژگی، متن، موجودیت یا عمل را نشان می دهند. آن‌ها به کاربران اجازه می‌دهند اطلاعات را وارد کنند، انتخابی را انتخاب کنند، محتوا را فیلتر کنند یا اقدامی را آغاز کنند.

ویجت Chip یک بسته بندی نمای نازک در اطراف ChipDrawable است که شامل تمام طرح بندی و منطق ترسیم می شود. منطق اضافی برای پشتیبانی از لمس، ماوس، صفحه کلید و ناوبری دسترسی وجود دارد. تراشه اصلی و نماد بسته به عنوان نماهای فرعی منطقی جداگانه در نظر گرفته می شوند و رفتار و وضعیت ناوبری خود را دارند.

تراشه ها از کشش استفاده می کنند. طراحی‌های Android به شما امکان می‌دهند تصاویر، اشکال و انیمیشن‌ها را روی صفحه بکشید و می‌توانند اندازه ثابت یا پویا داشته باشند. می‌توانید از تصاویر به‌عنوان طرح‌های ترسیمی مانند تصاویر موجود در برنامه GDG استفاده کنید. و می توانید از نقاشی های برداری برای ترسیم هر چیزی که تصور کنید استفاده کنید. همچنین یک طراحی قابل تغییر اندازه به نام 9-patch drawable وجود دارد که در این Codelab پوشش داده نشده است. نشان‌واره GDG، در drawable/ic_gdg.xml ، قابل ترسیم دیگری است.

Drawable ها view نیستند، بنابراین نمی توانید یک drawable را مستقیماً در ConstraintLayout قرار دهید، باید آن را در ImageView قرار دهید. همچنین می‌توانید از ترسیم‌ها برای ارائه پس‌زمینه برای نمای متن یا دکمه استفاده کنید و پس‌زمینه پشت متن ترسیم می‌شود.

مرحله 1: تراشه ها را به لیست GDG ها اضافه کنید

تراشه بررسی شده در زیر از سه نقشه کشی استفاده می کند. پس زمینه و علامت چک هر کدام قابل ترسیم هستند. با لمس تراشه یک افکت موج دار ایجاد می شود که با یک RippleDrawable ویژه انجام می شود که در پاسخ به تغییرات حالت یک افکت ریپل را نشان می دهد.

در این کار، تراشه‌ها را به لیست GDGها اضافه می‌کنید و از آنها می‌خواهید که وقتی انتخاب شدند، حالت خود را تغییر دهند. در این تمرین، یک ردیف دکمه به نام تراشه ها را به بالای صفحه جستجو اضافه می کنید. هر دکمه لیست GDG را فیلتر می کند تا کاربر فقط نتایج را از منطقه انتخاب شده دریافت کند. هنگامی که یک دکمه انتخاب می شود، دکمه پس زمینه خود را تغییر می دهد و یک علامت را نشان می دهد.

1. fragment_gdg_list.xml را باز کنید.
2. یک com.google.android.material.chip.ChipGroup در داخل HorizontalScrollView. ویژگی singleLine آن را روی true تنظیم کنید، به طوری که همه تراشه ها در یک خط افقی قابل پیمایش ردیف شوند. خاصیت singleSelection را روی true تنظیم کنید تا فقط یک تراشه در گروه در هر زمان انتخاب شود. این کد است.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

3. در پوشه layout ، یک فایل منبع طرح بندی جدید به نام region.xml ایجاد کنید تا طرح بندی یک Chip را تعریف کنید.
4. در r egion.xml ، تمام کدها را با طرح بندی یک Chip مطابق زیر جایگزین کنید. توجه داشته باشید که این Chip یک جزء مواد است. همچنین توجه داشته باشید که با تنظیم ویژگی app:checkedIconVisible علامت چک را دریافت می کنید. با خطای رنگ selected_highlight از دست رفته مواجه خواهید شد.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

5. برای ایجاد رنگ selected_highlight از دست رفته، مکان نما را روی selected_highlight قرار دهید، منوی intention را باز کنید و منبع رنگی برای هایلایت انتخاب شده ایجاد کنید . گزینه های پیش فرض خوب هستند، بنابراین فقط روی OK کلیک کنید. فایل در پوشه res/color ایجاد می شود.
6. Res/color/selected_highlight.xml را باز کنید. در این لیست حالت رنگ که به صورت <selector> کدگذاری شده است، می توانید رنگ های مختلفی را برای حالت های مختلف ارائه دهید. هر حالت و رنگ مرتبط به عنوان <item> کدگذاری می شود. برای اطلاعات بیشتر در مورد این رنگ ها به تم رنگی مراجعه کنید.

7. در داخل <selector> ، یک مورد با رنگ پیش‌فرض colorOnSurface به لیست وضعیت اضافه کنید. در لیست های ایالتی، مهم است که همیشه همه ایالت ها را پوشش دهیم. یکی از راه های انجام این کار داشتن یک رنگ پیش فرض است.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

8. بالای رنگ پیش‌فرض، یک item با رنگ colorPrimaryVariant اضافه کنید و استفاده از آن را به زمانی که حالت انتخاب شده true است محدود کنید. فهرست‌های حالت از بالا به پایین، مانند بیانیه موردی، کار می‌شوند. اگر هیچ یک از حالت ها مطابقت نداشته باشد، حالت پیش فرض اعمال می شود.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

مرحله 2: نمایش ردیف تراشه ها

برنامه GDG فهرستی از تراشه ها را ایجاد می کند که مناطقی را که دارای GDG هستند نشان می دهد. وقتی تراشه ای انتخاب می شود، برنامه نتایج را فیلتر می کند تا فقط نتایج GDG را برای آن منطقه نمایش دهد.

توجه: نحوه ایجاد این لیست و نحوه فیلتر کردن نتایج، بخشی از این کد لبه نیست. اگر می خواهید بدانید لیست GDG ها چگونه به دست می آید و چگونه فیلترینگ اجرا می شود، فایل های موجود در بسته های جستجو و شبکه را بررسی کنید. به طور خاص، GdgListViewModel بررسی کنید.

1. در بسته جستجو ، GdgListFragment.kt را باز کنید.
2. در onCreateView() ، درست بالای عبارت return ، یک مشاهده گر در viewModel.regionList اضافه کنید و onChanged() لغو کنید. هنگامی که لیست مناطق ارائه شده توسط مدل view تغییر می کند، تراشه ها باید دوباره ایجاد شوند. یک عبارت اضافه کنید تا در صورت null بودن data ارائه شده، فوراً برگردید.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

3. در داخل onChanged() ، در زیر آزمون تهی، binding.regionList به متغیر جدیدی به نام chipGroup اختصاص دهید تا regionList کش کند.

val chipGroup = binding.regionList

4. در زیر، یک layoutInflator جدید برای باد کردن تراشه ها از chipGroup.context ایجاد کنید.

val inflator = LayoutInflater.from(chipGroup.context)

5. پروژه خود را تمیز و بازسازی کنید تا از خطای databinding خلاص شوید.

اکنون می توانید تراشه های واقعی را برای هر منطقه در regionList در زیر بادکننده ایجاد کنید.

6. یک متغیر، children ، برای نگه داشتن تمام تراشه ها ایجاد کنید. برای ایجاد و برگرداندن هر تراشه، یک تابع نقشه برداری بر روی data ارسال شده به آن اختصاص دهید.

val children = data.map {} 

7. در داخل نقشه لامبدا، برای هر regionName ، یک تراشه ایجاد و باد کنید. کد تکمیل شده در زیر آمده است.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

8. در داخل لامبدا، درست قبل از برگرداندن chip ، یک شنونده کلیک اضافه کنید. هنگامی که chip کلیک می شود، وضعیت آن را checked کنید. در viewModel onFilterChanged() را فراخوانی کنید، که دنباله ای از رویدادها را راه اندازی می کند که نتیجه این فیلتر را دریافت می کند.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

9. در پایان لامبا، همه نماهای فعلی را از chipGroup حذف کنید، سپس همه تراشه‌های children را به chipGroup اضافه کنید. (شما نمی توانید تراشه ها را به روز کنید، بنابراین باید محتویات chipGroup را حذف کرده و دوباره ایجاد کنید.)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

مشاهده گر تکمیل شده شما باید به صورت زیر باشد:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

12. برنامه خود را اجرا کنید و GDGS را جستجو کنید تا صفحه جستجو را برای استفاده از تراشه های جدید خود باز کنید. همانطور که روی هر تراشه کلیک می کنید، برنامه گروه های فیلتر را در زیر آن نمایش می دهد.

مهم است. اگر راه‌اندازی نقشه‌ها به شما در دریافت لیست کمک نمی‌کند، برای اینکه این کار روی شبیه‌ساز کار کند، هر شبیه‌ساز در حال اجرا را ببندید. برنامه را اجرا کنید، یک شبیه ساز جدید راه اندازی کنید، و برنامه نقشه ها را در آن شبیه ساز اجرا کنید، سپس برنامه را اجرا کنید.

حالت شب به برنامه شما امکان می‌دهد رنگ‌های خود را به یک تم تیره تغییر دهد، برای مثال زمانی که تنظیمات دستگاه برای فعال کردن حالت شب تنظیم شده باشد. در حالت شب، برنامه‌ها پس‌زمینه روشن پیش‌فرض خود را تاریک تغییر می‌دهند و همه عناصر دیگر صفحه را بر این اساس تغییر می‌دهند.

مرحله 1: حالت شب را فعال کنید

برای ارائه تم تیره برای برنامه خود، تم آن را از طرح زمینه Light به طرح زمینه ای به نام DayNight تغییر می دهید. تم DayNight بسته به حالت، روشن یا تاریک به نظر می رسد.

1. در styles.xml, تم اصلی AppTheme از Light به DayNight تغییر دهید.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. در متد onCreate() MainActivity ، AppCompatDelegate.setDefaultNightMode() را فراخوانی کنید تا تم تیره را به صورت برنامه‌نویسی روشن کنید.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. برنامه را اجرا کنید و بررسی کنید که به تم تیره تغییر کرده است.

مرحله 2: پالت رنگ تم تیره خود را ایجاد کنید

برای سفارشی کردن تم تیره، پوشه‌هایی با واجد شرایط -night برای استفاده از تم تیره ایجاد کنید. به عنوان مثال، می توانید با ایجاد پوشه ای به نام values-night رنگ های خاصی را در حالت شب داشته باشید.

1. از ابزار انتخابگر رنگ material.io دیدن کنید و یک پالت رنگی با تم شب ایجاد کنید. به عنوان مثال، می توانید آن را بر اساس رنگ آبی تیره قرار دهید.
2. فایل Colors.xml را تولید و دانلود کنید.
3. به نمای Project Files بروید تا همه پوشه های پروژه خود را فهرست کنید.
4. پوشه res را پیدا کنید و آن را گسترش دهید.
5. یک پوشه res/values-night resource ایجاد کنید.
6. فایل color.xml جدید را به پوشه res/values-night resource اضافه کنید.
7. برنامه خود را اجرا کنید، همچنان که حالت شب فعال است، و برنامه باید از رنگ های جدیدی که برای res/values-night تعریف کرده اید استفاده کند. توجه داشته باشید که تراشه ها از رنگ ثانویه جدید استفاده می کنند.

پروژه اندروید استودیو: GDGFinderFinal .

پشتیبانی از زبان های RTL

• در Manifest Android، android:supportsRtl="true" تنظیم کنید.
• می‌توانید پیش‌نمایش RTL را در شبیه‌ساز مشاهده کنید و می‌توانید از زبان خود برای بررسی طرح‌بندی صفحه‌نمایش استفاده کنید. در دستگاه یا شبیه‌ساز، تنظیمات را باز کنید و در گزینه‌های برنامه‌نویس ، Force RTL layout را انتخاب کنید.
• ارجاع به Left و Right را با ارجاع به Start و End جایگزین کنید.
• با حذف android:autoMirrored="true" انعکاس را برای ترسیم‌ها غیرفعال کنید.
• Refactor > افزودن پشتیبانی RTL را در صورت امکان انتخاب کنید تا به Android Studio اجازه دهید این کار را برای شما انجام دهد.
• برای ذخیره منابع خاص زبان، از پوشه‌های مقادیر-"زبان کد" استفاده کنید.

برای دسترسی اسکن کنید

• در فروشگاه Play، اسکنر Accessibility by Google LLC را دریافت کنید و آن را اجرا کنید تا عناصر صفحه را برای بهبود اسکن کنید.

طراحی برای TalkBack با توضیحات محتوا

• مجموعه Android Accessibility Suite توسط Google را نصب کنید که شامل TalkBack می‌شود.
• توضیحات محتوا را به همه عناصر UI اضافه کنید. به عنوان مثال:
  android:contentDescription="@string/stage_image_description"
• برای یک عنصر قابل ویرایش مانند EditText ، از یک ویژگی android:hint در XML استفاده کنید تا به کاربر راهنمایی در مورد آنچه باید تایپ کند ارائه دهید.
• با قرار دادن عناصر مرتبط در یک گروه نمایش، گروه های محتوا ایجاد کنید.
• با android:accessibilityLiveRegion یک منطقه زنده ایجاد کنید تا به کاربران بازخورد بیشتری بدهید.

از چیپ ها برای پیاده سازی فیلتر استفاده کنید

• تراشه ها عناصر فشرده ای هستند که یک ویژگی، متن، موجودیت یا عمل را نشان می دهند.
• برای ایجاد گروهی از تراشه‌ها، از com.google.android.material.chip.ChipGroup استفاده کنید.
• طرح بندی یک com.google.android.material.chip.Chip را تعریف کنید.
• اگر می خواهید تراشه های شما رنگ ها را تغییر دهند ، لیست حالت رنگ را به عنوان <selector> با رنگ های حالت ارائه دهید:
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• با افزودن یک ناظر به داده های موجود در مدل نمایش ، تراشه ها را به داده های زنده متصل کنید.
• برای نمایش تراشه ها ، یک تورم برای گروه تراشه ایجاد کنید:
  LayoutInflater.from(chipGroup.context)
• تراشه ها را ایجاد کنید ، یک شنونده کلیک را اضافه کنید که باعث عمل مورد نظر شود و تراشه ها را به گروه تراشه اضافه کنید.

پشتیبانی از حالت تاریک

• برای پشتیبانی از حالت تاریک AppTheme DayNight استفاده کنید.
• شما می توانید حالت تاریک را به صورت برنامه ای تنظیم کنید:
  AppCompatDelegate.setDefaultNightMode()
• یک پوشه منبع Res/Values-Night ایجاد کنید تا رنگ ها و مقادیر سفارشی را برای حالت تاریک فراهم کنید.

اسناد توسعه دهنده اندرویدی:

• LayoutDirection (RTL)
• دوسویه بودن
• با Accessibility Scanner شروع کنید
• TalkBack
• حرکات گفتگو
• Drawables Docs Docs
• توصیف کننده های محتوا
• گروه بندی محتوا
• مناطق زنده
• قرعه کشی Ninepatch
• ابزار 9 پچ را بکشید
• چیپس
• ChipGroup
• تم تاریک
• تم رنگی
• ابزار رنگ
• گرافیک های قابل ترسیم را متحرک کنید

سایر منابع:

• توسعه برنامه های Android با Kotlin (دوره Udacity)
• Kotlin Bootcamp برای برنامه نویسان (دوره Udacity)
• Bootcamp Kotlin برای برنامه نویسان CodeLabs

در این بخش تکالیف احتمالی تکالیف برای دانشجویانی که از طریق این CodeLab به عنوان بخشی از دوره به رهبری یک مربی کار می کنند ، ذکر شده است. این وظیفه مربی است که موارد زیر را انجام دهد:

• در صورت لزوم تکالیف را اختصاص دهید.
• ارتباط با دانشجویان نحوه ارائه تکالیف خانه.
• تکالیف تکالیف را درجه بندی کنید.

مربیان می توانند از این پیشنهادات به همان اندازه کم یا به همان اندازه که می خواهند استفاده کنند ، و باید احساس راحتی کنند که هرگونه مشق شب دیگری را که احساس می کنند مناسب است.

اگر به تنهایی از طریق این CodeLab کار می کنید ، در صورت تمایل از این تکالیف تکالیف برای آزمایش دانش خود استفاده کنید.

سوال 1

کدام یک از موارد زیر برای پشتیبانی از زبانهای RTL الزامی است؟

▢ Left و Right در خصوصیات با Start و End جایگزین کنید

▢ به یک زبان RTL بروید

▢ مطمئن شوید که همه نمادها از android:autoMirrored="true"

▢ توضیحات محتوا را ارائه دهید

سوال 2

کدام یک از ابزارهای دسترسی زیر با اکثر دستگاه های Android ساخته شده است؟

▢ Talkback

▢ اسکنر دسترسی

▢ در استودیوی اندرویدی ، Refactor> پشتیبانی RTL را در صورت امکان اضافه کنید

▢ لینت

سوال 3

کدام یک از موارد زیر در مورد تراشه ها صحیح نیست؟

▢ شما تراشه ها را به عنوان بخشی از یک ChipGroup نمایش می دهید.

▢ شما می توانید یک لیست حالت رنگی را برای یک ChipGroup ارائه دهید.

▢ تراشه ها عناصر جمع و جور هستند که نمایانگر ورودی ، ویژگی یا عمل هستند.

▢ اگر برنامه شما از تراشه ها استفاده می کند ، همیشه باید DarkTheme فعال کنید.

سوال 4

کدام موضوع به شما یک ظاهر طراحی شده برای حالت های تاریک و سبک می دهد؟

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

سوال 5

منطقه زنده چیست؟

▢ گره ای که حاوی اطلاعاتی است که برای کاربر مهم است

▢ منطقه ای از صفحه نمایش که مطابق با دستورالعمل های مواد تغییر می کند

▢ منظره ای که امکان پخش فیلم را فراهم می کند

▢ یک انیمیشن قابل ترسیم