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

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

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

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

পুনর্গঠনের সংখ্যা পান

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

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

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

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

Layout Inspector উইন্ডোটি খুলুন এবং আপনার অ্যাপ প্রক্রিয়ার সাথে সংযোগ করুন। Component Tree তে, লেআউট হায়ারার্কির পাশে দুটি কলাম রয়েছে। প্রথম কলামটি প্রতিটি নোডের জন্য কম্পোজিশনের সংখ্যা দেখায় এবং দ্বিতীয় কলামটি প্রতিটি নোডের জন্য স্কিপের সংখ্যা দেখায়। একটি composable নোড নির্বাচন করলে composable এর মাত্রা এবং প্যারামিটারগুলি দেখা যায়, যদি না এটি একটি ইনলাইন ফাংশন হয়, যে ক্ষেত্রে প্যারামিটারগুলি দেখানো যায় না। Component Tree বা Layout Display থেকে একটি composable নির্বাচন করার সময় আপনি Attributes প্যানেও অনুরূপ তথ্য দেখতে পাবেন।

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

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

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

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

একটি Compose নোড নির্বাচন করার সময়, Attributes প্যান ব্যবহার করে পরীক্ষা করুন যে এটি সরাসরি শব্দার্থিক তথ্য ঘোষণা করে কিনা, তার সন্তানদের থেকে শব্দার্থিক একত্রিত করে কিনা, নাকি উভয়ই। কোন নোডগুলিতে শব্দার্থিক অন্তর্ভুক্ত রয়েছে তা দ্রুত সনাক্ত করতে, ঘোষিত বা একত্রিত, Component Tree প্যানে View বিকল্প ড্রপ-ডাউন নির্বাচন করুন এবং Highlight Semantics Layers নির্বাচন করুন। এটি শুধুমাত্র ট্রিতে থাকা নোডগুলিকে হাইলাইট করে যেখানে শব্দার্থিক অন্তর্ভুক্ত রয়েছে এবং আপনি তাদের মধ্যে দ্রুত নেভিগেট করতে আপনার কীবোর্ড ব্যবহার করতে পারেন।

কম্পোজ UI চেক

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

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

এই বৈশিষ্ট্যটি অ্যাক্সেস করতে, কম্পোজ প্রিভিউতে UI চেক আইকনে ক্লিক করুন:

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