আপনার রচনা UI ডিবাগ করুন

আপনার কম্পোজ UI ডিবাগ করার টুলস অ্যান্ড্রয়েড স্টুডিওতে পাওয়া যায়।

লেআউট ইন্সপেক্টর

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

পুনর্গঠন গণনা পান

আপনার কম্পোজ লেআউট ডিবাগ করার সময়, আপনার UI সঠিকভাবে প্রয়োগ করা হয়েছে কিনা তা বোঝার জন্য কম্পোজেবল কম্পোনেন্টগুলো কখন রিকম্পোজ হয় তা জানা গুরুত্বপূর্ণ। উদাহরণস্বরূপ, যদি এটি খুব বেশিবার রিকম্পোজ হয়, তাহলে আপনার অ্যাপটি প্রয়োজনের চেয়ে বেশি কাজ করতে পারে। অন্যদিকে, যে কম্পোনেন্টগুলো আপনার প্রত্যাশা অনুযায়ী রিকম্পোজ হয় না, সেগুলো অপ্রত্যাশিত আচরণের কারণ হতে পারে।

আপনি যখন আপনার অ্যাপ ব্যবহার করেন, তখন লেআউট ইন্সপেক্টর আপনাকে দেখায় যে আপনার লেআউট হায়ারার্কিতে থাকা স্বতন্ত্র কম্পোজেবলগুলো কখন রিকম্পোজ হয়েছে বা স্কিপ হয়েছে। অ্যান্ড্রয়েড স্টুডিওতে, আপনার রিকম্পোজিশনগুলো হাইলাইট করা থাকে, যা আপনাকে UI-এর কোথায় আপনার কম্পোজেবলগুলো রিকম্পোজ হচ্ছে তা নির্ধারণ করতে সাহায্য করে।

চিত্র ১। লেআউট ইন্সপেক্টরে পুনর্বিন্যাসগুলো হাইলাইট করা হয়েছে।

হাইলাইট করা অংশটি লেআউট ইন্সপেক্টরের ইমেজ সেকশনে কম্পোজেবলটির একটি গ্রেডিয়েন্ট ওভারলে দেখায় এবং ধীরে ধীরে অদৃশ্য হয়ে যায়, যাতে আপনি UI-এর কোথায় সর্বোচ্চ রিকম্পোজিশন সম্পন্ন কম্পোজেবলটি পাওয়া যাবে সে সম্পর্কে একটি ধারণা পেতে পারেন। যদি একটি কম্পোজেবল অন্যটির চেয়ে বেশি হারে রিকম্পোজ হয়, তাহলে প্রথম কম্পোজেবলটি একটি গাঢ় গ্রেডিয়েন্ট ওভারলে রঙ পায়। আপনি যদি লেআউট ইন্সপেক্টরে কোনো কম্পোজেবলে ডাবল-ক্লিক করেন, তাহলে আপনাকে বিশ্লেষণের জন্য সংশ্লিষ্ট কোডে নিয়ে যাওয়া হবে।

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

আপনার অ্যাপের সাথে কোনো নির্দিষ্ট ইন্টারঅ্যাকশনের সময় রিকম্পোজিশন বা স্কিপ হওয়া বুঝতে কাউন্ট রিসেট করা সহায়ক হতে পারে। আপনি যদি কাউন্ট রিসেট করতে চান, তাহলে কম্পোনেন্ট ট্রি পেনের উপরের দিকে থাকা রিসেট (Reset) বোতামে ক্লিক করুন।

চিত্র ৩। লেআউট ইন্সপেক্টরে কম্পোজিশন এবং স্কিপ কাউন্টার সক্রিয় করুন।

শব্দার্থ রচনা করুন

কম্পোজে, সিম্যান্টিকস আপনার UI-কে এমন একটি বিকল্প পদ্ধতিতে বর্ণনা করে যা অ্যাক্সেসিবিলিটি সার্ভিস এবং টেস্টিং ফ্রেমওয়ার্কের জন্য বোধগম্য। আপনি আপনার কম্পোজ লেআউটগুলিতে সিম্যান্টিক তথ্য পরীক্ষা করার জন্য লেআউট ইন্সপেক্টর ব্যবহার করতে পারেন।

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

কম্পোজ UI চেক

Jetpack Compose-এ আপনাকে আরও অভিযোজনযোগ্য ও প্রবেশযোগ্য UI তৈরি করতে সাহায্য করার জন্য, Android Studio তার Compose Preview-তে একটি UI Check মোড প্রদান করে। এই ফিচারটি ভিউ-এর জন্য থাকা Accessibility Scanner-এর অনুরূপ।

যখন আপনি একটি কম্পোজ প্রিভিউতে কম্পোজ UI চেক মোড সক্রিয় করেন, তখন অ্যান্ড্রয়েড স্টুডিও স্বয়ংক্রিয়ভাবে আপনার কম্পোজ UI নিরীক্ষা করে এবং আপনার UI-কে আরও সহজলভ্য ও অভিযোজনযোগ্য করে তোলার জন্য উন্নতির পরামর্শ দেয়। অ্যান্ড্রয়েড স্টুডিও পরীক্ষা করে দেখে যে আপনার UI বিভিন্ন স্ক্রিনের আকারে কাজ করে কি না। প্রবলেমস প্যানেলে, টুলটি তার শনাক্ত করা সমস্যাগুলো দেখায়, যেমন বড় স্ক্রিনে টেক্সট প্রসারিত হয়ে যাওয়া বা রঙের কনট্রাস্ট কম থাকা।

এই ফিচারটি অ্যাক্সেস করতে, কম্পোজ প্রিভিউ-তে থাকা UI চেক আইকনটিতে ক্লিক করুন:

UI চেক স্বয়ংক্রিয়ভাবে আপনার UI-কে বিভিন্ন কনফিগারেশনে প্রিভিউ করে এবং বিভিন্ন কনফিগারেশনে পাওয়া সমস্যাগুলো হাইলাইট করে। প্রবলেমস প্যানেলে, আপনি যখন কোনো একটি ইস্যুতে ক্লিক করেন, তখন আপনি ইস্যুটির বিস্তারিত বিবরণ, প্রস্তাবিত সমাধান এবং ইস্যুটির নির্দিষ্ট অংশ হাইলাইট করা রেন্ডারিংগুলো দেখতে পারেন।

এআই দিয়ে ঠিক করুন

UI চেক মোডে শনাক্ত হওয়া সমস্যাগুলোর জন্য, আপনি AI এজেন্ট ব্যবহার করে কোডের সমাধান প্রস্তাব ও প্রয়োগ করতে পারেন। প্রবলেমস প্যানেলে থাকা কোনো একটি সমস্যার উপর ‘ফিক্স উইথ AI’ বোতামে ক্লিক করুন। এজেন্টটি সমস্যাটি এবং আপনার কোড বিশ্লেষণ করে এমন পরিবর্তনের পরামর্শ দেয় যা অ্যাক্সেসিবিলিটি বা অ্যাডাপ্টিভ সমস্যাটির সমাধান করে।