রচনায় ফোকাস করুন

যখন কোনো ব্যবহারকারী আপনার অ্যাপের সাথে ইন্টারঅ্যাক্ট করেন, তখন তারা প্রায়শই তাদের স্ক্রিনের বিভিন্ন এলিমেন্ট স্পর্শ করার মাধ্যমে তা করে থাকেন। তবে, এটিই ইন্টারঅ্যাকশনের একমাত্র রূপ নয়। ইন্টারঅ্যাকশনের অন্যান্য রূপগুলোর মধ্যে নিম্নলিখিতগুলো অন্তর্ভুক্ত থাকতে পারে:

• একজন ChromeOS ব্যবহারকারী স্ক্রিনে নেভিগেট করার জন্য তার ফিজিক্যাল কীবোর্ডের অ্যারো কীগুলো ব্যবহার করতে পারেন।
• গেম খেলার সময় কেউ তার সাথে সংযুক্ত গেম কন্ট্রোলারটি ব্যবহার করে গেমের মেনুতে চলাচল করতে পারে।
• একজন মোবাইল অ্যাপ ব্যবহারকারী অন-স্ক্রিন কীবোর্ড ব্যবহার করে বিভিন্ন উপাদানের মধ্যে পর্যায়ক্রমে পরিবর্তন করতে পারেন।

এইসব ক্ষেত্রে, যেকোনো নির্দিষ্ট সময়ে কোন কম্পোনেন্টটি সক্রিয় আছে তা ট্র্যাক করা জরুরি, যাকে আমরা ফোকাস বলি। স্ক্রিনের এলিমেন্টগুলোতে একটি যৌক্তিক ক্রমে ফোকাস করা উচিত। Jetpack Compose-এর ফোকাস হ্যান্ডেল করার একটি ডিফল্ট পদ্ধতি আছে যা বেশিরভাগ ক্ষেত্রেই সঠিক। তবে, কিছু ক্ষেত্রে আপনার এই ডিফল্ট আচরণটি পরিবর্তন করার প্রয়োজন হতে পারে।

নিম্নলিখিত পৃষ্ঠাগুলিতে আপনার অ্যাপে ফোকাস কীভাবে ব্যবহার করতে হয় তা বর্ণনা করা হয়েছে:

• ফোকাস ট্র্যাভার্সাল অর্ডার পরিবর্তন করুন : ডিফল্ট ফোকাস অর্ডার কীভাবে পরিবর্তন করতে হয়, ফোকাস গ্রুপ কীভাবে যোগ করতে হয় এবং একটি কম্পোজেবলের ফোকাস কীভাবে নিষ্ক্রিয় করতে হয়, তা এখানে ব্যাখ্যা করা হয়েছে।
• ফোকাস পরিবর্তন করার পদ্ধতি : এতে বর্ণনা করা হয়েছে কীভাবে ফোকাসের জন্য অনুরোধ করতে, তা দখল করতে ও ছেড়ে দিতে হয় এবং কোনো স্ক্রিনে প্রবেশ করার পর কীভাবে ফোকাসকে পুনঃনির্দেশিত করতে হয়।
• ফোকাসের প্রতি প্রতিক্রিয়া : ফোকাস পরিবর্তনে কীভাবে প্রতিক্রিয়া জানাতে হয়, এলিমেন্টগুলিতে ভিজ্যুয়াল সংকেত যোগ করতে হয় এবং কোনো এলিমেন্টের ফোকাস অবস্থা বুঝতে হয়, তা ব্যাখ্যা করে।

ডিফল্ট ফোকাস ট্র্যাভার্সাল অর্ডার

ফোকাস সার্চের ডিফল্ট আচরণে প্রবেশ করার আগে, হায়ারার্কিতে লেভেলের ধারণাটি বোঝা গুরুত্বপূর্ণ: সাধারণভাবে বলতে গেলে, আমরা বলতে পারি যে দুটি Composables একই লেভেলে থাকে যখন তারা সিবলিং হয়, অর্থাৎ তাদের একই প্যারেন্ট থাকে। উদাহরণস্বরূপ, একটি Column ভেতরের এলিমেন্টগুলো একই লেভেলে থাকে। এক লেভেল উপরে যাওয়ার অর্থ হলো একটি চাইল্ড থেকে তার Composable প্যারেন্টে যাওয়া, অথবা, একই উদাহরণে, একটি আইটেম থেকে সেটিকে ধারণকারী Column ফিরে যাওয়া। এক লেভেল নিচে নামা হলো এর বিপরীত, অর্থাৎ Column প্যারেন্ট থেকে তার অন্তর্ভুক্ত আইটেমগুলোতে ফিরে যাওয়া। এই ধারণাটি এমন প্রতিটি Composable ক্ষেত্রে প্রয়োগ করা যেতে পারে যা অন্য Composables ধারণ করতে পারে।

দ্রষ্টব্য: ফোকাসের ক্রম ম্যানুয়ালি নিয়ন্ত্রণ করার বিষয়ে তথ্যের জন্য, ‘ট্র্যাভার্সাল ক্রম নিয়ন্ত্রণ’ দেখুন।

UI নেভিগেশন বিভিন্ন উপায়ে হতে পারে, যার মধ্যে কয়েকটি সম্পর্কে বেশিরভাগ ব্যবহারকারীই ইতিমধ্যে অবগত আছেন:

• ট্যাব: এক-মাত্রিক নেভিগেশন, যা সামনে বা পিছনে যাওয়ার জন্য ব্যবহৃত হয়। ট্যাব নেভিগেশন হায়ারার্কিতে ফোকাসকে পরবর্তী বা পূর্ববর্তী এলিমেন্টে নিয়ে যায়। ডিফল্টরূপে, কম্পোজ ‘ Composables -এর ডিক্লারেশন অনুসরণ করে। কিবোর্ডের tab কী বা ঘড়ির রোটারি বেজেলের মাধ্যমে একমুখী নেভিগেশন করা যায় এবং এই ধরনের ফোকাস সার্চ স্ক্রিনের প্রতিটি এলিমেন্ট পরিদর্শন করে।
• অ্যারো কী: দ্বি-মাত্রিক নেভিগেশন, বামে, ডানে, উপরে বা নিচে যাওয়া। টিভিতে ডি-প্যাড অথবা কিবোর্ডে অ্যারো কী ব্যবহার করে দ্বি-মাত্রিক নেভিগেশন করা যায় এবং এর মাধ্যমে শুধুমাত্র একটি নির্দিষ্ট লেভেলের এলিমেন্টগুলোতেই যাওয়া যায়। আপনি ডি-প্যাডের সেন্টার বাটন এবং ব্যাক বাটন ব্যবহার করে নিচে যেতে এবং অন্য লেভেলে ফিরে আসতে পারেন।

উদাহরণস্বরূপ নিচের স্ক্রিনশটটি দেখুন, যেখানে একটির নিচে আরেকটি করে চারটি বাটন রয়েছে এবং আপনি সেগুলোকে প্রদর্শনের ক্রমানুসারে পর্যায়ক্রমে দেখতে চান। Jetpack Compose এই সুবিধাটি সরাসরি প্রদান করে: এর টুলকিট আপনাকে tab কী ব্যবহার করে প্রতিটি কম্পোজেবল আইটেমকে উল্লম্বভাবে উপর থেকে নিচে পর্যায়ক্রমে দেখতে দেয়, অথবা আপ বা ডাউন অ্যারো চেপে ফোকাস সরাতে সাহায্য করে।

চিত্র ১। ছোট আকারে প্রদর্শিত বোতামের তালিকা।

আপনি যখন অন্য ধরনের লেআউটে যান, তখন কিছু জিনিস বদলে যায়। যদি আপনার লেআউটে নিচের লেআউটের মতো একাধিক কলাম থাকে, তাহলে Jetpack Compose আপনাকে কোনো কোড যোগ না করেই সেগুলোর মধ্যে দিয়ে নেভিগেট করতে দেয়। আপনি tab কী চাপলে, Jetpack Compose স্বয়ংক্রিয়ভাবে প্রথম থেকে চতুর্থ পর্যন্ত, ঘোষণার ক্রমানুসারে আইটেমগুলোকে হাইলাইট করে। আপনার কিবোর্ডের অ্যারো কী ব্যবহার করলে সিলেকশনটি 2D স্পেসে কাঙ্ক্ষিত দিক অনুসরণ করে।

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

Composables দুটি Rows ডিক্লেয়ার করা হয়, এবং ফোকাস এলিমেন্টগুলো প্রথম থেকে চতুর্থ পর্যন্ত ক্রমানুসারে ডিক্লেয়ার করা হয়। যখন আপনি tab কী চাপেন, তখন নিম্নলিখিত ফোকাস অর্ডারটি তৈরি হয়:

চিত্র ২। বৃহত্তর আকারে পাশাপাশি দুটি কলামে সাজানো বোতামের তালিকা।

নীচের কোড অংশে, আপনি আইটেমগুলিকে Rows পরিবর্তে Columns ঘোষণা করেছেন:

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

এই লেআউটটি স্ক্রিনের শুরু থেকে শেষের দিকে, উপর থেকে নিচে, আইটেমগুলোকে উল্লম্বভাবে সাজায়:

চিত্র ৩। বৃহত্তর ফর্ম ফ্যাক্টরে পাশাপাশি দুটি কলামে সাজানো বোতামের তালিকা।

পূর্ববর্তী দুটি নমুনা একমুখী নেভিগেশনের ক্ষেত্রে ভিন্ন হলেও, দ্বিমুখী নেভিগেশনের ক্ষেত্রে একই অভিজ্ঞতা প্রদান করে। এর কারণ হলো, উভয় উদাহরণেই স্ক্রিনের আইটেমগুলোর ভৌগোলিক অবস্থান একই। প্রথম Column থেকে ডানদিকে গেলে ফোকাস দ্বিতীয়টিতে চলে যায় এবং প্রথম Row থেকে নিচের দিকে গেলে ফোকাস তার নিচের সারিতে চলে যায়।

দ্রষ্টব্য: ফোকাস প্রোপার্টি একটি বিশেষ ক্ষেত্র, যেখানে সংঘর্ষ বা ডুপ্লিকেটের ক্ষেত্রে প্যারেন্ট সর্বদা প্রাধান্য পায়। ফোকাস নিয়ে কাজ করার সময় এই বিষয়টি মনে রাখতে হবে।

{% হুবহু %} {% endverbatim %}