كيفية جذب Android للمشاهدات

تجربة طريقة ComposeAllowed

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المُقترَحة لنظام التشغيل Android. تعرَّف على مراحل إنشاء الرسائل.

مراحل الإنشاء →

يطلب إطار عمل Android من العنصر Activity رسم تنسيقه عندما يتلقّى العنصر Activity التركيز. يعالج إطار عمل Android عملية الرسم، ولكن يجب أن يوفّر العنصر Activity العقدة الجذر للهيكل الهرمي للتنسيق.

يرسم إطار عمل Android عقدة الجذر للتنسيق ويقيس شجرة التنسيق ويرسمها. ويتم التقاطه من خلال التنقّل في الشجرة وعرض كل View الذي يتقاطع مع المنطقة غير الصالحة. يتحمّل كل ViewGroup مسؤولية طلب رسم كلّ من عناصره باستخدام الطريقة draw() ، وتتحمل كل View مسؤولية رسم نفسها. وبما أنّ الشجرة تجتازها مسبقًا، يجذب هذا الإطار الأهل قبل أطفالهم، أي خلف أطفالهم، ويجذب الأشقاء بالترتيب الذي يظهرون فيه في الشجرة.

ملاحظة: لا يرسم إطار العمل عناصر View غير المتوفرة في منطقة صالحة. وسيهتم أيضًا برسم خلفية View نيابةً عنك. يمكنك فرض رسم View من خلال استدعاء invalidate().

يرسم إطار عمل Android التنسيق من خلال عملية تمريرتين: تمريرة القياس وبطاقة التخطيط. ينفِّذ الإطار التوجيهي عملية نقل القياس في measure(int, int) وينفِّذ عملية تنقّل من الأعلى إلى الأسفل في شجرة View. يدفع كل View مواصفات الأبعاد إلى أسفل الشجرة أثناء التكرار. في نهاية دورة القياس، يخزِّن كل View قياساته. يُجري إطار العمل الخطوة الثانية في layout(int, int, int, int) ويكون أيضًا من الأعلى إلى الأسفل. خلال هذه الاجتياز، يكون كل والد مسؤولًا عن وضع جميع أطفاله باستخدام المقاسات المحسوبة في بطاقة القياس.

يتم وصف المرورَين لعملية التنسيق بمزيد من التفصيل في الأقسام التالية.

بدء قياس

عند تنفيذ measure() method في View object، يتم ضبط قيم getMeasuredWidth() و getMeasuredHeight() ، بالإضافة إلى قيم جميع العناصر الفرعية لـ View object. يجب أن تلتزم قيم العرض والارتفاع المقاسة لعنصر View بالقيود المفروضة من قِبل العناصر الوالدة لView. فهذا يساعد في ضمان قبول جميع الآباء لجميع قياسات أطفالهم في نهاية الاختبار.

قد يتصل أحد الوالدَين View بـ measure() أكثر من مرّة من خلال حساب أطفاله. على سبيل المثال، قد يقيس أحد الوالدَين الأطفال مرة واحدة باستخدام أبعاد غير محدّدة لتحديد المقاسات المفضّلة لديهم. إذا كان مجموع المقاسات غير المشروطة للأطفال كبيرًا جدًا أو صغيرًا جدًا، قد يطلب الوالد measure() مرة أخرى باستخدام القيم التي تقيد المقاسات للأطفال.

تستخدِم عملية نقل المقاييس فئتَين للتواصل مع السمات. أمّا الفئة ViewGroup.LayoutParams، فتعني كيفية توصيل عناصر View لأحجامها ومواضعها المفضّلة. تصف فئة القاعدة ViewGroup.LayoutParams العرض والارتفاع المفضّلَين للعنصر View. لكلّ سمة، يمكن تحديد أحد الإجراءَين التاليَين:

• سمة دقيقة.
• MATCH_PARENT، ويعني ذلك أنّ الحجم المفضّل للعنصر View هو حجم العنصر الرئيسي، مطروحًا منه المساحة الفارغة.
• WRAP_CONTENT، ويعني ذلك أنّ المقاس المفضّل للعنصر View هو كبير بما يكفي لتضمين محتواه، بالإضافة إلى المساحة المتروكة.

هناك فئات فرعية من ViewGroup.LayoutParams لفئات فرعية مختلفة من ViewGroup. على سبيل المثال، RelativeLayout لها فئة فرعية خاصة بها من ViewGroup.LayoutParams تتضمّن إمكانية وضع عناصر View الثانوية في الوسط أفقيًا وعموديًا.

يتم استخدام عناصر MeasureSpec لدفع المتطلبات إلى أسفل الشجرة من العنصر الرئيسي إلى العنصر الفرعي. يمكن أن يكون MeasureSpec في أحد الأوضاع الثلاثة التالية:

• UNSPECIFIED: يستخدم الوالد هذا الإجراء لتحديد السمة المستهدَفة للطفل View. على سبيل المثال، قد يُطلِب LinearLayout measure() من الطفل ضبط الارتفاع على UNSPECIFIED والعرض على EXACTLY 240 لمعرفة الطول الذي يريده الطفل View، مع الأخذ في الاعتبار أنّ العرض هو 240 بكسل.
• EXACTLY: يستخدم الوالد هذا الخيار لفرض حجم محدّد على الطفل. ويجب أن يستخدم الطفل هذا الحجم وأن يضمن أن تتناسب جميع العناصر التابعة له مع هذا الحجم.
• AT MOST: يستخدم الوالد هذا الخيار لفرض الحد الأقصى للحجم على حساب الطفل. على الطفل أن يضمن أنّه وجميع سلفه يناسبون هذا الحجم.

بدء عملية تنسيق

لبدء تنسيق، اتصل بالرقم 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)، لأنّ هاتين الطريقتَين final، لذا لا يمكن إلغاؤهما.

يوضّح المثال التالي كيفية إجراء ذلك في الفئة "SegmentLayout" من التطبيق النموذجي WindowManager. إذا كانت السمة SplitLayout تشتمل على طريقتَين ثانويتَين أو أكثر وكانت الشاشة قابلة للطيّ، يتم وضع العرضَين الثانويَين على أيّ من جانبَي الجزء غير المرئي من الصفحة. يوضّح المثال التالي حالة استخدام لإلغاء القياس والتنسيق، ولكن في مرحلة الإنتاج، استخدِم 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;
      }
   }
}