为图像和标签创建灵活的 UI 容器

Question

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

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

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

我正在使用 Unity 5 和 Unity UI。

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

容器的宽高要灵活
图像是容器的子项，应左对齐，高度应填充容器高度并应保持其纵横比。
名称标签是容器的子项，应与图像左对齐，左填充 15 像素。文本的宽度应填满容器中 space 的其余部分。

希望这在下面的附图中得到很好的说明：

我在 Unity Answers 上问过同样的问题 here，但目前还没有答案。如果不使用代码，这么简单的任务真的不可能在 Unity UI 中完成吗？

非常感谢您的宝贵时间！

Answer 1

看来可以用布局组件来实现。

The image is a child of the container and should be left aligned, the height should fill the container height and should keep its aspect ratio.

为此，尝试使用纵横比模式添加纵横比 Fitter 组件 - 宽度控制高度

The name label is a child of the container and should be left aligned to the image with 15 px left padding. The width of the text should fill the rest of the space in the container.

为此，您只需将标签锚定并拉伸到容器大小，然后在文本组件上使用 BestFit 选项

Answer 2

我们从未找到无需代码即可执行此操作的方法。我很不满意现在的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);
}
}

为图像和标签创建灵活的 UI 容器

Creating a flexible UI contianer for an image and a label

unity3d-gui