เพิ่มประสิทธิภาพลำดับชั้นของเลย์เอาต์

ลองใช้วิธีแบบ Compose

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีทำงานกับเลย์เอาต์ใน Compose

เครื่องมือตรวจสอบเลย์เอาต์ใน Compose →

ความเข้าใจผิดที่พบบ่อยคือการใช้โครงสร้างเลย์เอาต์พื้นฐานจะทำให้ได้เลย์เอาต์ที่มีประสิทธิภาพมากที่สุด อย่างไรก็ตาม วิดเจ็ตและเลย์เอาต์แต่ละรายการที่คุณเพิ่มลงในแอป ต้องมีการเริ่มต้น เลย์เอาต์ และการวาด เช่น การใช้อินสแตนซ์ที่ซ้อนกันของ LinearLayout อาจทำให้ลำดับชั้นการแสดงผลลึกเกินไป นอกจากนี้ การซ้อนอินสแตนซ์ของ LinearLayout หลายรายการที่ใช้พารามิเตอร์ layout_weight อาจมีค่าใช้จ่ายสูงเป็นพิเศษ เนื่องจากต้องวัดผลแต่ละรายการ 2 ครั้ง ซึ่งสำคัญอย่างยิ่งเมื่อเลย์เอาต์ขยายซ้ำๆ เช่น เมื่อใช้ใน RecyclerView

เอกสารนี้แสดงวิธีใช้ เครื่องมือตรวจสอบเลย์เอาต์ และ เครื่องมือวิเคราะห์ซอร์สโค้ด เพื่อตรวจสอบและเพิ่มประสิทธิภาพเลย์เอาต์

ตรวจสอบเลย์เอาต์

เครื่องมือ Android SDK มีเครื่องมือเครื่องมือตรวจสอบเลย์เอาต์ ซึ่งช่วยให้คุณวิเคราะห์เลย์เอาต์ขณะที่แอปทํางานได้ การใช้เครื่องมือนี้จะช่วยให้คุณ ค้นพบประสิทธิภาพเลย์เอาต์ที่ไม่มีประสิทธิภาพ

เครื่องมือตรวจสอบเลย์เอาต์ช่วยให้คุณเลือกกระบวนการที่กำลังทำงานในอุปกรณ์ที่เชื่อมต่อหรือ โปรแกรมจำลอง จากนั้นแสดงแผนผังเลย์เอาต์ สัญญาณไฟจราจรในแต่ละบล็อก แสดงถึงประสิทธิภาพการวัด เลย์เอาต์ และการวาด ซึ่งช่วยให้คุณระบุ ปัญหาที่อาจเกิดขึ้นได้

ตัวอย่างเช่น รูปที่ 1 แสดงเลย์เอาต์ที่ใช้เป็นรายการใน RecyclerView เลย์เอาต์นี้แสดงรูปภาพบิตแมปขนาดเล็กทางด้านซ้าย และข้อความ 2 รายการที่ซ้อนกันทางด้านขวา เลย์เอาต์เช่นนี้ที่ขยายหลายครั้งควรได้รับการเพิ่มประสิทธิภาพเป็นอย่างยิ่ง เนื่องจากจะช่วยเพิ่มประสิทธิภาพได้หลายเท่า

เครื่องมือตรวจสอบเลย์เอาต์ จะแสดงรายการอุปกรณ์ที่พร้อมใช้งานและคอมโพเนนต์ที่ทำงานอยู่ของอุปกรณ์ เลือกคอมโพเนนต์จากแท็บ Windows แล้วคลิก เครื่องมือตรวจสอบเลย์เอาต์ เพื่อดูลำดับชั้นของเลย์เอาต์ของคอมโพเนนต์ที่เลือก เช่น รูปที่ 2 แสดงเลย์เอาต์ของรายการที่แสดงซึ่งแสดงในรูปที่ 1

แก้ไขเลย์เอาต์

เนื่องจากประสิทธิภาพของเลย์เอาต์ก่อนหน้าจะช้าลงเนื่องจากLinearLayoutที่ซ้อนกัน คุณจึงอาจปรับปรุงประสิทธิภาพได้โดยการทำให้เลย์เอาต์แบนราบ กล่าวคือ ทำให้เลย์เอาต์ตื้นและกว้าง แทนที่จะแคบและลึก A ConstraintLayout เนื่องจากโหนดรูทอนุญาตให้ใช้เลย์เอาต์ดังกล่าว เมื่อแปลงดีไซน์นี้ให้ใช้ ConstraintLayout เลย์เอาต์จะกลายเป็นลำดับชั้น 2 ระดับ ดังนี้

    <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>
    

การตรวจสอบเลย์เอาต์ใหม่มีลักษณะดังนี้

ซึ่งจะช่วยเพิ่มประโยชน์ได้หลายเท่าเนื่องจากเลย์เอาต์นี้ใช้กับทุกรายการในลิสต์

ความแตกต่างส่วนใหญ่เกิดจากการใช้ layout_weight ในการออกแบบ LinearLayout ซึ่งอาจทำให้การวัดผลช้าลง นี่เป็น ตัวอย่างหนึ่งที่แสดงให้เห็นว่าเลย์เอาต์แต่ละแบบมีการใช้งานที่เหมาะสมอย่างไร พิจารณาอย่างรอบคอบว่าจำเป็นต้องใช้ น้ำหนักเลย์เอาต์หรือไม่

ในเลย์เอาต์ที่ซับซ้อนบางแบบ ระบบอาจเสียเวลาในการวัดองค์ประกอบ UI เดียวกันมากกว่า 1 ครั้ง ปรากฏการณ์นี้เรียกว่าการเก็บภาษีซ้อน ดูข้อมูลเพิ่มเติมเกี่ยวกับการเก็บภาษีซ้ำและวิธีป้องกันได้ที่ลำดับชั้นของประสิทธิภาพ และมุมมอง

ใช้ Lint

แนวทางปฏิบัติแนะนำคือการเรียกใช้เครื่องมือ lint ในไฟล์เลย์เอาต์เพื่อค้นหาการเพิ่มประสิทธิภาพลำดับชั้นการแสดงผลของ View ที่เป็นไปได้ Lint แทนที่เครื่องมือ layoutopt และมีฟังก์ชันการทำงานที่มากขึ้น ตัวอย่างกฎของ Lint มีดังนี้

• ใช้ Drawable แบบผสม คุณสามารถจัดการ LinearLayout ที่มี ImageView และ TextView ได้อย่างมีประสิทธิภาพมากขึ้นในรูปแบบของ Drawable แบบผสม
• ผสานเฟรมรูท หากรากของเลย์เอาต์คือ FrameLayout ที่ไม่มีพื้นหลังหรือระยะห่าง คุณสามารถแทนที่ด้วย แท็กผสาน ซึ่งมีประสิทธิภาพมากกว่าเล็กน้อย
• นำใบไม้ที่ไม่มีประโยชน์ออก คุณสามารถนำเลย์เอาต์ที่ไม่มีองค์ประกอบย่อยหรือไม่มีพื้นหลังออกได้ เนื่องจากเลย์เอาต์ดังกล่าวจะมองไม่เห็น เพื่อให้ลำดับชั้นของเลย์เอาต์แบนราบและมีประสิทธิภาพมากขึ้น
• นำองค์กรหลักที่ไม่จำเป็นออก คุณสามารถนำเลย์เอาต์ที่มีองค์ประกอบย่อยซึ่งไม่มี องค์ประกอบร่วม ไม่ใช่ ScrollView หรือเลย์เอาต์ราก และไม่มีพื้นหลังออกได้ นอกจากนี้ คุณยังย้าย มุมมองย่อยไปยังมุมมองหลักได้โดยตรงเพื่อให้ลำดับชั้นเลย์เอาต์ แบนราบและมีประสิทธิภาพมากขึ้น
• หลีกเลี่ยงเลย์เอาต์ที่ซับซ้อน เลย์เอาต์ที่มีการซ้อนกันมากเกินไปจะส่งผลเสียต่อ ประสิทธิภาพ ลองใช้เลย์เอาต์ที่เรียบง่ายขึ้น เช่น ConstraintLayout เพื่อปรับปรุงประสิทธิภาพ ความลึกสูงสุดเริ่มต้นสำหรับการตรวจสอบ Lint คือ 10

ประโยชน์อีกอย่างของเครื่องมือ Lint คือการผสานรวมเข้ากับ Android Studio Lint จะทำงานโดยอัตโนมัติทุกครั้งที่คุณคอมไพล์โปรแกรม นอกจากนี้ คุณยังเรียกใช้การตรวจสอบ Lint สำหรับตัวแปรบิลด์ที่เฉพาะเจาะจงหรือตัวแปรบิลด์ทั้งหมดได้ด้วย Android Studio

นอกจากนี้ คุณยังจัดการโปรไฟล์การตรวจสอบและกำหนดค่าการตรวจสอบภายใน Android Studio ได้ด้วยตัวเลือกไฟล์ > การตั้งค่า > การตั้งค่าโปรเจ็กต์ หน้าการกำหนดค่าการตรวจสอบจะปรากฏขึ้นพร้อมกับการตรวจสอบที่รองรับ ดังนี้

Lint สามารถแก้ไขปัญหาบางอย่างโดยอัตโนมัติ ให้คำแนะนำสำหรับปัญหาอื่นๆ และ ข้ามไปยังโค้ดที่มีปัญหาโดยตรงเพื่อตรวจสอบ

ดูข้อมูลเพิ่มเติมได้ที่ เลย์เอาต์และ เลย์เอาต์ รีซอร์ส