Question

我正在尝试创建这样的布局。我的想法是使用网格布局以水平方式实现设计。我不像这种设计那样创建间距。谁能帮我做到这一点。设计如下。当用户完成级别时。图标从突出显示的红色变为黄色。我们可以使用回收视图还是列表视图？

Answer 1

这个问题很有趣，经过一些测试，不确定我的解决方案是否完美，感觉更像是一种解决方法，但是我能够使用RecyclerView和GridLayoutManager来实现类似的布局。 / p>

首先，创建2个矩形矢量可绘制对象，其中一个用于普通持有者以及突出显示时使用。

像下面的示例：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<padding android:left="2dp"
    android:top="2dp"
    android:right="2dp"
    android:bottom="2dp" />
<corners android:radius="10dp" />
<solid android:color="@color/colorAccent" />
</shape>

在recyclerview持有者的布局中，使用此默认背景在FrameLayout内创建了一个视图。使用android:scaleX和android:scaleY将视图缩小一点，并使用android:rotation="45"获得菱形。请确保使用边距和填充，以便旋转时不会剪切背景

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/view"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:scaleX="0.85"
        android:scaleY="0.85"
        android:layout_margin="24dp"
        android:background="@drawable/diamond_default"
        android:rotation="45" />

    <ImageView
        android:id="@+id/iv_cup"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        android:layout_margin="16dp"
        android:src="@drawable/cup"
        android:scaleType="fitCenter"  />
</FrameLayout>

您可以在ImageView

中展示您的杯子/奖杯

其余设置GridLayoutManager为spanCount 2的水平回收站视图。

接下来，您需要通过扩展RecyclerView.ItemDecoration

创建一个用于装饰间距的类

我使用的示例如下：

public class RecyclerViewItemSpacingDecoration extends RecyclerView.ItemDecoration {

private int spaceLeft;
private int spaceRight;
private int spaceTop;
private int spaceBottom;

public RecyclerViewItemSpacingDecoration(int spaceLeft, int spaceRight, int spaceTop, int spaceBottom) {
    this.spaceLeft = spaceLeft;
    this.spaceRight = spaceRight;
    this.spaceTop = spaceTop;
    this.spaceBottom = spaceBottom;
}

@Override
public void getItemOffsets(Rect outRect, View view,
                           RecyclerView parent, RecyclerView.State state) {
    if(parent.getChildLayoutPosition(view) % 2 == 0) {
        outRect.left = spaceLeft;
        outRect.right = spaceRight;
        outRect.top = spaceTop;
        outRect.bottom = spaceBottom;
    } else {
        outRect.left = 0;
        outRect.right = 0;
        outRect.top = 0;
        outRect.bottom = 0;
    }
  }
}

使用位置％2检查将间距仅添加到gridLayout的一行。然后使用rv.addItemDecoration(new RecyclerViewItemSpacingDecoration(148, -148, 112, -112));将其添加到您的recyclerview中。需要根据您的视图大小调整间距。

您需要添加android:paddingEnd="84dp" android:clipToPadding="false"类似的代码，以防止由于增加了装饰空间而最终导致recyclerview裁剪。

每当需要在onBindViewHolder()中突出显示viewHolder时，您可以设置突出显示的背景并将其放大以从viewHolder.view.setBackground(viewHolder.itemView.getContext().getDrawable(R.drawable.diagonal_highlighted)); viewHolder.view.setScaleX(1.05f); viewHolder.view.setScaleY(1.05f);获得所需的效果。您可以为此缩放添加动画以获得更好的效果。

最终实现以下目标：

希望这个答案在某种程度上有帮助。

Answer 2

您可以使用可绘制的矢量创建这种形状（菱形），并在回收站视图中使用StaggeredGridLayoutManager来创建间距。

如何进行这样的布局设计

2 个答案: