fix(core): FlexboxLayout nested views alignment corrections (#10766)

packages/core/ui/layouts/flexbox-layout/index.ios.ts

@@ -67,6 +67,7 @@ class FlexLine {
 	_dividerLengthInMainSize = 0;
 	_crossSize = 0;
 	_itemCount = 0;
+	_goneItemCount = 0;
 	_totalFlexGrow = 0;
 	_totalFlexShrink = 0;
 	_maxBaseline = 0;
@@ -95,6 +96,9 @@ class FlexLine {
 	get itemCount(): number {
 		return this._itemCount;
 	}
+	get layoutVisibleItemCount(): number {
+		return this._itemCount - this._goneItemCount;
+	}
 	get totalFlexGrow(): number {
 		return this._totalFlexGrow;
 	}
@@ -249,6 +253,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 					continue;
 				} else if (child.isCollapsed) {
 					flexLine._itemCount++;
+					flexLine._goneItemCount++;
 					this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
 					continue;
 				}
@@ -276,7 +281,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 				largestHeightInRow = Math.max(largestHeightInRow, child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom);
 
 				if (this._isWrapRequired(child, widthMode, widthSize, flexLine._mainSize, child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight, i, indexInFlexLine)) {
-					if (flexLine.itemCount > 0) {
+					if (flexLine.layoutVisibleItemCount > 0) {
 						this._addFlexLine(flexLine);
 					}
 
@@ -318,11 +323,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 					if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
 						let marginTop = flexLine._maxBaseline - FlexboxLayout.getBaseline(child);
 						marginTop = Math.max(marginTop, lp.effectiveMarginTop);
-						largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + marginTop + lp.effectiveMarginBottom);
+						largestHeightInLine = Math.max(largestHeightInLine, child.getMeasuredHeight() + marginTop + lp.effectiveMarginBottom);
 					} else {
 						let marginBottom = flexLine._maxBaseline - child.getMeasuredHeight() + FlexboxLayout.getBaseline(child);
 						marginBottom = Math.max(marginBottom, lp.effectiveMarginBottom);
-						largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + lp.effectiveMarginTop + marginBottom);
+						largestHeightInLine = Math.max(largestHeightInLine, child.getMeasuredHeight() + lp.effectiveMarginTop + marginBottom);
 					}
 				}
 				flexLine._crossSize = largestHeightInLine;
@@ -359,6 +364,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 				continue;
 			} else if (child.isCollapsed) {
 				flexLine._itemCount++;
+				flexLine._goneItemCount++;
 				this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
 				continue;
 			}
@@ -385,7 +391,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 			largestWidthInColumn = Math.max(largestWidthInColumn, child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight);
 
 			if (this._isWrapRequired(child, heightMode, heightSize, flexLine.mainSize, child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom, i, indexInFlexLine)) {
-				if (flexLine._itemCount > 0) {
+				if (flexLine.layoutVisibleItemCount > 0) {
 					this._addFlexLine(flexLine);
 				}
 
@@ -447,7 +453,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 	}
 
 	private _addFlexLineIfLastFlexItem(childIndex: number, childCount: number, flexLine: FlexLine) {
-		if (childIndex === childCount - 1 && flexLine.itemCount !== 0) {
+		if (childIndex === childCount - 1 && flexLine.layoutVisibleItemCount !== 0) {
 			this._addFlexLine(flexLine);
 		}
 	}
@@ -1012,16 +1018,20 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 					childLeft = paddingLeft + (width - insets.left - insets.right - flexLine._mainSize) / 2.0;
 					childRight = width - paddingRight - (width - insets.left - insets.right - flexLine._mainSize) / 2.0;
 					break;
-				case JustifyContent.SPACE_AROUND:
+				case JustifyContent.SPACE_AROUND: {
-					if (flexLine._itemCount !== 0) {
+					const visibleCount = flexLine.layoutVisibleItemCount;
-						spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / flexLine._itemCount;
+					if (visibleCount !== 0) {
+						spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / visibleCount;
 					}
 					childLeft = paddingLeft + spaceBetweenItem / 2.0;
 					childRight = width - paddingRight - spaceBetweenItem / 2.0;
 					break;
+				}
 				case JustifyContent.SPACE_BETWEEN: {
+					const visibleCount = flexLine.layoutVisibleItemCount;
+					const denominator = visibleCount !== 1 ? visibleCount - 1 : 1.0;
+
 					childLeft = paddingLeft;
-					const denominator = flexLine.itemCount !== 1 ? flexLine.itemCount - 1 : 1.0;
 					spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / denominator;
 					childRight = width - paddingRight;
 					break;
@@ -1156,16 +1166,20 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 					childTop = paddingTop + (height - insets.top - insets.bottom - flexLine._mainSize) / 2.0;
 					childBottom = height - paddingBottom - (height - insets.top - insets.bottom - flexLine._mainSize) / 2.0;
 					break;
-				case JustifyContent.SPACE_AROUND:
+				case JustifyContent.SPACE_AROUND: {
-					if (flexLine._itemCount !== 0) {
+					const visibleCount = flexLine.layoutVisibleItemCount;
-						spaceBetweenItem = (height - insets.top - insets.bottom - flexLine._mainSize) / flexLine.itemCount;
+					if (visibleCount !== 0) {
+						spaceBetweenItem = (height - insets.top - insets.bottom - flexLine._mainSize) / visibleCount;
 					}
 					childTop = paddingTop + spaceBetweenItem / 2.0;
 					childBottom = height - paddingBottom - spaceBetweenItem / 2.0;
 					break;
+				}
 				case JustifyContent.SPACE_BETWEEN: {
+					const visibleCount = flexLine.layoutVisibleItemCount;
+					const denominator = visibleCount !== 1 ? visibleCount - 1 : 1.0;
+
 					childTop = paddingTop;
-					const denominator = flexLine.itemCount !== 1 ? flexLine.itemCount - 1 : 1.0;
 					spaceBetweenItem = (height - insets.top - insets.bottom - flexLine.mainSize) / denominator;
 					childBottom = height - paddingBottom;
 					break;

packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/FlexLine.java

@@ -70,6 +70,9 @@ public class FlexLine {
 	 */
 	int mItemCount;
 
+	/** Holds the count of the views whose visibilities are gone */
+	int mGoneItemCount;
+
 	/**
 	 * @see {@link #getTotalFlexGrow()}
 	 */
@@ -151,6 +154,13 @@ public class FlexLine {
 		return mItemCount;
 	}
 
+	/**
+	 * @return the count of the views whose visibilities are not gone in this flex line.
+	 */
+	public int getLayoutVisibleItemCount() {
+			return mItemCount - mGoneItemCount;
+	}
+
 	/**
 	 * @return the sum of the flexGrow properties of the children included in this flex line
 	 */

packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/FlexboxLayout.java

@@ -583,6 +583,7 @@ public class FlexboxLayout extends LayoutBase {
 					continue;
 				} else if (child.getVisibility() == View.GONE) {
 					flexLine.mItemCount++;
+					flexLine.mGoneItemCount++;
 					addFlexLineIfLastFlexItem(i, childCount, flexLine);
 					continue;
 				}
@@ -627,7 +628,7 @@ public class FlexboxLayout extends LayoutBase {
 				if (isWrapRequired(widthMode, widthSize, flexLine.mMainSize,
 					child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin, lp,
 					i, indexInFlexLine)) {
-					if (flexLine.mItemCount > 0) {
+					if (flexLine.getLayoutVisibleItemCount() > 0) {
 						addFlexLine(flexLine);
 					}
 
@@ -681,17 +682,18 @@ public class FlexboxLayout extends LayoutBase {
 				for (int i = viewIndex; i < viewIndex + flexLine.mItemCount; i++) {
 					View child = getReorderedChildAt(i);
 					LayoutParams lp = (LayoutParams) child.getLayoutParams();
+					
 					if (mFlexWrap != FLEX_WRAP_WRAP_REVERSE) {
 						int marginTop = flexLine.mMaxBaseline - child.getBaseline();
 						marginTop = Math.max(marginTop, lp.topMargin);
 						largestHeightInLine = Math.max(largestHeightInLine,
-							child.getHeight() + marginTop + lp.bottomMargin);
+							child.getMeasuredHeight() + marginTop + lp.bottomMargin);
 					} else {
 						int marginBottom = flexLine.mMaxBaseline - child.getMeasuredHeight() +
 							child.getBaseline();
 						marginBottom = Math.max(marginBottom, lp.bottomMargin);
 						largestHeightInLine = Math.max(largestHeightInLine,
-							child.getHeight() + lp.topMargin + marginBottom);
+							child.getMeasuredHeight() + lp.topMargin + marginBottom);
 					}
 				}
 				flexLine.mCrossSize = largestHeightInLine;
@@ -745,6 +747,7 @@ public class FlexboxLayout extends LayoutBase {
 				continue;
 			} else if (child.getVisibility() == View.GONE) {
 				flexLine.mItemCount++;
+				flexLine.mGoneItemCount++;
 				addFlexLineIfLastFlexItem(i, childCount, flexLine);
 				continue;
 			}
@@ -790,7 +793,7 @@ public class FlexboxLayout extends LayoutBase {
 			if (isWrapRequired(heightMode, heightSize, flexLine.mMainSize,
 				child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin, lp,
 				i, indexInFlexLine)) {
-				if (flexLine.mItemCount > 0) {
+				if (flexLine.getLayoutVisibleItemCount() > 0) {
 					addFlexLine(flexLine);
 				}
 
@@ -862,7 +865,7 @@ public class FlexboxLayout extends LayoutBase {
 	}
 
 	private void addFlexLineIfLastFlexItem(int childIndex, int childCount, FlexLine flexLine) {
-		if (childIndex == childCount - 1 && flexLine.mItemCount != 0) {
+		if (childIndex == childCount - 1 && flexLine.getLayoutVisibleItemCount() != 0) {
 			// Add the flex line if this item is the last item
 			addFlexLine(flexLine);
 		}
@@ -1661,20 +1664,25 @@ public class FlexboxLayout extends LayoutBase {
 					childLeft = paddingLeft + (width - flexLine.mMainSize) / 2f;
 					childRight = width - paddingRight - (width - flexLine.mMainSize) / 2f;
 					break;
-				case JUSTIFY_CONTENT_SPACE_AROUND:
+				case JUSTIFY_CONTENT_SPACE_AROUND: {
-					if (flexLine.mItemCount != 0) {
+					int visibleCount = flexLine.getLayoutVisibleItemCount();
+					if (visibleCount != 0) {
 						spaceBetweenItem = (width - flexLine.mMainSize)
-							/ (float) flexLine.mItemCount;
+							/ (float) visibleCount;
 					}
 					childLeft = paddingLeft + spaceBetweenItem / 2f;
 					childRight = width - paddingRight - spaceBetweenItem / 2f;
 					break;
-				case JUSTIFY_CONTENT_SPACE_BETWEEN:
+				}
+				case JUSTIFY_CONTENT_SPACE_BETWEEN: {
+					int visibleCount = flexLine.getLayoutVisibleItemCount();
+					float denominator = visibleCount != 1 ? visibleCount - 1 : 1f;
+
 					childLeft = paddingLeft;
-					float denominator = flexLine.mItemCount != 1 ? flexLine.mItemCount - 1 : 1f;
 					spaceBetweenItem = (width - flexLine.mMainSize) / denominator;
 					childRight = width - paddingRight;
 					break;
+				}
 				default:
 					throw new IllegalStateException(
 						"Invalid justifyContent is set: " + mJustifyContent);
@@ -1878,20 +1886,25 @@ public class FlexboxLayout extends LayoutBase {
 					childTop = paddingTop + (height - flexLine.mMainSize) / 2f;
 					childBottom = height - paddingBottom - (height - flexLine.mMainSize) / 2f;
 					break;
-				case JUSTIFY_CONTENT_SPACE_AROUND:
+				case JUSTIFY_CONTENT_SPACE_AROUND: {
-					if (flexLine.mItemCount != 0) {
+					int visibleCount = flexLine.getLayoutVisibleItemCount();
+					if (visibleCount != 0) {
 						spaceBetweenItem = (height - flexLine.mMainSize)
-							/ (float) flexLine.mItemCount;
+							/ (float) visibleCount;
 					}
 					childTop = paddingTop + spaceBetweenItem / 2f;
 					childBottom = height - paddingBottom - spaceBetweenItem / 2f;
 					break;
-				case JUSTIFY_CONTENT_SPACE_BETWEEN:
+				}
+				case JUSTIFY_CONTENT_SPACE_BETWEEN: {
+					int visibleCount = flexLine.getLayoutVisibleItemCount();
+					float denominator = visibleCount != 1 ? visibleCount - 1 : 1f;
+
 					childTop = paddingTop;
-					float denominator = flexLine.mItemCount != 1 ? flexLine.mItemCount - 1 : 1f;
 					spaceBetweenItem = (height - flexLine.mMainSize) / denominator;
 					childBottom = height - paddingBottom;
 					break;
+				}
 				default:
 					throw new IllegalStateException(
 						"Invalid justifyContent is set: " + mJustifyContent);
@@ -2085,6 +2098,11 @@ public class FlexboxLayout extends LayoutBase {
 			FlexLine flexLine = mFlexLines.get(i);
 			for (int j = 0; j < flexLine.mItemCount; j++) {
 				View view = getReorderedChildAt(currentViewIndex);
+
+				if (view == null || view.getVisibility() == View.GONE) {
+					continue;
+				}
+
 				LayoutParams lp = (LayoutParams) view.getLayoutParams();
 
 				// Judge if the beginning or middle divider is needed
@@ -2165,6 +2183,11 @@ public class FlexboxLayout extends LayoutBase {
 			// Draw horizontal dividers if needed
 			for (int j = 0; j < flexLine.mItemCount; j++) {
 				View view = getReorderedChildAt(currentViewIndex);
+
+				if (view == null || view.getVisibility() == View.GONE) {
+					continue;
+				}
+
 				LayoutParams lp = (LayoutParams) view.getLayoutParams();
 
 				// Judge if the beginning or middle divider is needed
@@ -2332,11 +2355,20 @@ public class FlexboxLayout extends LayoutBase {
 	}
 
 	/**
-	 * @return the flex lines composing this flex container. This method returns an unmodifiable
+	 * @return the flex lines composing this flex container. This method returns a copy of the
-	 * list. Thus any changes of the returned list are not supported.
+	 * original list excluding a dummy flex line (flex line that doesn't have any flex items in it
+	 * but used for the alignment along the cross axis).
+	 * Thus any changes of the returned list are not reflected to the original list.
 	 */
 	public List<FlexLine> getFlexLines() {
-		return Collections.unmodifiableList(mFlexLines);
+		List<FlexLine> result = new ArrayList<>(mFlexLines.size());
+		for (FlexLine flexLine : mFlexLines) {
+			if (flexLine.getLayoutVisibleItemCount() == 0) {
+				continue;
+			}
+			result.add(flexLine);
+		}
+		return result;
 	}
 
 	/**
@@ -2535,7 +2567,7 @@ public class FlexboxLayout extends LayoutBase {
 
 	private boolean allFlexLinesAreDummyBefore(int flexLineIndex) {
 		for (int i = 0; i < flexLineIndex; i++) {
-			if (mFlexLines.get(i).mItemCount > 0) {
+			if (mFlexLines.get(i).getLayoutVisibleItemCount() > 0) {
 				return false;
 			}
 		}
@@ -2554,7 +2586,7 @@ public class FlexboxLayout extends LayoutBase {
 		}
 
 		for (int i = flexLineIndex + 1; i < mFlexLines.size(); i++) {
-			if (mFlexLines.get(i).mItemCount > 0) {
+			if (mFlexLines.get(i).getLayoutVisibleItemCount() > 0) {
 				return false;
 			}
 		}