多个六角形按钮

Question

我正在尝试创建一个带有多个六边形按钮的设计.我能够创建一个单独的六边形按钮,但在我的情况下,我有一个项目列表,需要以下面的设计模式显示.

如果通过这样的列表设计可能RecyclerView会更好.

Answer 1

有点棘手,但这是我如何解决它.有一个像下面的RecyclerView

<android.support.v7.widget.RecyclerView
                android:id="@+id/hexa_rcv"
                android:layout_margin=""@dimen/hexa_dp""
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

在res"values-sw360dp"和"values-sw400dp"中创建2个文件夹.在两个文件夹中创建dimens.xml.values-sw360dp里面的dimens.xml应该有

<resources>
    <dimen name="margin_16_dp">16dp</dimen>
    <dimen name="hexa_dp">25dp</dimen>
</resources>

values-sw400dp里面的dimens.xml应该有

<resources>
    <dimen name="margin_16_dp">16dp</dimen>
    <dimen name="hexa_dp">55dp</dimen>
</resources>

而RecyclerView的一个项目如下所示

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="18sp"
    android:text="ICU_HDW"
    android:background="@drawable/hexagon"/>

接下来有一个获取recyclerView的参考并设置GridaLayoutManager,列大小为3.使每第5项的跨度大小为2(这样第4项将具有跨度大小1和第5项将具有大小2因此两者一起将完成行和下一项将放在下一行)

我在这里使用kotlin你可以转换为java

    RecyclerView hexaRcv = (RecyclerView) findViewById(R.id.hexa_rcv);
    GridLayoutManager manager = new GridLayoutManager(this, 3);
    manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            int size = 1;
            if ((position + 1) % 5 == 0){
                size = 2;
            }
            return size;
        }
    });

    hexaRcv.setLayoutManager(manager);
    hexaRcv.setAdapter(new GridAdapter());

下面是GridAdapter()

public class GridAdapter extends RecyclerView.Adapter<GridAdapter.HexagonHolder> {
@Override
public GridAdapter.HexagonHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.hexa_tv, parent, false);
    return new HexagonHolder(view);
}

@Override
public void onBindViewHolder(GridAdapter.HexagonHolder holder, int position) {
    int pos = position + 1;
    int topMargin = pxFromDp(holder.textView.getContext(), -17);
    int leftMargin = pxFromDp(holder.textView.getContext(), 51); //3 times of 17
    GridLayoutManager.LayoutParams param = (GridLayoutManager.LayoutParams) holder.textView.getLayoutParams();
    if (pos < 4) {
        param.setMargins(0, 0, 0, 0);
    } else if ((pos + 1) % 5 == 0 || pos % 5 == 0) {
        param.setMargins(leftMargin, topMargin, 0, 0);
    } else {
        param.setMargins(0, topMargin, 0, 0);
    }
    holder.textView.setLayoutParams(param);

}

@Override
public int getItemCount() {
    return 17;
}

static class HexagonHolder extends RecyclerView.ViewHolder {
    TextView textView;

    HexagonHolder(View v) {
        super(v);
        textView = v.findViewById(R.id.tv_1);
    }
}

private int pxFromDp(final Context context, final float dp) {
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
}

}

前三项没有保证金.之后,所有项目的上边距为负75(即-75px).每个第4和第5项不仅具有-75的上边距,而且还具有165的左边距.

您可以使用常量或实际根据屏幕宽度计算它们或使用dip.

结果如下

下面是hexagon.xml,将其保存在drawable文件夹中

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="512dp"
    android:height="512dp"
    android:viewportWidth="512"
    android:viewportHeight="512">

    <path
        android:fillColor="#148275"
        android:pathData="M485.291,129.408l-224-128c-3.285-1.877-7.296-1.877-10.581,0l-224,128c-3.328,1.899-5.376,5.44-5.376,9.259v234.667
c0,3.819,2.048,7.36,5.376,9.259l224,128c1.643,0.939,3.456,1.408,5.291,1.408s3.648-0.469,5.291-1.408l224-128
c3.328-1.899,5.376-5.44,5.376-9.259V138.667C490.667,134.848,488.619,131.307,485.291,129.408z" />
</vector>