Staggered Triple Stack Visualization

app/src/main/java/com/antsapps/triples/views/FoundTriplesView.java

@@ -40,6 +40,7 @@ public interface OnSlotClickListener {
   private int mCardWidth;
   private int mCardHeight;
   private int mStackDisplacement;
+  private int mStackHorizDisplacement;
   private boolean mPlaceholderClickable = true;
   private final int mPadding;
 
@@ -175,7 +176,7 @@ public Map<Card, Rect> getCardBoundsInWindow(int index, Set<Card> triple) {
 
     for (int i = 0; i < 3; i++) {
       Card card = sortedTriples.get(i);
-      int left = slotLeft + mPadding;
+      int left = slotLeft + mPadding + i * mStackHorizDisplacement;
       int top = slotTop + mPadding + i * mStackDisplacement;
 
       cardBounds.put(
@@ -198,9 +199,13 @@ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     }
 
     mSlotWidth = width / COLUMNS;
-    mCardWidth = mSlotWidth - 2 * mPadding;
+    mCardWidth =
+        (int)
+            ((mSlotWidth - 2 * mPadding)
+                / (1 + 2 * TripleStackView.STACK_HORIZ_DISPLACEMENT_PERCENT));
     mCardHeight = (int) (mCardWidth * CardView.HEIGHT_OVER_WIDTH);
     mStackDisplacement = (int) (mCardHeight * TripleStackView.STACK_DISPLACEMENT_PERCENT);
+    mStackHorizDisplacement = (int) (mCardWidth * TripleStackView.STACK_HORIZ_DISPLACEMENT_PERCENT);
 
     int stackHeight = mCardHeight + 2 * mStackDisplacement;
     mSlotHeight = stackHeight + 2 * mPadding;

app/src/main/java/com/antsapps/triples/views/TripleExplanationView.java

@@ -15,6 +15,7 @@
 import com.antsapps.triples.R;
 import com.antsapps.triples.backend.Card;
 import com.antsapps.triples.cardsview.CardDimensionsProvider;
+import com.antsapps.triples.cardsview.CardView;
 import com.google.common.collect.ImmutableList;
 import java.util.LinkedHashSet;
 import java.util.List;
@@ -24,6 +25,7 @@ public class TripleExplanationView extends FrameLayout {
 
   private Set<Card> mCards = new LinkedHashSet<>();
   private SingleScaledCardView[] mCardViews = new SingleScaledCardView[3];
+  private LinearLayout[] mCardRows = new LinearLayout[3];
   private PropertyIllustrationView[][] mPropertyIcons = new PropertyIllustrationView[3][4];
   private TextView[] mConclusionTexts = new TextView[4];
   private ImageView[] mConclusionTicks = new ImageView[4];
@@ -70,27 +72,23 @@ public TripleExplanationView(@NonNull Context context, @Nullable AttributeSet at
 
     // Card Rows
     for (int i = 0; i < 3; i++) {
-      LinearLayout cardRow = createRow(context);
-      cardRow.setGravity(Gravity.CENTER_VERTICAL);
-      if (i > 0) {
-        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) cardRow.getLayoutParams();
-        params.topMargin = dpToPx(-13);
-      }
+      mCardRows[i] = createRow(context);
+      mCardRows[i].setGravity(Gravity.CENTER_VERTICAL);
 
       mCardViews[i] = new SingleScaledCardView(context);
       mCardViews[i].setLayoutParams(
           new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f));
-      cardRow.addView(mCardViews[i]);
+      mCardRows[i].addView(mCardViews[i]);
 
       for (int j = 0; j < 4; j++) {
         mPropertyIcons[i][j] = new PropertyIllustrationView(context);
         mPropertyIcons[i][j].setLayoutParams(new LinearLayout.LayoutParams(0, dpToPx(24), 1f));
         ((LinearLayout.LayoutParams) mPropertyIcons[i][j].getLayoutParams()).gravity =
             Gravity.CENTER_VERTICAL;
         mPropertyIcons[i][j].setPropertyType(mPropertyTypes[j]);
-        cardRow.addView(mPropertyIcons[i][j]);
+        mCardRows[i].addView(mPropertyIcons[i][j]);
       }
-      table.addView(cardRow);
+      table.addView(mCardRows[i]);
     }
 
     // Conclusion Row
@@ -142,6 +140,49 @@ public TripleExplanationView(@NonNull Context context, @Nullable AttributeSet at
     setCards(new java.util.LinkedHashSet<>());
   }
 
+  @Override
+  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+    int width = MeasureSpec.getSize(widthMeasureSpec);
+    if (width > 0) {
+      updateMargins(width);
+    }
+    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+  }
+
+  private void updateMargins(int totalWidth) {
+    // totalWidth includes padding. The table itself is match_parent inside the layout,
+    // which has 4dp padding on all sides.
+    int padding = dpToPx(4);
+    int tableWidth = totalWidth - 2 * padding;
+
+    // There are 5 columns in each row (1 for card, 4 for properties).
+    int cellWidth = tableWidth / 5;
+    // SingleScaledCardView matches its cell width.
+    int cardWidth = cellWidth;
+    int cardHeight = (int) (cardWidth * CardView.HEIGHT_OVER_WIDTH);
+
+    // Horizontal displacement: 10% of card width, same as TripleStackView
+    int horizDisplacement = (int) (cardWidth * TripleStackView.STACK_HORIZ_DISPLACEMENT_PERCENT);
+    // Vertical displacement: 65% of card height, same as TripleStackView
+    int verticalDisplacement = (int) (cardHeight * TripleStackView.STACK_DISPLACEMENT_PERCENT);
+    int verticalOverlap = cardHeight - verticalDisplacement;
+
+    for (int i = 0; i < 3; i++) {
+      LinearLayout.LayoutParams cardParams =
+          (LinearLayout.LayoutParams) mCardViews[i].getLayoutParams();
+      cardParams.leftMargin = i * horizDisplacement;
+      cardParams.rightMargin = (2 - i) * horizDisplacement;
+      mCardViews[i].setLayoutParams(cardParams);
+
+      if (i > 0) {
+        LinearLayout.LayoutParams rowParams =
+            (LinearLayout.LayoutParams) mCardRows[i].getLayoutParams();
+        rowParams.topMargin = -verticalOverlap;
+        mCardRows[i].setLayoutParams(rowParams);
+      }
+    }
+  }
+
   public void setNaturalCardDimensionsProvider(CardDimensionsProvider cardDimensionsProvider) {
     for (SingleScaledCardView cardView : mCardViews) {
       cardView.setNaturalCardDimensionsProvider(cardDimensionsProvider);

app/src/main/java/com/antsapps/triples/views/TripleStackView.java

@@ -32,6 +32,7 @@
 public class TripleStackView extends View {
 
   static final float STACK_DISPLACEMENT_PERCENT = 0.65f;
+  static final float STACK_HORIZ_DISPLACEMENT_PERCENT = 0.10f;
 
   private Set<Card> mTriple = null;
   private boolean mHighlighted = false;
@@ -45,6 +46,7 @@ public class TripleStackView extends View {
   private int mCardWidth;
   private int mCardHeight;
   private int mStackDisplacement;
+  private int mStackHorizDisplacement;
   private int mPadding;
 
   public TripleStackView(Context context) {
@@ -85,8 +87,9 @@ public void getOutline(View view, android.graphics.Outline outline) {
               float d = view.getResources().getDisplayMetrics().density;
               float cornerRadius = 4 * d * getScaleFactor();
               int totalHeight = mCardHeight + 2 * mStackDisplacement;
+              int totalWidth = mCardWidth + 2 * mStackHorizDisplacement;
               outline.setRoundRect(
-                  mPadding, mPadding, mPadding + mCardWidth, mPadding + totalHeight, cornerRadius);
+                  mPadding, mPadding, mPadding + totalWidth, mPadding + totalHeight, cornerRadius);
             }
           });
       setClipToOutline(true);
@@ -139,9 +142,10 @@ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   }
 
   private void updateDimensions(int width) {
-    mCardWidth = width - 2 * mPadding;
+    mCardWidth = (int) ((width - 2 * mPadding) / (1 + 2 * STACK_HORIZ_DISPLACEMENT_PERCENT));
     mCardHeight = (int) (mCardWidth * CardView.HEIGHT_OVER_WIDTH);
     mStackDisplacement = (int) (mCardHeight * STACK_DISPLACEMENT_PERCENT);
+    mStackHorizDisplacement = (int) (mCardWidth * STACK_HORIZ_DISPLACEMENT_PERCENT);
   }
 
   @Override
@@ -181,7 +185,7 @@ private void drawTripleStack(Canvas canvas) {
         mCardViewCache.put(card, cardView);
       }
       canvas.save();
-      canvas.translate(mPadding, mPadding + i * mStackDisplacement);
+      canvas.translate(mPadding + i * mStackHorizDisplacement, mPadding + i * mStackDisplacement);
       canvas.scale(scale, scale);
       cardView.drawCardContent(canvas, bounds);
       canvas.restore();
@@ -201,11 +205,12 @@ private void drawHighlightBorder(Canvas canvas) {
     float density = getContext().getResources().getDisplayMetrics().density;
     float inset = INSET_DP * density * getScaleFactor();
     int totalHeight = mCardHeight + 2 * mStackDisplacement;
+    int totalWidth = mCardWidth + 2 * mStackHorizDisplacement;
     RectF rect =
         new RectF(
             mPadding + inset,
             mPadding + inset,
-            mPadding + mCardWidth - inset,
+            mPadding + totalWidth - inset,
             mPadding + totalHeight - inset);
     canvas.drawRoundRect(rect, 10, 10, mHighlightPaint);
   }
@@ -214,11 +219,12 @@ private void drawPlaceholder(Canvas canvas) {
     float density = getContext().getResources().getDisplayMetrics().density;
     float inset = INSET_DP * density * getScaleFactor();
     int totalHeight = mCardHeight + 2 * mStackDisplacement;
+    int totalWidth = mCardWidth + 2 * mStackHorizDisplacement;
     RectF rect =
         new RectF(
             mPadding + inset,
             mPadding + inset,
-            mPadding + mCardWidth - inset,
+            mPadding + totalWidth - inset,
             mPadding + totalHeight - inset);
     canvas.drawRoundRect(rect, 10, 10, mPlaceholderPaint);
   }
@@ -234,7 +240,7 @@ public Map<Card, Rect> computeCardBoundsInWindow(Set<Card> triple) {
     List<Card> sorted = getSortedTriple(triple);
     for (int i = 0; i < sorted.size(); i++) {
       Card card = sorted.get(i);
-      int left = loc[0] + mPadding;
+      int left = loc[0] + mPadding + i * mStackHorizDisplacement;
       int top = loc[1] + mPadding + i * mStackDisplacement;
       cardBounds.put(card, new Rect(left, top, left + mCardWidth, top + mCardHeight));
     }