1

我认为这将是一项非常简单的任务，但现在我已经尝试了几个小时，无法弄清楚如何解决这个问题。

我有一个应该显示在可滚动列表中的朋友列表。每个朋友都有与其相关联的个人资料图像和名称，因此列表中的每个项目都应显示图像和名称。

问题是我不知道如何制作一个包含图像和名称标签的灵活容器。我希望能够动态更改宽度和高度，以便图像和文本相应地缩放和移动。

我正在使用 Unity 5 和 Unity UI。

我想为容器实现以下目标：

  • 容器的宽度和高度应该是灵活的
  • 图像是容器的子图像，应左对齐，高度应填满容器高度并保持其纵横比。
  • 名称标签是 contianer 的子标签，应与图像左对齐，左填充为 15 px。文本的宽度应填满容器中的其余空间。

希望在下面的附图中能很好地说明这一点：

在此处输入图像描述

我在 Unity Answers 上问了同样的问题，但到目前为止还没有答案。如果不使用代码，那么在 Unity UI 中是否真的无法完成如此简单的任务？

非常感谢您的时间！

4

2 回答 2

0

看起来可以通过布局组件来实现。

图像是容器的子图像，应左对齐，高度应填满容器高度并保持其纵横比。

为此，请尝试使用 Aspect 模式添加 Aspect Ratio Fitter 组件 - Width Controls Height

在此处输入图像描述

名称标签是容器的子元素，应与图像左对齐，左填充为 15 像素。文本的宽度应填满容器中的其余空间。

为此，您可以简单地将标签锚定并拉伸到容器大小，并在 Text 组件上使用 BestFit 选项

在此处输入图像描述

于 2015-06-03T12:44:39.230 回答
0

我们从来没有找到一种不用代码就能做到这一点的方法。我很不满意，这么简单的任务在目前的 UI 系统中无法完成。我们确实创建了以下布局脚本来解决问题（感谢 Angry Ant 的帮助）。该脚本附加到文本标签：

using UnityEngine;
using UnityEngine.EventSystems;

[RequireComponent (typeof (RectTransform))]
public class IndentByHeightFitter : UIBehaviour,        UnityEngine.UI.ILayoutSelfController
{
public enum Edge
{
    Left,
    Right
}

[SerializeField] Edge m_Edge = Edge.Left;
[SerializeField] float border;

public virtual void SetLayoutHorizontal ()
{
    UpdateRect ();
}


public virtual void SetLayoutVertical() {}

#if UNITY_EDITOR
protected override void OnValidate ()
{
    UpdateRect ();
}
#endif


protected override void OnRectTransformDimensionsChange ()
{
    UpdateRect ();
}


Vector2 GetParentSize ()
{
    RectTransform parent = transform.parent as RectTransform;

    return parent == null ? Vector2.zero : parent.rect.size;
}


RectTransform.Edge IndentEdgeToRectEdge (Edge edge)
{
    return edge == Edge.Left ? RectTransform.Edge.Left : RectTransform.Edge.Right;
}


void UpdateRect ()
{
    RectTransform rect = (RectTransform)transform;
    Vector2 parentSize = GetParentSize ();

    rect.SetInsetAndSizeFromParentEdge (IndentEdgeToRectEdge (m_Edge), parentSize.y + border, parentSize.x - parentSize.y);
}
}
于 2015-11-11T08:42:09.923 回答