تمرکز در نوشتن

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

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

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

صفحات زیر نحوه استفاده از focus در برنامه شما را شرح می‌دهند:

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

ترتیب پیش‌فرض پیمایش فوکوس

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

ناوبری رابط کاربری می‌تواند به روش‌های مختلفی اتفاق بیفتد که برخی از آنها را اکثر کاربران از قبل می‌دانند:

• تب‌ها: ناوبری تک‌بعدی، رفتن به جلو یا عقب . ناوبری تب، فوکوس را به عنصر بعدی یا قبلی در سلسله مراتب منتقل می‌کند. به طور پیش‌فرض، Compose پس از تعریف Composables انجام می‌شود. ناوبری یک‌جهته را می‌توان از طریق کلید tab روی صفحه کلید یا قاب چرخشی روی ساعت انجام داد و این نوع جستجوی فوکوس، هر عنصر روی صفحه را بازدید می‌کند.
• کلیدهای جهت‌نما: پیمایش دوبعدی، رفتن به چپ، راست، بالا یا پایین . پیمایش دوبعدی را می‌توان از طریق D-Pad روی تلویزیون یا کلیدهای جهت‌نما روی صفحه‌کلید انجام داد و ترتیب پیمایش آن فقط عناصر را در یک سطح مشخص بازدید می‌کند. می‌توانید از مرکز D-Pad و دکمه Back برای پایین رفتن و بازگشت به سطح متفاوت استفاده کنید.

به عنوان مثال، تصویر زیر را در نظر بگیرید، که در آن چهار دکمه دارید که یکی زیر دیگری قرار دارد و می‌خواهید به ترتیب ظاهر شدن، بین آنها جابجا شوید. Jetpack Compose این رفتار را به صورت پیش‌فرض ارائه می‌دهد: این ابزار به شما امکان می‌دهد با استفاده از کلید tab ، بین هر دکمه به صورت عمودی از بالا به پایین جابجا شوید یا با فشار دادن فلش بالا یا پایین ، فوکوس را جابجا کنید.

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

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Composables در دو Rows تعریف شده‌اند و عناصر focus به ترتیب از اول تا چهارم تعریف شده‌اند. وقتی کلید tab را فشار می‌دهید، ترتیب focus به صورت زیر خواهد بود:

در قطعه کد زیر، شما آیتم‌ها را به جای Columns در Rows تعریف می‌کنید:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

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

دو نمونه قبلی، اگرچه در ناوبری یک‌جهته متفاوت هستند، اما در ناوبری دوبعدی تجربه یکسانی را ارائه می‌دهند. این معمولاً به این دلیل است که موارد روی صفحه در هر دو مثال موقعیت جغرافیایی یکسانی دارند. پیمایش به راست از Column اول، فوکوس را به ستون دوم منتقل می‌کند و پیمایش به پایین از Row اول، فوکوس را به ردیف زیرین آن منتقل می‌کند.