Java环境下如何计算3×16网格中被点击元素的ArrayList索引

Got it, let's work through this problem step by step. You've got a 3-column × 16-row grid stored in an ArrayList (using row-first order, which is the most common approach for such layouts), and you need to map a click coordinate to the corresponding index in the list. Here's how to do it in Java:

The core logic breaks down to three key steps:

1. Convert the click's coordinate to the column and row it falls into within the grid.
2. Validate that the click is actually on the grid (not outside its bounds).
3. Use the row-first ordering rule to calculate the final ArrayList index: index = row * number_of_columns + column.

A quick note: Your stated grid height (200) is way smaller than the total height of 16 elements (16×67=1072)—this might be a typo, but we’ll build the solution around your given values and call out how to adjust if needed.

1. Get the Relative Click Coordinate #

First, ensure you’re using coordinates relative to the grid container’s top-left corner. For example, in Swing, MouseEvent.getX() and getY() give you this directly if the listener is attached to the grid’s parent panel.

2. Validate Click Bounds #

If the click falls outside the grid’s edges (x < 0, x ≥ 1100, y < 0, y ≥ 200), return an invalid index like -1 since it doesn’t hit any element.

3. Calculate Column & Row Indices #

Since your grid’s total width (1100) is much larger than the sum of element widths (3×69=207), we’ll assume evenly distributed gaps between elements (and around the grid edges). We’ll do the same for vertical spacing (even if the height numbers seem off).

4. Compute the ArrayList Index #

Use the row-first formula to convert your calculated row and column into the final index.

public int getClickedGridIndex(int relativeX, int relativeY) {
    // Grid configuration (match your provided values)
    final int TOTAL_COLUMNS = 3;
    final int TOTAL_ROWS = 16;
    final int ELEMENT_WIDTH = 69;
    final int ELEMENT_HEIGHT = 67;
    final int GRID_WIDTH = 1100;
    final int GRID_HEIGHT = 200;

    // Check if click is outside the grid's bounds
    if (relativeX < 0 || relativeX >= GRID_WIDTH || relativeY < 0 || relativeY >= GRID_HEIGHT) {
        return -1; // Signal invalid click
    }

    // Calculate evenly distributed horizontal gaps (edges + between elements)
    int totalHorizontalGap = GRID_WIDTH - (TOTAL_COLUMNS * ELEMENT_WIDTH);
    int horizontalGap = totalHorizontalGap / (TOTAL_COLUMNS + 1);

    // Find the column index
    int column = (relativeX - horizontalGap) / (ELEMENT_WIDTH + horizontalGap);
    // Fix edge cases where rounding might push column out of bounds
    column = Math.min(column, TOTAL_COLUMNS - 1);
    if (column < 0) return -1;

    // Calculate vertical gaps (handle negative total gap if grid height is too small)
    int totalVerticalGap = GRID_HEIGHT - (TOTAL_ROWS * ELEMENT_HEIGHT);
    int verticalGap = totalVerticalGap > 0 ? totalVerticalGap / (TOTAL_ROWS + 1) : 0;

    // Find the row index
    int row = (relativeY - verticalGap) / (ELEMENT_HEIGHT + verticalGap);
    // Fix edge cases for row
    row = Math.min(row, TOTAL_ROWS - 1);
    if (row < 0) return -1;

    // Convert row/column to ArrayList index (row-first order)
    return row * TOTAL_COLUMNS + column;
}

• Row-First Assumption: This code assumes your ArrayList is filled row by row (all elements of row 0 first, then row 1, etc.). If your list uses column-first ordering, swap the formula to index = column * TOTAL_ROWS + row.
• Gap Customization: If your layout uses non-even spacing (e.g., no edge gaps, or custom margins), adjust the gap calculation to match your actual UI setup.
• Height Typo Fix: If your grid height was a typo (e.g., it should be 1072 instead of 200), simply update GRID_HEIGHT to the correct value—the rest of the logic will work as intended.

内容的提问来源于stack exchange，提问作者Creep Death