লেআউট হায়ারার্কি অপ্টিমাইজ করুন

Compose-এর মাধ্যমে চেষ্টা করুন
Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ লেআউট নিয়ে কীভাবে কাজ করতে হয় তা জানুন।

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

এই ডকুমেন্ট থেকে জানতে পারবেন যে কীভাবে লেআউট ইন্সপেক্টর এবং লিন্ট ব্যবহার করে আপনার লেআউট পরীক্ষা ও অপ্টিমাইজ করতে হয়।

আপনার লেআউট পরীক্ষা করুন

Android SDK টুলের মধ্যে লেআউট ইন্সপেক্টর টুল অন্তর্ভুক্ত থাকে, যা আপনার অ্যাপ চলাকালীন লেআউট বিশ্লেষণ করতে সাহায্য করে। এই টুল ব্যবহার করলে আপনি লেআউট পারফর্ম্যান্সে অদক্ষতা খুঁজে পাবেন।

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

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

একটি ছবি, যাতে তালিকার একটি আইটেম দেখা যাচ্ছে: একটি ছবি এবং উল্লম্বভাবে সারিবদ্ধ দুটি টেক্সট
ছবি ১. RecyclerView-এ কোনও আইটেমের জন্য কনসেপচুয়াল লেআউট।

লেআউট ইন্সপেক্টর উপলভ্য ডিভাইসের তালিকা এবং সেগুলির রান করা কম্পোনেন্ট দেখায়। Windows ট্যাব থেকে আপনার কম্পোনেন্ট বেছে নিন এবং বেছে নেওয়া কম্পোনেন্টের লেআউট হাইয়ারার্কি দেখতে লেআউট ইন্সপেক্টর বিকল্পে ক্লিক করুন। যেমন, ছবি ২-এ ছবি ১-এর মাধ্যমে দেখানো তালিকা আইটেমের লেআউট দেখানো হয়েছে।

লেআউট ইন্সপেক্টর এবং LinearLayout কম্পোজিশন দেখানো একটি ছবি
ছবি ২. ১ নম্বর ছবিতে দেখানো লেআউটের জন্য লেআউট হায়ারার্কি, LinearLayout-এর নেস্টেড ইনস্ট্যান্স ব্যবহার করে।

আপনার লেআউট সংশোধন করুন

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

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

নতুন লেআউটের পরীক্ষা এইরকম দেখায়:

3D লেআউট ইন্সপেক্টর দেখানো ছবি
ছবি ৩. লেআউট ইন্সপেক্টর 3D মোড।

এর সুবিধা অনেক বেশি, কারণ এই লেআউট তালিকার প্রতিটি আইটেমের জন্য ব্যবহার করা হয়।

বেশিরভাগ পার্থক্য LinearLayout ডিজাইনে layout_weight ব্যবহার করার কারণে হয়, যা পরিমাপের গতি কমিয়ে দিতে পারে। প্রতিটি লেআউটের উপযুক্ত ব্যবহার কীভাবে করা যায়, এটি তার একটি উদাহরণ। লেআউট ওয়েট ব্যবহার করা প্রয়োজন কিনা তা ভালভাবে বিবেচনা করুন।

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

লিন্ট ব্যবহার করুন

সম্ভাব্য ভিউ হায়ারার্কি অপ্টিমাইজেশন সার্চ করার জন্য আপনার লেআউট ফাইলে লিন্ট টুল রান করা একটি ভালো অভ্যাস। Lint layoutopt টুলকে রিপ্লেস করে এবং এর কার্যকারিতা আরও বেশি। নিচে লিন্ট নিয়মের উদাহরণ দেওয়া হল:

  • কম্পাউন্ড ড্রয়েবল ব্যবহার করুন। আপনি একটি LinearLayout ম্যানেজ করতে পারেন যেটিতে একটি ImageView এবং একটি TextView কম্পাউন্ড ড্রয়েবল হিসেবে আরও দক্ষতার সাথে রয়েছে।
  • রুট ফ্রেম মার্জ করুন। কোনও লেআউটের রুট যদি FrameLayout হয় যা ব্যাকগ্রাউন্ড বা প্যাডিং প্রদান করে না, তাহলে আপনি এটি মার্জ ট্যাগ দিয়ে পরিবর্তন করতে পারেন, যা কিছুটা বেশি কার্যকর।
  • অপ্রয়োজনীয় পাতা সরিয়ে দিন। আপনি এমন লেআউট সরিয়ে দিতে পারেন যার কোনও চাইল্ড বা ব্যাকগ্রাউন্ড নেই—যেহেতু এটি অদৃশ্য—আরও ফ্ল্যাট ও দক্ষ লেআউট হায়ারার্কির জন্য।
  • অপ্রয়োজনীয় পেরেন্ট সরান। আপনি এমন একটি লেআউট সরাতে পারেন যার কোনও সিবলিং নেই, ScrollView বা রুট লেআউট নয় এবং কোনও ব্যাকগ্রাউন্ড নেই। এছাড়াও, আপনি আরও ফ্ল্যাট ও দক্ষ লেআউট হায়ারার্কির জন্য চাইল্ড ভিউ সরাসরি পেরেন্ট ভিউতে সরিয়ে নিয়ে যেতে পারেন।
  • ডিপ লেআউট এড়িয়ে চলুন। অনেক বেশি নেস্টিং সহ লেআউট পারফর্ম্যান্সের জন্য খারাপ। পারফর্ম্যান্স উন্নত করতে, ConstraintLayout-এর মতো ফ্ল্যাটার লেআউট ব্যবহার করার কথা বিবেচনা করুন। লিন্ট চেকের জন্য ডিফল্ট সর্বাধিক গভীরতা হল ১০।

Android Studio-তে ইন্টিগ্রেশন হল লিন্ট টুলের আরেকটি সুবিধা। আপনি যখনই আপনার প্রোগ্রাম কম্পাইল করেন, তখনই Lint অটোমেটিক রান করে। Android Studio-র মাধ্যমে, আপনি নির্দিষ্ট কোনও বিল্ড ভেরিয়েন্ট বা সব বিল্ড ভেরিয়েন্টের জন্য লিন্ট ইন্সপেকশন চালাতে পারবেন।

এছাড়াও, আপনি ফাইল > সেটিংস > প্রোজেক্ট সেটিংস বিকল্পের মাধ্যমে Android Studio-তে ইন্সপেকশন প্রোফাইল ম্যানেজ ও ইন্সপেকশন কনফিগার করতে পারবেন। ইন্সপেকশন কনফিগারেশন পৃষ্ঠায় এই ইন্সপেকশনগুলি দেখা যায়:

Android Studio Inspections মেনু দেখানো একটি ছবি
ছবি ৪. পরিদর্শন কনফিগারেশন পৃষ্ঠা।

Lint অটোমেটিক কিছু সমস্যার সমাধান করতে পারে, অন্যান্য সমস্যার জন্য সাজেশন দিতে পারে এবং পর্যালোচনা করার জন্য সরাসরি সমস্যাযুক্ত কোডে যেতে পারে।

আরও তথ্যের জন্য, লেআউট এবং লেআউট রিসোর্স দেখুন।