วิธีที่ Android ดึงการแสดงผล

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

เฟรมเวิร์ก Android จะขอให้ Activity วาดเลย์เอาต์เมื่อ Activity ได้รับโฟกัส เฟรมเวิร์ก Android จะจัดการขั้นตอนการวาด แต่ Activity จะต้องระบุโหนดรูทของลําดับชั้นเลย์เอาต์

เฟรมเวิร์ก Android จะวาดโหนดรูทของเลย์เอาต์ รวมถึงวัดและวาดต้นไม้เลย์เอาต์ ซึ่งวาดโดยการเดินบนต้นไม้และแสดง View แต่ละรายการที่ตัดกับพื้นที่ที่ไม่ถูกต้อง ViewGroup แต่ละรายการมีหน้าที่รับผิดชอบในการขอให้วาดรายการย่อยแต่ละรายการโดยใช้วิธี draw() และ View แต่ละรายการมีหน้าที่รับผิดชอบในการวาดตัวเอง เนื่องจากระบบจะวนผ่านต้นไม้แบบก่อนการสั่งซื้อ เฟรมเวิร์กจึงวาดรายการหลักก่อน หรือพูดอีกอย่างคือด้านหลังรายการย่อย และวาดรายการพี่น้องตามลำดับที่ปรากฏในต้นไม้

เฟรมเวิร์ก Android จะวาดเลย์เอาต์ในกระบวนการ 2 ขั้นตอน ได้แก่ ระยะการวัดและระยะเลย์เอาต์ เฟรมเวิร์กจะทําการวัดใน measure(int, int) และทําการวนจากบนลงล่างของต้นไม้ View View แต่ละรายการจะส่งข้อกําหนดของมิติข้อมูลลงตามลําดับชั้นระหว่างการเรียกซ้ำ เมื่อสิ้นสุดการวัดค่า View แต่ละรายการจะจัดเก็บค่าที่วัดได้ เฟรมเวิร์กจะดำเนินการส่งผ่านที่ 2 ใน layout(int, int, int, int) และยังเป็นจากบนลงล่างด้วย ในระหว่างการส่งผ่านนี้ องค์ประกอบหลักแต่ละรายการมีหน้าที่รับผิดชอบในการจัดตําแหน่งองค์ประกอบย่อยทั้งหมดโดยใช้ขนาดที่คำนวณในการส่งผ่านการวัด

เราจะอธิบายรายละเอียดเพิ่มเติมของกระบวนการออกแบบผ่านทั้ง 2 ส่วนในหัวข้อถัดไป

เริ่มการวัด

เมื่อเมธอด measure() ของออบเจ็กต์ View แสดงผล ให้ตั้งค่า getMeasuredWidth() และ getMeasuredHeight() ของออบเจ็กต์นั้น รวมถึงค่าของออบเจ็กต์ที่สืบทอดมาจากออบเจ็กต์ View ทั้งหมด ค่าความกว้างและความสูงที่วัดได้ของออบเจ็กต์ View ต้องเป็นไปตามข้อจำกัดที่กำหนดโดยระดับบนสุดของออบเจ็กต์ View วิธีนี้ช่วยให้มั่นใจได้ว่าเมื่อเสร็จสิ้นการวัดผลแล้ว ผู้ปกครองทุกคนยอมรับการวัดผลทั้งหมดของบุตรหลาน

เจ้าของ View อาจเรียก measure() มากกว่า 1 ครั้งในประเภทย่อย เช่น ผู้ปกครองอาจวัดขนาดของบุตรหลานเพียงครั้งเดียวโดยใช้มิติข้อมูลที่ไม่ได้ระบุเพื่อกำหนดขนาดที่ต้องการ หากผลรวมของขนาดที่ไม่มีการจำกัดของรายการย่อยมีขนาดใหญ่หรือเล็กเกินไป รายการหลักอาจเรียก measure() อีกครั้งพร้อมค่าที่จำกัดขนาดของรายการย่อย

พาสการวัดใช้ 2 คลาสเพื่อสื่อสารมิติข้อมูล คลาส ViewGroup.LayoutParams เป็นตัวกำหนดวิธีที่ออบเจ็กต์ View สื่อสารขนาดและตำแหน่งที่ต้องการ คลาส base ViewGroup.LayoutParams จะอธิบายความกว้างและความสูงที่ต้องการของ View แต่ละมิติข้อมูลจะระบุค่าใดค่าหนึ่งต่อไปนี้ได้

  • มิติข้อมูลที่แน่นอน
  • MATCH_PARENT ซึ่งหมายความว่าขนาดที่ต้องการสำหรับ View คือขนาดขององค์ประกอบหลักลบระยะห่างจากขอบ
  • WRAP_CONTENT ซึ่งหมายความว่าขนาดที่ต้องการสำหรับ View คือขนาดที่พอดีกับเนื้อหาของ View รวมถึงระยะห่างจากขอบ

ViewGroup.LayoutParams มีหลายคลาสย่อยสำหรับViewGroup แต่ละคลาสย่อย ตัวอย่างเช่น RelativeLayout มีคลาสย่อย ViewGroup.LayoutParams ของตัวเองซึ่งมีความสามารถในการจัดวางออบเจ็กต์ View ย่อยในแนวนอนและแนวตั้งให้อยู่ตรงกลาง

ระบบจะใช้ออบเจ็กต์ MeasureSpec เพื่อส่งข้อกำหนดลงตามลําดับชั้นจากรายการหลักไปยังรายการย่อย MeasureSpec อยู่ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้

  • UNSPECIFIED: รายการหลักใช้ค่านี้เพื่อกําหนดมิติข้อมูลเป้าหมายของรายการย่อย View ตัวอย่างเช่น LinearLayout อาจเรียก measure() กับรายการย่อยโดยตั้งค่าความสูงเป็น UNSPECIFIED และความกว้าง EXACTLY 240 เพื่อหาว่า View ต้องการความสูงเท่าไหร่ โดยมีความกว้าง 240 พิกเซล
  • EXACTLY: องค์ประกอบหลักใช้ค่านี้เพื่อกำหนดขนาดที่แน่นอนให้กับองค์ประกอบย่อย รายการย่อยต้องใช้ขนาดนี้และรับประกันว่ารายการที่สืบทอดทั้งหมดจะพอดีกับขนาดนี้
  • AT MOST: องค์ประกอบหลักใช้ค่านี้เพื่อกำหนดขนาดสูงสุดขององค์ประกอบย่อย เด็กต้องรับประกันว่าองค์ประกอบและองค์ประกอบสืบทอดทั้งหมดจะมีขนาดไม่เกินขนาดนี้

เริ่มใช้ Layout Pass

หากต้องการเริ่มเลย์เอาต์ ให้เรียกใช้ requestLayout() โดยปกติแล้ว View จะเรียกใช้เมธอดนี้กับตัวเองเมื่อเชื่อว่าตัวเองไม่สามารถอยู่ภายในขอบเขตได้อีกต่อไป

ใช้ตรรกะการวัดผลและเลย์เอาต์ที่กําหนดเอง

หากต้องการใช้การวัดที่กําหนดเองหรือตรรกะเลย์เอาต์ ให้ลบล้างเมธอดที่ใช้ตรรกะ ดังนี้ onMeasure(int, int) และ onLayout(boolean, int, int, int, int) measure(int, int) และ layout(int, int, int, int) จะเรียกใช้เมธอดเหล่านี้ตามลำดับ อย่าพยายามลบล้างเมธอด measure(int, int) หรือ layout(int, int) เนื่องจากทั้ง 2 เมธอดนี้เป็น final จึงลบล้างไม่ได้

ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการในคลาส `SplitLayout` จากแอป WindowManager ตัวอย่าง หาก SplitLayout มีมุมมองย่อย 2 รายการขึ้นไป และการแสดงผลมีแนวเส้นแบ่ง ก็จะเป็นการวางมุมมองย่อย 2 มุมมองที่ด้านใดด้านหนึ่งของแนวเส้นแบ่งหน้า ตัวอย่างต่อไปนี้แสดงกรณีการใช้งานสำหรับการลบล้างการวัดและเลย์เอาต์ แต่สำหรับเวอร์ชันที่ใช้งานจริง ให้ใช้ SlidingPaneLayout หากคุณต้องการลักษณะการทำงานนี้

Kotlin

/**
 * An example of split-layout for two views, separated by a display
 * feature that goes across the window. When both start and end views are
 * added, it checks whether there are display features that separate the area
 * in two—such as a fold or hinge—and places them side-by-side or
 * top-bottom.
 */
class SplitLayout : FrameLayout {
   private var windowLayoutInfo: WindowLayoutInfo? = null
   private var startViewId = 0
   private var endViewId = 0

   private var lastWidthMeasureSpec: Int = 0
   private var lastHeightMeasureSpec: Int = 0

   ...

   fun updateWindowLayout(windowLayoutInfo: WindowLayoutInfo) {
      this.windowLayoutInfo = windowLayoutInfo
      requestLayout()
   }

   override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
      val startView = findStartView()
      val endView = findEndView()
      val splitPositions = splitViewPositions(startView, endView)

      if (startView != null && endView != null && splitPositions != null) {
            val startPosition = splitPositions[0]
            val startWidthSpec = MeasureSpec.makeMeasureSpec(startPosition.width(), EXACTLY)
            val startHeightSpec = MeasureSpec.makeMeasureSpec(startPosition.height(), EXACTLY)
            startView.measure(startWidthSpec, startHeightSpec)
            startView.layout(
               startPosition.left, startPosition.top, startPosition.right,
               startPosition.bottom
            )

            val endPosition = splitPositions[1]
            val endWidthSpec = MeasureSpec.makeMeasureSpec(endPosition.width(), EXACTLY)
            val endHeightSpec = MeasureSpec.makeMeasureSpec(endPosition.height(), EXACTLY)
            endView.measure(endWidthSpec, endHeightSpec)
            endView.layout(
               endPosition.left, endPosition.top, endPosition.right,
               endPosition.bottom
            )
      } else {
            super.onLayout(changed, left, top, right, bottom)
      }
   }

   /**
   * Gets the position of the split for this view.
   * @return A rect that defines of split, or {@code null} if there is no split.
   */
   private fun splitViewPositions(startView: View?, endView: View?): Array? {
      if (windowLayoutInfo == null || startView == null || endView == null) {
            return null
      }

      // Calculate the area for view's content with padding.
      val paddedWidth = width - paddingLeft - paddingRight
      val paddedHeight = height - paddingTop - paddingBottom

      windowLayoutInfo?.displayFeatures
            ?.firstOrNull { feature -> isValidFoldFeature(feature) }
            ?.let { feature ->
               getFeaturePositionInViewRect(feature, this)?.let {
                  if (feature.bounds.left == 0) { // Horizontal layout.
                        val topRect = Rect(
                           paddingLeft, paddingTop,
                           paddingLeft + paddedWidth, it.top
                        )
                        val bottomRect = Rect(
                           paddingLeft, it.bottom,
                           paddingLeft + paddedWidth, paddingTop + paddedHeight
                        )

                        if (measureAndCheckMinSize(topRect, startView) &&
                           measureAndCheckMinSize(bottomRect, endView)
                        ) {
                           return arrayOf(topRect, bottomRect)
                        }
                  } else if (feature.bounds.top == 0) { // Vertical layout.
                        val leftRect = Rect(
                           paddingLeft, paddingTop,
                           it.left, paddingTop + paddedHeight
                        )
                        val rightRect = Rect(
                           it.right, paddingTop,
                           paddingLeft + paddedWidth, paddingTop + paddedHeight
                        )

                        if (measureAndCheckMinSize(leftRect, startView) &&
                           measureAndCheckMinSize(rightRect, endView)
                        ) {
                           return arrayOf(leftRect, rightRect)
                        }
                  }
               }
            }

      // You previously tried to fit the children and measure them. Since they
      // don't fit, measure again to update the stored values.
      measure(lastWidthMeasureSpec, lastHeightMeasureSpec)
      return null
   }

   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec)
      lastWidthMeasureSpec = widthMeasureSpec
      lastHeightMeasureSpec = heightMeasureSpec
   }

   /**
   * Measures a child view and sees if it fits in the provided rect.
   * This method calls [View.measure] on the child view, which updates its
   * stored values for measured width and height. If the view ends up with
   * different values, measure again.
   */
   private fun measureAndCheckMinSize(rect: Rect, childView: View): Boolean {
      val widthSpec = MeasureSpec.makeMeasureSpec(rect.width(), AT_MOST)
      val heightSpec = MeasureSpec.makeMeasureSpec(rect.height(), AT_MOST)
      childView.measure(widthSpec, heightSpec)
      return childView.measuredWidthAndState and MEASURED_STATE_TOO_SMALL == 0 &&
               childView.measuredHeightAndState and MEASURED_STATE_TOO_SMALL == 0
   }

   private fun isValidFoldFeature(displayFeature: DisplayFeature) =
      (displayFeature as? FoldingFeature)?.let { feature ->
            getFeaturePositionInViewRect(feature, this) != null
      } ?: false
}

Java

/**
* An example of split-layout for two views, separated by a display feature
* that goes across the window. When both start and end views are added, it checks
* whether there are display features that separate the area in two—such as
* fold or hinge—and places them side-by-side or top-bottom.
*/
public class SplitLayout extends FrameLayout {
   @Nullable
   private WindowLayoutInfo windowLayoutInfo = null;
   private int startViewId = 0;
   private int endViewId = 0;

   private int lastWidthMeasureSpec = 0;
   private int lastHeightMeasureSpec = 0;

   ...

   void updateWindowLayout(WindowLayoutInfo windowLayoutInfo) {
      this.windowLayoutInfo = windowLayoutInfo;
      requestLayout();
   }

   @Override
   protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
      @Nullable
      View startView = findStartView();
      @Nullable
      View endView = findEndView();
      @Nullable
      List splitPositions = splitViewPositions(startView, endView);

      if (startView != null && endView != null && splitPositions != null) {
            Rect startPosition = splitPositions.get(0);
            int startWidthSpec = MeasureSpec.makeMeasureSpec(startPosition.width(), EXACTLY);
            int startHeightSpec = MeasureSpec.makeMeasureSpec(startPosition.height(), EXACTLY);
            startView.measure(startWidthSpec, startHeightSpec);
            startView.layout(
                  startPosition.left,
                  startPosition.top,
                  startPosition.right,
                  startPosition.bottom
            );

            Rect endPosition = splitPositions.get(1);
            int endWidthSpec = MeasureSpec.makeMeasureSpec(endPosition.width(), EXACTLY);
            int endHeightSpec = MeasureSpec.makeMeasureSpec(endPosition.height(), EXACTLY);
            startView.measure(endWidthSpec, endHeightSpec);
            startView.layout(
                  endPosition.left,
                  endPosition.top,
                  endPosition.right,
                  endPosition.bottom
            );
      } else {
            super.onLayout(changed, left, top, right, bottom);
      }
   }

   /**
   * Gets the position of the split for this view.
   * @return A rect that defines of split, or {@code null} if there is no split.
   */
   @Nullable
   private List splitViewPositions(@Nullable View startView, @Nullable View endView) {
      if (windowLayoutInfo == null || startView == null || endView == null) {
            return null;
      }

      int paddedWidth = getWidth() - getPaddingLeft() - getPaddingRight();
      int paddedHeight = getHeight() - getPaddingTop() - getPaddingBottom();

      List displayFeatures = windowLayoutInfo.getDisplayFeatures();

      @Nullable
      DisplayFeature feature = displayFeatures
               .stream()
               .filter(item ->
                  isValidFoldFeature(item)
               )
               .findFirst()
               .orElse(null);

      if (feature != null) {
            Rect position = SampleToolsKt.getFeaturePositionInViewRect(feature, this, true);
            Rect featureBounds = feature.getBounds();
            if (featureBounds.left == 0) { // Horizontal layout.
               Rect topRect = new Rect(
                        getPaddingLeft(),
                        getPaddingTop(),
                        getPaddingLeft() + paddedWidth,
                        position.top
               );
               Rect bottomRect = new Rect(
                        getPaddingLeft(),
                        position.bottom,
                        getPaddingLeft() + paddedWidth,
                        getPaddingTop() + paddedHeight
               );
               if (measureAndCheckMinSize(topRect, startView) &&
                        measureAndCheckMinSize(bottomRect, endView)) {
                  ArrayList rects = new ArrayList();
                  rects.add(topRect);
                  rects.add(bottomRect);
                  return rects;
               }
            } else if (featureBounds.top == 0) { // Vertical layout.
               Rect leftRect = new Rect(
                        getPaddingLeft(),
                        getPaddingTop(),
                        position.left,
                        getPaddingTop() + paddedHeight
               );
               Rect rightRect = new Rect(
                        position.right,
                        getPaddingTop(),
                        getPaddingLeft() + paddedWidth,
                        getPaddingTop() + paddedHeight
               );
               if (measureAndCheckMinSize(leftRect, startView) &&
                        measureAndCheckMinSize(rightRect, endView)) {
                  ArrayList rects = new ArrayList();
                  rects.add(leftRect);
                  rects.add(rightRect);
                  return rects;
               }
            }
      }

      // You previously tried to fit the children and measure them. Since
      // they don't fit, measure again to update the stored values.
      measure(lastWidthMeasureSpec, lastHeightMeasureSpec);
      return null;
   }

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      lastWidthMeasureSpec = widthMeasureSpec;
      lastHeightMeasureSpec = heightMeasureSpec;
   }

   /**
   * Measures a child view and sees if it fits in the provided rect.
   * This method calls [View.measure] on the child view, which updates
   * its stored values for measured width and height. If the view ends up with
   * different values, measure again.
   */
   private boolean measureAndCheckMinSize(Rect rect, View childView) {
      int widthSpec = MeasureSpec.makeMeasureSpec(rect.width(), AT_MOST);
      int heightSpec = MeasureSpec.makeMeasureSpec(rect.height(), AT_MOST);
      childView.measure(widthSpec, heightSpec);
      return (childView.getMeasuredWidthAndState() & MEASURED_STATE_TOO_SMALL) == 0 &&
               (childView.getMeasuredHeightAndState() & MEASURED_STATE_TOO_SMALL) == 0;
   }

   private boolean isValidFoldFeature(DisplayFeature displayFeature) {
      if (displayFeature instanceof FoldingFeature) {
            return SampleToolsKt.getFeaturePositionInViewRect(displayFeature, this, true) != null;
      } else {
            return false;
      }
   }
}