如何进行这样的布局设计

Posted

技术标签:

【中文标题】如何进行这样的布局设计【英文标题】:How to make a layout design like this 【发布时间】:2020-05-05 13:01:23 【问题描述】:

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

【问题讨论】:

您为实现这一目标做了什么尝试? 【参考方案1】:

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

首先,创建了 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 holder 的布局中,使用此默认背景在 FrameLayout 内创建了一个视图。使用android:scaleXandroid:scaleY 将视图缩小一点,使用android:rotation="45" 实现菱形。一定要使用边距和填充,这样背景就不会在旋转时被剪裁

<FrameLayout
    android:layout_
    android:layout_ >

    <View
        android:id="@+id/view"
        android:layout_
        android:layout_
        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_
        android:layout_
        android:padding="16dp"
        android:layout_margin="16dp"
        android:src="@drawable/cup"
        android:scaleType="fitCenter"  />
</FrameLayout>

您可以在ImageView 中展示您的奖杯/奖杯

使用GridLayoutManagerspanCount 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;
    
  

使用 position % 2 check 只为 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); 获得所需的效果您可以为此缩放添加动画以获得更好的效果。

最终实现如下:

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

【讨论】:

【参考方案2】:

您可以使用矢量可绘制对象创建这种形状(菱形),并使用带有回收器视图的StaggeredGridLayoutManager 创建间距。

【讨论】:

以上是关于如何进行这样的布局设计的主要内容,如果未能解决你的问题,请参考以下文章

PADS Layout 如何高效进行PCB Layout设计

Plotly-Dash:如何使用 dash 引导组件设计布局?

[转]PCB布局和布线经验

企业网站首页设计常见的6种布局方式

设计magento 2主题的布局

使用带有 GuidedStepSupportFragment 的自定义 XML 布局进行智能电视 UI 设计