আপনার Compose UI ডিবাগ করার টুল Android Studio-তে উপলভ্য।
লেআউট ইন্সপেক্টর
লেআউট ইন্সপেক্টর আপনাকে এমুলেটর বা ফিজিক্যাল ডিভাইসে রান করা অ্যাপের মধ্যে কম্পোজ লেআউট ইন্সপেক্ট করতে দেয়। আপনি লেআউট ইন্সপেক্টর ব্যবহার করে চেক করতে পারেন যে কত ঘন ঘন একটি কম্পোজেবল আবার কম্পোজ করা বা এড়িয়ে যাওয়া হয়, যা আপনার অ্যাপের সমস্যা শনাক্ত করতে সাহায্য করতে পারে। উদাহরণস্বরূপ, কিছু কোডিং ত্রুটি আপনার UI-কে অতিরিক্তভাবে আবার কম্পোজ করতে বাধ্য করতে পারে, যার ফলে খারাপ পারফর্ম্যান্স হতে পারে। কিছু কোডিং সংক্রান্ত সমস্যার কারণে আপনার UI রিকম্পোজ করা যায় না এবং এর ফলে, আপনার UI-তে করা পরিবর্তন স্ক্রিনে দেখা যায় না। আপনি লেআউট ইন্সপেক্টর নতুন ব্যবহার করলে, এটি কীভাবে রান করতে হয় সেই সংক্রান্ত নির্দেশিকা চেক করুন।
রিকম্পোজিশন কাউন্ট পান
আপনার Compose লেআউট ডিবাগ করার সময়, কম্পোজেবল কখন রিকম্পোজ হয় তা জানা, আপনার UI সঠিকভাবে প্রয়োগ করা হয়েছে কিনা তা বোঝার জন্য গুরুত্বপূর্ণ। যেমন, এটি যদি অনেকবার রিকম্পোজ করে, তাহলে আপনার অ্যাপ হয়ত প্রয়োজনের চেয়ে বেশি কাজ করছে। অন্যদিকে, আপনি আশা করছেন যে কম্পোনেন্ট রিকম্পোজ করবে কিন্তু তা না করলে অপ্রত্যাশিত আচরণ দেখা যেতে পারে।
আপনি অ্যাপের সাথে ইন্টার্যাক্ট করার সময়, লেআউট ইন্সপেক্টর আপনাকে দেখায় যে আপনার লেআউট হায়ারার্কিতে ডিসক্রিট কম্পোজেবল কখন রিকম্পোজ বা স্কিপ করা হয়েছে। Android Studio-তে, আপনার রিকম্পোজিশন হাইলাইট করা হয় যাতে UI-এর কোথায় আপনার কম্পোজেবল রিকম্পোজ হচ্ছে তা নির্ধারণ করতে আপনাকে সাহায্য করা যায়।
ছবি ১. লেআউট ইন্সপেক্টরে রিকম্পোজিশন হাইলাইট করা হয়।
হাইলাইট করা অংশটি লেআউট ইন্সপেক্টরের ছবি বিভাগে কম্পোজেবলের গ্রেডিয়েন্ট ওভারলে দেখায় এবং ধীরে ধীরে অদৃশ্য হয়ে যায় যাতে আপনি UI-তে কোথায় সবচেয়ে বেশি রিকম্পোজিশন সহ কম্পোজেবল খুঁজে পাওয়া যায় সে সম্পর্কে ধারণা পেতে পারেন। একটি কম্পোজেবল অন্য কম্পোজেবলের থেকে বেশি রেটে রিকম্পোজ করলে, প্রথম কম্পোজেবলটি আরও গাঢ় গ্রেডিয়েন্ট ওভারলে কালার পায়। লেআউট ইন্সপেক্টরে কোনও কম্পোজেবল ডবল-ক্লিক করলে, আপনাকে বিশ্লেষণের জন্য সংশ্লিষ্ট কোডে নিয়ে যাওয়া হয়।
লেআউট ইন্সপেক্টর উইন্ডো খুলে আপনার অ্যাপ প্রসেসে কানেক্ট করুন। কম্পোনেন্ট ট্রি-তে, লেআউট হায়ারার্কির পাশে দু'টি কলাম দেখা যায়। প্রথম কলামে প্রতিটি নোডের জন্য কম্পোজিশনের সংখ্যা এবং দ্বিতীয় কলামে প্রতিটি নোডের জন্য স্কিপের সংখ্যা দেখানো হয়। কম্পোজেবল নোড বেছে নিলে কম্পোজেবলের ডাইমেনশন ও প্যারামিটার দেখা যায়, যদি না এটি ইনলাইন ফাংশন হয়, যেক্ষেত্রে প্যারামিটার দেখানো যায় না। আপনি কম্পোনেন্ট ট্রি বা লেআউট ডিসপ্লে থেকে কম্পোজেবল বেছে নিলে, অ্যাট্রিবিউট প্যানেও একই ধরনের তথ্য দেখতে পাবেন।
কাউন্ট রিসেট করলে, আপনার অ্যাপের সাথে নির্দিষ্ট ইন্টার্যাকশনের সময় রিকম্পোজিশন বা স্কিপ করা সম্পর্কে বুঝতে পারবেন। আপনি কাউন্ট রিসেট করতে চাইলে, কম্পোনেন্ট ট্রি পেনের উপরের দিকে রিসেট করুন বিকল্পে ক্লিক করুন।
ছবি ৩। লেআউট ইন্সপেক্টরে কম্পোজিশন ও স্কিপ কাউন্টার চালু করুন।
কম্পোজ সেম্যান্টিক্স
Compose-এ, সিম্যান্টিক্স আপনার UI-কে এমন একটি বিকল্প উপায়ে বর্ণনা করে যা অ্যাক্সেসিবিলিটি পরিষেবা এবং টেস্টিং ফ্রেমওয়ার্কের জন্য বোধগম্য হয়। আপনি লেআউট ইন্সপেক্টর ব্যবহার করে আপনার কম্পোজ লেআউটে শব্দার্থিক তথ্য পরীক্ষা করতে পারেন।
Compose নোড বেছে নেওয়ার সময়, অ্যাট্রিবিউট প্যানে ব্যবহার করে চেক করুন যে এটি সরাসরি সিম্যান্টিক তথ্য ঘোষণা করে, চাইল্ড থেকে সিম্যান্টিক মার্জ করে নাকি দুটিই করে। কোন নোডে সিম্যান্টিকস অন্তর্ভুক্ত আছে তা দ্রুত শনাক্ত করতে, হয় ঘোষিত বা মার্জ করা, কম্পোনেন্ট ট্রি প্যানে ভিউ বিকল্প ড্রপ-ডাউন বেছে নিন এবং সিম্যান্টিকস লেয়ার হাইলাইট করুন বিকল্প বেছে নিন। এটি ট্রি-তে শুধু সেইসব নোড হাইলাইট করে যেগুলিতে সিম্যান্টিকস অন্তর্ভুক্ত থাকে এবং আপনি কীবোর্ড ব্যবহার করে সেগুলির মধ্যে দ্রুত নেভিগেট করতে পারবেন।
Compose UI চেক
Jetpack Compose-এ আরও অ্যাডাপ্টিভ ও অ্যাক্সেসিবল UI তৈরি করতে আপনাকে সাহায্য করার জন্য, Android Studio, Compose প্রিভিউতে UI চেক মোড প্রদান করে। এই ফিচারটি ভিউয়ের জন্য অ্যাক্সেসিবিলিটি স্ক্যানার-এর মতোই।
আপনি Compose প্রিভিউতে Compose UI চেক মোড অ্যাক্টিভেট করলে, Android Studio অটোমেটিক আপনার Compose UI অডিট করে এবং আপনার UI আরও অ্যাক্সেসযোগ্য ও অ্যাডাপ্টিভ করার জন্য উন্নতির সাজেশন দেয়। Android Studio চেক করে দেখে যে আপনার UI বিভিন্ন স্ক্রিন সাইজে কাজ করছে কিনা। সমস্যা প্যানেলে, টুলটি শনাক্ত করা সমস্যাগুলি দেখায়, যেমন বড় স্ক্রিনে টেক্সট স্ট্রেচ করা বা কম কালার কনট্রাস্ট।
এই ফিচার অ্যাক্সেস করতে, কম্পোজ প্রিভিউতে UI চেক আইকনে ক্লিক করুন:
UI চেক অটোমেটিক বিভিন্ন কনফিগারেশনে আপনার UI প্রিভিউ করে এবং বিভিন্ন কনফিগারেশনে পাওয়া সমস্যা হাইলাইট করে। সমস্যা প্যানেলে, কোনও সমস্যার উপর ক্লিক করলে, আপনি সমস্যার বিবরণ, সাজেস্ট করা সমাধান এবং রেন্ডারিং দেখতে পাবেন যা সমস্যার ক্ষেত্রকে হাইলাইট করে।
AI-এর সাহায্যে সমাধান করুন
UI চেক মোডে শনাক্ত করা সমস্যার জন্য, আপনি AI এজেন্ট ব্যবহার করে কোড ফিক্সের সাজেশন দিতে এবং প্রয়োগ করতে পারেন। সমস্যা প্যানেলে কোনও সমস্যার জন্য AI-এর সাহায্যে সমাধান করুন বোতামে ক্লিক করুন। এজেন্ট সমস্যা ও আপনার কোড বিশ্লেষণ করে অ্যাক্সেসিবিলিটি বা অ্যাডাপ্টিভ সমস্যা সমাধান করার জন্য পরিবর্তন সাজেস্ট করে।
