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中创建2个文件夹＆＃34; values-sw360dp＆＃34;和＆＃34; values-sw400dp＆＃34;。在两个文件夹中创建dimens.xml。 values-sw360dp里面的dimens.xml应该有

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

值-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>

Answer 2

你可以试试这样的东西。它需要改进，因为两条线之间的间隙不是恒定的，具体取决于屏幕尺寸：

<强> activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <include
        layout="@layout/partial_squared"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

<强> partial_squared.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include
        layout="@layout/partial_first_row"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <include
        layout="@layout/partial_second_row"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/line_height_80" />
</RelativeLayout>

<强> partial_first_row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView style="@style/InlinedImageView" />

        <ImageView style="@style/InlinedImageView" />

        <ImageView style="@style/InlinedImageView" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <TextView
            style="@style/InlinedTextView"
            android:text="case 1" />

        <TextView
            style="@style/InlinedTextView"
            android:text="case 2" />

        <TextView
            style="@style/InlinedTextView"
            android:text="case 3" />
    </LinearLayout>
</RelativeLayout>

<强> partial_second_row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <Space
            android:layout_width="0dp"
            android:layout_height="15dp"
            android:layout_weight=".5" />

        <ImageView style="@style/InlinedImageView" />

        <ImageView style="@style/InlinedImageView" />

        <Space
            android:layout_width="0dp"
            android:layout_height="15dp"
            android:layout_weight=".5" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <Space
            android:layout_width="0dp"
            android:layout_height="15dp"
            android:layout_weight=".5" />

        <TextView
            style="@style/InlinedTextView"
            android:text="case 1" />

        <TextView
            style="@style/InlinedTextView"
            android:text="case 2" />

        <Space
            android:layout_width="0dp"
            android:layout_height="15dp"
            android:layout_weight=".5" />
    </LinearLayout>

</RelativeLayout>

<强> dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <dimen name="line_height">110dp</dimen>
    <dimen name="line_height_80">72dp</dimen>
    <dimen name="margin_in_between">2dp</dimen>
</resources>

<强> styles.xml

<style name="InlinedImageView">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">@dimen/line_height</item>
    <item name="android:layout_weight">1</item>
    <item name="android:src">@drawable/triangle</item>
    <item name="android:paddingLeft">@dimen/margin_in_between</item>
    <item name="android:paddingRight">@dimen/margin_in_between</item>
</style>

<style name="InlinedTextView">
    <item name="android:gravity">center</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_weight">1</item>
</style>

<强>结果

多个六边形按钮

2 个答案: