如何进行这样的布局设计

Question

我正在尝试创建这样的布局。我的想法是使用网格布局以水平方式来实现设计。我不知道如何在这个设计中创建间距。任何人都可以帮助我做到这一点。设计在下面给出。当用户完成级别。图标从红色突出显示变为黄色突出显示。我们可以使用回收视图或列表视图吗？

Answer 1

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

首先，创建 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具有此默认背景的a 内创建了一个视图。使用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

休息设置水平recyclerview与GridLayoutManager具有spanCount2。

接下来需要创建一个类，通过扩展来装饰间距 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;
    }
  }
}

使用 position % 2 check 只为 gridLayout 的一行添加间距。然后使用rv.addItemDecoration(new RecyclerViewItemSpacingDecoration(148, -148, 112, -112));间距将其添加到您的回收站视图中，需要根据您的视图大小进行调整。

android:paddingEnd="84dp" android:clipToPadding="false"由于添加了装饰空间，您需要添加类似的代码以防止在最后进行 recyclerview 剪辑。

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

最终实现这样的事情：

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