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

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

مقدمه

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

  • پشتیبانی از زبان های 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">
  1. فعالیت_ main.xml را در تب Design باز کنید.
  2. از منوی کشویی Locale for Preview ، پیش نمایش از راست به چپ را انتخاب کنید. (اگر این منو را پیدا نکردید، پنجره را باز کنید یا قسمت Attributes را ببندید تا آن را باز کنید.)

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

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

  1. برنامه را اجرا کنید و در دستگاه بررسی کنید که صفحه اصلی مانند پیش نمایش ظاهر شود. توجه داشته باشید که FAB اکنون به سمت چپ و منوی همبرگر به سمت راست تغییر کرده است!
  2. در برنامه، کشوی پیمایش را باز کنید و به صفحه جستجو بروید. همانطور که در زیر نشان داده شده است، نمادها همچنان در سمت چپ هستند و هیچ متنی قابل مشاهده نیست. به نظر می رسد که متن خارج از صفحه نمایش است، در سمت چپ نماد. این به این دلیل است که کد از ارجاعات صفحه چپ/راست در ویژگی های 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"
  1. layout_marginLeft ImageView را با layout_marginStart کنید. با این کار، حاشیه را به محل صحیح انتقال می‌دهید تا نماد را از لبه صفحه دور کنید.
<ImageView
android:layout_marginStart="
?
  1. fragment_gdg_list.xml را باز کنید. لیست GDG ها را در قسمت Preview بررسی کنید. توجه داشته باشید که نماد همچنان در جهت اشتباه نشان می دهد زیرا آینه ای است (اگر نماد آینه نشده است، مطمئن شوید که همچنان در حال مشاهده پیش نمایش راست به چپ هستید). طبق دستورالعمل طراحی متریال، نمادها نباید آینه شوند.
  2. Res/drawable/ic_gdg.xml را باز کنید.
  3. در خط اول کد XML، android:autoMirrored="true" را پیدا کرده و حذف کنید تا mirroring غیرفعال شود.
  4. پیش نمایش را بررسی کنید یا برنامه را دوباره اجرا کنید و صفحه جستجوی GDG را باز کنید. طرح باید الان درست بشه!

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

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

  1. در list_item.xml ، در TextView ، layout_marginStart را به layout_marginLeft تغییر دهید تا اسکنر چیزی برای یافتن داشته باشد.
<TextView
android:layout_marginLeft="@dimen/spacing_normal"
  1. در Android Studio، Refactor > Add RTL support را در صورت امکان انتخاب کنید و کادرهای مربوط به به‌روزرسانی مانیفست و فایل‌های طرح‌بندی را برای استفاده از ویژگی‌های شروع و پایان علامت بزنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. برای فعال کردن آن روی استفاده از سرویس کلیک کنید.

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

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

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

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

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

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

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

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

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

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

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

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

  1. فروشگاه Play را باز کنید.
  2. مجموعه دسترس‌پذیری را پیدا کنید. مطمئن شوید که برنامه درست گوگل است.
  3. اگر نصب نیست، مجموعه Accessibility را نصب کنید.
  4. برای فعال کردن TalkBack در دستگاه، به Settings > Accessibility بروید و TalkBack را با انتخاب Use Service روشن کنید. درست مانند اسکنر دسترس‌پذیری، TalkBack برای خواندن محتویات روی صفحه به مجوز نیاز دارد. پس از پذیرش درخواست‌های مجوز، TalkBack با فهرستی از آموزش‌ها برای آموزش نحوه استفاده مؤثر از TalkBack از شما استقبال می‌کند.
  5. در اینجا مکث کنید و آموزش‌ها را دنبال کنید، البته اگر دلیل دیگری جز یادگیری نحوه غیرفعال کردن TalkBack پس از اتمام کار نباشد.
  6. برای ترک آموزش، روی دکمه بازگشت کلیک کنید تا آن را انتخاب کنید، سپس روی هر نقطه از صفحه دوبار ضربه بزنید.
  1. با استفاده از برنامه 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"
  1. برنامه خود را اجرا کنید
  2. برای اجرای GDG به Apply بروید و روی تصویر کلیک کنید. اکنون باید توضیح کوتاهی از تصویر بشنوید.
  3. [اختیاری] توضیحات محتوا را برای سایر تصاویر در این برنامه اضافه کنید. در یک برنامه تولیدی، همه تصاویر باید دارای توضیحات محتوا باشند.

مرحله 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"
  1. یک توضیح محتوا به labelTextWhy کنید.
android:contentDescription="@string/motivation"
  1. یک اشاره به EditTextWhy اضافه کنید. هنگامی که کادرهای ویرایش را برچسب گذاری کردید، یک توضیح محتوا به برچسب و همچنین یک اشاره به کادر اضافه کنید.
android:hint="@string/enter_motivation"
  1. برای دکمه ارسال توضیحات محتوا اضافه کنید. همه دکمه‌ها باید توضیحی داشته باشند که در صورت فشار دادن چه اتفاقی می‌افتد.
android:contentDescription="@string/submit_button_description"
  1. برنامه خود را با فعال بودن 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/>
  1. کد > فرمت کد را انتخاب کنید تا همه کدها به درستی تورفتگی داشته باشند.
  2. تمام حاشیه های طرح بندی را از labelTextWhy و editTextWhy حذف کنید.
  3. در labelTextWhy ، محدودیت layout_constraintTop_toTopOf را به contentGroup تغییر دهید.
app:layout_constraintTop_toTopOf="@+id/contentGroup" />
  1. در editTextچرا محدودیت layout_constraintBottom_toBottomOf را به editTextWhy تغییر contentGroup .
app:layout_constraintBottom_toBottomOf="@+id/contentGroup"
  1. EditTextRegion و Button را در contentGroup کنید تا از شر خطاها خلاص شوید.
app:layout_constraintBottom_toTopOf="@+id/contentGroup"
  1. اضافه کردن حاشیه به LinearLayout . در صورت تمایل، این حاشیه را به عنوان یک بعد استخراج کنید.
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

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

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

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

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

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

  1. add_gdg_fragment.xml را باز کنید.
  2. تخصیص متن دکمه را به ارسال با استفاده از منبع رشته submit ارائه شده تغییر دهید.
android:text="@string/submit"
  1. با تنظیم ویژگی android:accessibilityLiveRegion ، یک منطقه زنده به دکمه اضافه کنید. همانطور که تایپ می کنید، چندین گزینه برای مقدار آن دارید. بسته به اهمیت تغییر، می توانید انتخاب کنید که آیا کاربر را قطع کنید یا خیر. با مقدار "مطمئن"، خدمات دسترس‌پذیری گفتار جاری را قطع می‌کنند تا فوراً تغییرات در این نما را اعلام کنند. اگر مقدار را روی "none" تنظیم کنید، هیچ تغییری اعلام نمی شود. با تنظیم روی "مودبانه"، سرویس های دسترسی تغییرات را اعلام می کنند، اما منتظر نوبت خود باشید. مقدار را روی "مودب" تنظیم کنید. 

android:accessibilityLiveRegion="polite"
  1. در بسته افزودن ، AddGdgFragment.kt را باز کنید.
  2. در داخل showSnackBarEvent Observer ، پس از اتمام نمایش SnackBar ، توضیحات و متن جدیدی را برای دکمه تنظیم کنید.
binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)
  1. برنامه خود را اجرا کنید و روی دکمه کلیک کنید. متاسفانه دکمه و فونت خیلی کوچک است!

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

  1. در add_gdg_fragment.xml ، width و height دکمه را به wrap_content تغییر دهید، بنابراین برچسب کامل قابل مشاهده است و دکمه اندازه مناسبی دارد.
android:layout_width="wrap_content"
android:layout_height="wrap_content"
  1. ویژگی های backgroundTint ، textColor و textSize را از دکمه حذف کنید تا برنامه از استایل تم بهتر استفاده کند.
  2. ویژگی textColor را از textViewIntro حذف کنید. رنگ های تم باید کنتراست خوبی ارائه دهند.
  3. برنامه را اجرا کنید. به دکمه ارسال بسیار کاربردی تر توجه کنید. روی ارسال کلیک کنید و متوجه شوید که چگونه به انجام شد.

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

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

تراشه ها از کشش استفاده می کنند. طراحی‌های Android به شما امکان می‌دهند تصاویر، اشکال و انیمیشن‌ها را روی صفحه بکشید و می‌توانند اندازه ثابت یا پویا داشته باشند. می‌توانید از تصاویر به‌عنوان طرح‌های ترسیمی استفاده کنید، مانند تصاویر موجود در برنامه GDG. و می توانید از نقاشی های برداری برای ترسیم هر چیزی که تصور کنید استفاده کنید. همچنین یک طراحی قابل تغییر اندازه به نام 9-patch drawable وجود دارد که در این کد لبه پوشش داده نشده است. نشان‌واره 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"/>
  1. در پوشه layout ، یک فایل منبع طرح بندی جدید به نام region.xml ایجاد کنید تا طرح بندی یک Chip را تعریف کنید.
  2. در r egion.xml ، تمام کدها را با طرح بندی یک Chip مطابق زیر جایگزین کنید. توجه داشته باشید که این Chip یک جزء Material است. همچنین توجه داشته باشید که با تنظیم ویژگی 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"/>
  1. برای ایجاد رنگ select_highlight از دست رفته، مکان نما را روی selected_highlight قرار دهید، منوی قصد را باز کنید و منبع رنگی را برای هایلایت انتخاب شده ایجاد کنید selected_highlight گزینه های پیش فرض خوب هستند، بنابراین فقط روی OK کلیک کنید. فایل در پوشه res/color ایجاد می شود.
  2. Res/color/selected_highlight.xml را باز کنید. در این لیست حالت رنگ، که به صورت <selector> کدگذاری شده است، می توانید رنگ های مختلفی را برای حالت های مختلف ارائه دهید. هر حالت و رنگ مرتبط به عنوان یک <item> کدگذاری می شود. برای اطلاعات بیشتر در مورد این رنگ ها به تم رنگی مراجعه کنید.
  1. در داخل <selector> ، یک مورد با رنگ پیش‌فرض رنگ colorOnSurface را به لیست وضعیت اضافه کنید. در لیست های ایالتی، مهم است که همیشه همه ایالت ها را پوشش دهیم. یکی از راه های انجام این کار داشتن یک رنگ پیش فرض است.
<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>
  1. بالای رنگ پیش‌فرض، یک item با رنگ colorPrimaryVariant اضافه کنید و استفاده از آن را به زمانی که حالت انتخاب شده true است محدود کنید. فهرست‌های حالت از بالا به پایین، مانند یک بیانیه موردی، کار می‌شوند. اگر هیچ یک از حالت ها مطابقت نداشته باشد، حالت پیش فرض اعمال می شود.
<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

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

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

  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
        }
})
  1. در داخل onChanged() ، در زیر آزمون null، binding.regionList را به متغیر جدیدی به نام chipGroup تا regionList را کش کند.
val chipGroup = binding.regionList
  1. در زیر، یک layoutInflator جدید برای باد کردن تراشه ها از chipGroup.context کنید.
val inflator = LayoutInflater.from(chipGroup.context)
  1. پروژه خود را تمیز و بازسازی کنید تا از خطای databinding خلاص شوید.

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

  1. یک متغیر، children ها، برای نگه داشتن تمام تراشه ها ایجاد کنید. برای ایجاد و برگرداندن هر تراشه، یک تابع نگاشت روی data به آن اختصاص دهید.
val children = data.map {}
  1. در داخل نقشه لامبدا، برای هر 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
   }
}
  1. در داخل لامبدا، درست قبل از برگرداندن chip ، یک شنونده کلیک اضافه کنید. وقتی روی chip کلیک می‌شود، وضعیت آن را checked کنید. onFilterChanged() را در viewModel ، که دنباله ای از رویدادها را راه اندازی می کند که نتیجه را برای این فیلتر واکشی می کند.
chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}
  1. در پایان لامبا، همه نماهای فعلی را از 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)
       }
   }
})
  1. برنامه خود را اجرا کنید و GDGS را جستجو کنید تا صفحه جستجو را برای استفاده از تراشه های جدید خود باز کنید. همانطور که روی هر تراشه کلیک می کنید، برنامه گروه های فیلتر را در زیر آن نمایش می دهد.

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

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

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

  1. در styles.xml, تم اصلی AppTheme را از Light به DayNight .
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  1. در onCreate() MainActivity ، AppCompatDelegate.setDefaultNightMode() () را فراخوانی کنید تا تم تاریک را بصورت برنامه نویسی روشن کنید.
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
  1. برنامه را اجرا کنید و بررسی کنید که به تم تیره تغییر کرده است.

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

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

  • تراشه ها عناصر فشرده ای هستند که یک ویژگی، متن، موجودیت یا عمل را نشان می دهند.
  • برای ایجاد گروهی از تراشه‌ها، از com.google.android.material.chip.ChipGroup استفاده کنید.
  • Define the layout for one com.google.android.material.chip.Chip .
  • If you want your chips to change colors, provide a color state list as a <selector> with stateful colors:
    <item android:color="?attr/colorPrimaryVariant"
    android:state_selected="true" />
  • Bind the chips to live data by adding an observer to the data in the view model.
  • To display the chips, create an inflator for the chip group:
    LayoutInflater.from(chipGroup.context)
  • Create the chips, add a click listener that triggers the desired action, and add the chips to the chip group.

Support dark mode

  • Use the DayNight AppTheme to support dark mode.
  • You can set dark mode programmatically:
    AppCompatDelegate.setDefaultNightMode()
  • Create a res/values-night resource folder to provide custom colors and values for dark mode.

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

Other resources:

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

  • در صورت نیاز تکالیف را تعیین کنید.
  • نحوه ارسال تکالیف را با دانش آموزان در میان بگذارید.
  • تکالیف را نمره دهید.

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

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

سوال 1

Which of the following is mandatory for supporting RTL languages?

▢ Replace Left and Right in properties with Start and End

▢ Switch to an RTL language

▢ Make sure all icons use android:autoMirrored="true"

▢ Provide content descriptions

سوال 2

Which of the following accessibility tools comes built in with most Android devices?

▢ TalkBack

▢ Accessibility Scanner

▢ In Android Studio, Refactor > Add RTL support where possible

▢ Lint

سوال 3

Which of the following is not true about chips?

▢ You display chips as part of a ChipGroup .

▢ You can provide a color state list for a ChipGroup .

▢ Chips are compact elements that represent an input, attribute, or action.

▢ You must always enable DarkTheme if your app uses chips.

سوال 4

Which theme gives you styling for dark and light modes?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

سوال 5

What is a live region?

▢ A node that contains information that is important for the user

▢ A region of the screen that changes shape according to Material guidelines

▢ A view that allows streaming video

▢ An animated drawable