بهینه سازی سلسله مراتب چیدمان

روش نوشتن را امتحان کنید
Jetpack Compose ابزار رابط کاربری پیشنهادی برای اندروید است. یاد بگیرید که چگونه با طرح‌بندی‌ها در Compose کار کنید.

این یک تصور غلط رایج است که استفاده از ساختارهای اولیه طرح‌بندی منجر به کارآمدترین طرح‌بندی‌ها می‌شود. با این حال، هر ویجت و طرح‌بندی که به برنامه خود اضافه می‌کنید نیاز به مقداردهی اولیه، طرح‌بندی و ترسیم دارد. به عنوان مثال، استفاده از نمونه‌های تو در تو از LinearLayout می‌تواند منجر به یک سلسله مراتب نمای بیش از حد عمیق شود. علاوه بر این، تو در تو کردن چندین نمونه از LinearLayout که از پارامتر layout_weight استفاده می‌کنند می‌تواند به ویژه گران باشد، زیرا هر فرزند باید دو بار اندازه‌گیری شود. این امر به ویژه زمانی اهمیت دارد که طرح‌بندی به طور مکرر فشرده شود، مانند زمانی که در RecyclerView استفاده می‌شود.

این سند نحوه استفاده از Layout Inspector و lint را برای بررسی و بهینه‌سازی طرح‌بندی شما نشان می‌دهد.

طرح‌بندی خود را بررسی کنید

ابزارهای Android SDK شامل ابزار Layout Inspector است که به شما امکان می‌دهد طرح‌بندی خود را در حین اجرای برنامه تجزیه و تحلیل کنید. استفاده از این ابزار به شما کمک می‌کند تا ناکارآمدی‌های عملکرد طرح‌بندی را کشف کنید.

Layout Inspector به شما امکان می‌دهد فرآیندهای در حال اجرا را روی یک دستگاه یا شبیه‌ساز متصل انتخاب کنید، سپس درخت طرح‌بندی را نمایش دهید. چراغ‌های راهنمایی روی هر بلوک، عملکرد اندازه‌گیری، طرح‌بندی و ترسیم آن را نشان می‌دهند و به شما در شناسایی مشکلات احتمالی کمک می‌کنند.

برای مثال، شکل ۱ یک طرح‌بندی را نشان می‌دهد که به عنوان یک آیتم در RecyclerView استفاده می‌شود. این طرح‌بندی یک تصویر بیت‌مپ کوچک در سمت چپ و دو آیتم متنی روی هم چیده شده در سمت راست را نشان می‌دهد. بهینه‌سازی طرح‌بندی‌هایی مانند این که چندین بار inflate می‌شوند، بسیار مهم است، زیرا مزایای عملکرد چند برابر می‌شود.

تصویری که یک مورد واحد را در یک لیست نشان می‌دهد: یک تصویر و دو متن با تراز عمودی
شکل ۱. طرح مفهومی برای یک آیتم در RecyclerView .

Layout Inspector فهرستی از دستگاه‌های موجود و اجزای در حال اجرای آنها را نشان می‌دهد. قطعه مورد نظر خود را از تب Windows انتخاب کنید و برای مشاهده سلسله مراتب طرح‌بندی قطعه انتخاب شده، روی Layout Inspector کلیک کنید. به عنوان مثال، شکل 2 طرح‌بندی مورد فهرست نشان داده شده در شکل 1 را نشان می‌دهد.

تصویری که Layout Inspector و ترکیب 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 Layout Inspector) را نشان می‌دهد
شکل ۳. حالت سه‌بعدی Layout Inspector.

مزایای این روش چند برابر است، زیرا این طرح‌بندی برای هر مورد در یک لیست استفاده می‌شود.

بیشتر این تفاوت به دلیل استفاده از layout_weight در طراحی LinearLayout است که می‌تواند اندازه‌گیری را کند کند. این یکی از نمونه‌هایی است که نشان می‌دهد هر layout چگونه کاربردهای مناسبی دارد. با دقت بررسی کنید که آیا استفاده از layout weight ضروری است یا خیر.

در برخی از طرح‌بندی‌های پیچیده، سیستم ممکن است برای اندازه‌گیری بیش از یک بار یک عنصر رابط کاربری، تلاش زیادی را هدر دهد. این پدیده مالیات مضاعف نامیده می‌شود. برای اطلاعات بیشتر در مورد مالیات مضاعف و نحوه جلوگیری از آن، به بخش عملکرد و سلسله مراتب مشاهده مراجعه کنید.

از پرز استفاده کنید

اجرای ابزار lint روی فایل‌های طرح‌بندی (layout) برای جستجوی بهینه‌سازی‌های سلسله مراتبی ممکن، تمرین خوبی است. Lint جایگزین ابزار layoutopt می‌شود و عملکرد بهتری دارد. در زیر نمونه‌هایی از قوانین lint آمده است:

  • از drawableهای ترکیبی استفاده کنید. می‌توانید یک LinearLayout که شامل یک ImageView و یک TextView است را به صورت کارآمدتری به عنوان drawable ترکیبی مدیریت کنید.
  • ادغام فریم ریشه. اگر ریشه یک طرح‌بندی FrameLayout است که پس‌زمینه یا padding را ارائه نمی‌دهد، می‌توانید آن را با یک تگ ادغام جایگزین کنید که کمی کارآمدتر است.
  • برگ‌های بی‌فایده را حذف کنید. می‌توانید طرحی را که فرزند یا پس‌زمینه ندارد - چون نامرئی است - حذف کنید تا سلسله مراتب طرح‌بندی مسطح‌تر و کارآمدتر شود.
  • والدهای بی‌فایده را حذف کنید. می‌توانید یک طرح‌بندی با فرزندی که هیچ خواهر و برادری ندارد، ScrollView یا طرح‌بندی ریشه نیست و پس‌زمینه ندارد را حذف کنید. همچنین می‌توانید نمای فرزند را مستقیماً به والد منتقل کنید تا سلسله مراتب طرح‌بندی مسطح‌تر و کارآمدتر شود.
  • از طرح‌بندی‌های عمیق خودداری کنید. طرح‌بندی‌هایی که تودرتو بودن زیادی دارند برای عملکرد بد هستند. برای بهبود عملکرد، استفاده از طرح‌بندی‌های مسطح‌تر، مانند ConstraintLayout ، را در نظر بگیرید. حداکثر عمق پیش‌فرض برای بررسی پرزها 10 است.

یکی دیگر از مزایای ابزار lint، ادغام آن با اندروید استودیو است. Lint هر زمان که برنامه خود را کامپایل می‌کنید، به طور خودکار اجرا می‌شود. با اندروید استودیو، می‌توانید بازرسی‌های lint را برای یک نوع ساخت خاص یا برای همه انواع ساخت اجرا کنید.

همچنین می‌توانید پروفایل‌های بازرسی را مدیریت کرده و بازرسی‌ها را در اندروید استودیو با گزینه File > Settings > Project Settings پیکربندی کنید. صفحه پیکربندی بازرسی با بازرسی‌های پشتیبانی شده ظاهر می‌شود:

تصویری که منوی بازرسی‌های اندروید استودیو را نشان می‌دهد
شکل ۴. صفحه پیکربندی بازرسی.

Lint می‌تواند به طور خودکار برخی از مشکلات را برطرف کند، برای برخی دیگر پیشنهادهایی ارائه دهد و مستقیماً برای بررسی به کد مشکل‌دار پرش کند.

برای اطلاعات بیشتر، به منابع طرح‌بندی و چیدمان مراجعه کنید.