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

【问题标题】：Creating a flexible UI contianer for an image and a label为图像和标签创建灵活的 UI 容器
【发布时间】：2015-06-03 09:43:25
【问题描述】：

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

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

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

我正在使用 Unity 5 和 Unity UI。

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

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

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

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

非常感谢您的宝贵时间！

【问题讨论】：

幸运的是，无需代码即可轻松完成。您正在寻找 HorizontalLayoutGroup - 唷！

标签： unity3d-gui

【解决方案1】：

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

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

为此尝试添加具有纵横比模式的纵横比拟合器组件 - 宽度控制高度

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

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

【讨论】：

我尝试过类似的方法。 “布局组件”是指布局组吗？我尝试按照您的建议进行操作，并且几乎可以正常工作。唯一的问题是，当我更改容器高度时，由于外观更合适，图像不会填充高度。我希望图像始终填充容器的高度，保持其纵横比并随着图像变大将标签位置向右推。这有意义吗？谢谢。
只需在 Aspect Ratio Fitter 中设置高度控件宽度，并确保在 Rect 变换中使用高度拉伸和顶部和底部值作为 0
我试过了，但看不出如何将标签以这种方式锚定到图像的右侧。当容器宽度改变时它工作正常，但如果容器的高度改变，标签不会粘在图像上。

【解决方案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);
}
}

【讨论】：