安卓六边形网格

Question

我需要开发一个应用程序，其中按钮是六边形，并且所有按钮都放在一起创建一个网格。考虑到我在Android方面的经验很少，我想知道GridView是否是最佳方法。如果是这样，我该如何将六边形相互放置？

目前我有以下内容：

在main.xml中使用此布局：

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:padding="0dp"
    android:verticalSpacing="0dp"
    android:horizontalSpacing="0dp"
    android:numColumns="4"
    android:columnWidth="0dp"
    android:stretchMode="columnWidth"
    android:gravity="top"
/>

我想要的是这个：

我需要帮助将彼此相连的六边形放在固定的结构中。我已经尝试使用布局值进行排列，但没有成功。TableView是否是更好的方法？非常感谢。

- echedey lorenzo

---

看看这篇非常好的文章，它还有漂亮的Java示例。你可能可以将它们适应到Android上。 - hypercode

HexView-View 是从哪里来的？ - theomega

我在编辑帖子时把应用程序的名称和GridView布局混淆了 - 已经更正。谢谢。 - echedey lorenzo

Answer 1

这里是我在一个应用程序中使用的一些代码（如果你想玩的话，它叫做“Connect3”：)）。这是一个自定义布局类，可以在网格中绘制六边形图像。该网格可以是三角形或倾斜矩形。

代码计算每个imageView的边界（相对于六边形网格原点的像素）然后调用 imageView.layout(left, top, right, bottom) 来设置计算出的边界。这些计算并不难。主要参数是六边形的半径。从那里，总高度，总宽度，有效高度和有效宽度（分别是imageview的高度/宽度或两个相邻视图的左/上边界之间的距离）。然后就是一些简单的for循环来绘制它们。

要使视图可点击，只需在创建它们时设置一个onClickListener。（我将其作为一个类成员，因为这样更容易）。

onMeasure函数只需要计算视图的总宽度和高度，然后使用这些值调用setMeasuredDimension。

所有用于此的图像都只是单个六边形，就像您在操作栏下方看到的那样。请注意，这些图像都是正方形。

    @Override
protected void onLayout(final boolean changed, final int l, final int t, final int r, final int b) {
    Log.d(TAG, "board.onlayout called with size "+mSize+" l: "+l+" r: "+r+" t: "+t+" b: "+b);

    //If the dimensions of the board haven't changed, a redraw isn't necessary. Just update the images of the views instead by calling invalidate().
    if (!changed && !mSizeInvalidated) {
        invalidate();
        return;
    }
    int childCount = getChildCount();

    //Calculate some useful parameters.
    float radius = getResources().getDimension(R.dimen.radius);
    float verticalMargin = -radius / 4;
    float horizontalMargin = ((float) Math.sqrt(3) / 2 - 1) * radius;
    float height = 2 * radius;
    float width = height;
    float effectiveHeight = height + 2 * verticalMargin;
    float effectiveWidth = width + 2 * horizontalMargin;

    float totalHeight=(radius * (3 * mSize + 1)) / 2;
    float totalWidth;
    switch (mGameType) {
        case Connect3Turn.GAME_TYPE_HEX:
            totalWidth = (((float) mSize * 3  - 1)/ 2) * ((float) Math.sqrt(3)) * radius;
            break;
        case Connect3Turn.GAME_TYPE_Y:
        default:
            totalWidth = mSize * ((float) Math.sqrt(3)) * radius;
    }

    LayoutParams layoutParams = new LayoutParams((int) width, (int) height);

    //Code to calculate the offsets for horizontal and vertical centering (this is an option in the .xml file)
    //The GAME_TYPE_HEX creates a tilted rectangular board and GAME_TYPE_Y creates a triangular board.
    float x_offset_row;
    switch (mGameType) {
        case Connect3Turn.GAME_TYPE_Y:
            x_offset_row=(mSize - 1) * effectiveWidth / 2 + horizontalMargin;
            break;
        case Connect3Turn.GAME_TYPE_HEX:
        default:
            x_offset_row=0;
    }
    switch (mCenterHorizontal) {
        //the left side of the grid should be at non-negative coordinates.
        case 1: {
            x_offset_row += Math.max(0,(r-l-totalWidth)/2);
            break;
        }
        case 2: {x_offset_row += Math.max(0,(r-l-totalWidth));
            break;
        }
        case 0:
        default: {
            break;
        }
    }

    //calculate the y_offset for vertical centering.
    float y_offset = 0;
    switch (mCenterVertical) {
        case 1: {
            y_offset = Math.max(0, (b - t - totalHeight) / 2);
            break;
        }
        case 2: {
            y_offset = Math.max(0, (b - t -totalHeight));
            break;
        }
    }


    int cell = 0;
    for (int row = 0; row < mSize; ++row) {
        float x_offset = x_offset_row;
        int rowLength;
        //The row length depends on the board-type we want to draw.
        switch (mGameType){
            case Connect3Turn.GAME_TYPE_HEX:
                rowLength=mSize;
                break;
            case Connect3Turn.GAME_TYPE_Y:
            default:
                rowLength=row+1;
        }
        Log.d(TAG, "Drawing row "+row+" with "+rowLength+" cells.");
        for (int col = 0; col < rowLength; ++col) {
            ImageView v;
            if (cell < childCount) {
                v = (ImageView) getChildAt(cell);
            } else {
                v = new ImageView(super.getContext());
                v.setLayoutParams(layoutParams);
                v.setOnClickListener(onClickListener);
                addViewInLayout(v, cell, v.getLayoutParams(), true);
            }

            //Set the image (color) of the cell and put its index in a tag, so we can retrieve the number of the clicked cell in the onClickListener.
            v.setImageResource(mImageIds[mImages[cell]]);
            v.setTag(cell);

            //Set the bounds of the image, which will automatically be cropped in the available space.
            v.layout((int) x_offset, (int) y_offset, (int) (x_offset + width), (int) (y_offset + height));
            x_offset += effectiveWidth;
            ++cell;
        }
        y_offset += effectiveHeight;
        //The offset of the next row, relative to this one, again depends on the game type.
        switch(mGameType){
            case Connect3Turn.GAME_TYPE_Y:
                x_offset_row -= effectiveWidth / 2;
                break;
            case Connect3Turn.GAME_TYPE_HEX:
                x_offset_row += effectiveWidth / 2;
        }
    }

    //We updated all views, so it is not invalidated anymore.
    mSizeInvalidated=false;
}

- Ragnar

Answer 2

您可以像处理普通网格一样处理它。但是，您需要绘制六边形而不是正方形。

http://img811.imageshack.us/img811/9229/uyje.png

但是，接着你将奇数行移动六边形宽度的一半，以使其与偶数行配对。

http://img822.imageshack.us/img822/2298/e5cq.png

- Jean