我认为这将是非常简单的任务,但现在我已经尝试了几个小时,无法弄清楚如何解决这个问题。
我有一个朋友列表,应该在可滚动的列表中显示。每个朋友都有一个个人资料图片和一个与他相关的名字,因此列表中的每个项目都应该显示图片和名称。
问题是我无法弄清楚如何制作一个包含图像和名称标签的灵活容器。我希望能够动态地改变宽度和高度,以便图像和文本相应地缩放和移动。
我正在使用Unity 5和Unity UI。
我想为容器实现以下目标:
希望在附图中很好地说明了这一点:
我在Unity Answers上问了同样的问题here,但到目前为止还没有答案。在没有使用代码的情况下,在Unity UI中这样的简单任务是否真的可行?
非常感谢你的时间!
答案 0 :(得分:0)
看起来可以通过布局组件来实现。
图像是容器的子像素,应该左对齐,高度应该填充容器高度,并保持其纵横比。
为此尝试使用宽高比模式添加宽高比调整组件 - 宽度控制高度
名称标签是容器的子标签,应该左边对齐15 xx左边的填充。文本的宽度应该填充容器中的其余空间。
为此,您可以简单地将标签锚定并拉伸到容器大小,并在Text组件上使用BestFit选项
答案 1 :(得分:0)
我们从未找到过没有代码的方法。我非常不满意在当前的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);
}
}