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

Question

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

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

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

我正在使用Unity 5和Unity UI。

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

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

希望在附图中很好地说明了这一点：

我在Unity Answers上问了同样的问题here，但到目前为止还没有答案。在没有使用代码的情况下，在Unity UI中这样的简单任务是否真的可行？

非常感谢你的时间！

Answer 1

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

  

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

为此尝试使用宽高比模式添加宽高比调整组件 - 宽度控制高度

  

名称标签是容器的子标签，应该左边对齐15 xx左边的填充。文本的宽度应该填充容器中的其余空间。

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

Answer 2

我们从未找到过没有代码的方法。我非常不满意在当前的UI系统中无法完成这么简单的任务。 我们确实创建了以下布局脚本来完成这个技巧（坦克让愤怒的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);
}
}