用户界面 - 如何使用 Unity UI 滚动到 ScrollRect 中的特定元素



我使用 Unity 5.1 为一款手机游戏构建了一个注册表。为此,我使用了Unity UI组件:ScrollRect + Autolayout(垂直布局)+ 文本(标签)+ 输入字段。这部分工作正常。

但是,当打开键盘时,所选字段位于键盘下方。有没有办法以编程方式滚动窗体以显示所选字段?

我尝试使用ScrollRect.verticalNormalizedPosition并且可以正常工作,但是我无法使所选字段出现在我想要的位置。

感谢您的帮助!

我将给你一个我的代码片段,因为我觉得很有帮助。希望这有帮助!

protected ScrollRect scrollRect;
protected RectTransform contentPanel;
public void SnapTo(RectTransform target)
{
    Canvas.ForceUpdateCanvases();
    contentPanel.anchoredPosition =
            (Vector2)scrollRect.transform.InverseTransformPoint(contentPanel.position)
            - (Vector2)scrollRect.transform.InverseTransformPoint(target.position);
}

没有一个建议对我有用,以下代码确实有效

这是扩展名

using UnityEngine;
using UnityEngine.UI;
namespace BlinkTalk
{
    public static class ScrollRectExtensions
    {
        public static Vector2 GetSnapToPositionToBringChildIntoView(this ScrollRect instance, RectTransform child)
        {
            Canvas.ForceUpdateCanvases();
            Vector2 viewportLocalPosition = instance.viewport.localPosition;
            Vector2 childLocalPosition   = child.localPosition;
            Vector2 result = new Vector2(
                0 - (viewportLocalPosition.x + childLocalPosition.x),
                0 - (viewportLocalPosition.y + childLocalPosition.y)
            );
            return result;
        }
    }
}

这是我如何使用它将内容的直接子项滚动到视图中

    private void Update()
    {
        MyScrollRect.content.localPosition = MyScrollRect.GetSnapToPositionToBringChildIntoView(someChild);
    }

尽管 @maksymiuk 的答案是最正确的,因为它正确地考虑了锚点、枢轴和所有其他因素,这要归功于 InverseTransformPoint() 函数,但它对我来说仍然没有开箱即用 - 对于垂直滚动器,它也在改变它的 X 位置。所以我只是做了一些更改,以检查是否启用了垂直或水平滚动,如果没有,则不更改它们的轴。

public static void SnapTo( this ScrollRect scroller, RectTransform child )
{
    Canvas.ForceUpdateCanvases();
    var contentPos = (Vector2)scroller.transform.InverseTransformPoint( scroller.content.position );
    var childPos = (Vector2)scroller.transform.InverseTransformPoint( child.position );
    var endPos = contentPos - childPos;
    // If no horizontal scroll, then don't change contentPos.x
    if( !scroller.horizontal ) endPos.x = contentPos.x;
    // If no vertical scroll, then don't change contentPos.y
    if( !scroller.vertical ) endPos.y = contentPos.y;
    scroller.content.anchoredPosition = endPos;
}

这是我将选定对象固定到 ScrollRect 中的方式

private ScrollRect scrollRect;
private RectTransform contentPanel;
public void ScrollReposition(RectTransform obj)
{
    var objPosition = (Vector2)scrollRect.transform.InverseTransformPoint(obj.position);
    var scrollHeight = scrollRect.GetComponent<RectTransform>().rect.height;
    var objHeight = obj.rect.height;
    if (objPosition.y > scrollHeight / 2)
    {
        contentPanel.localPosition = new Vector2(contentPanel.localPosition.x,
            contentPanel.localPosition.y - objHeight - Padding.top);
    }
    if (objPosition.y < -scrollHeight / 2)
    {
        contentPanel.localPosition = new Vector2(contentPanel.localPosition.x,
contentPanel.localPosition.y + objHeight + Padding.bottom);
    }
}

我的此问题版本的先决条件:

  • 我要滚动到的element应该是完全可见的(间隙最小)
  • elementscrollRect内容的直接子项
  • 如果element已经完全可见,请保持刀鞘位置
  • 我只关心垂直维度

这是最适合我的(感谢其他灵感):

// ScrollRect scrollRect;
// RectTransform element;
// Fully show `element` inside `scrollRect` with at least 25px clearance
scrollArea.EnsureVisibility(element, 25);

使用此扩展方法:

public static void EnsureVisibility(this ScrollRect scrollRect, RectTransform child, float padding=0)
{
    Debug.Assert(child.parent == scrollRect.content,
        "EnsureVisibility assumes that 'child' is directly nested in the content of 'scrollRect'");
    float viewportHeight = scrollRect.viewport.rect.height;
    Vector2 scrollPosition = scrollRect.content.anchoredPosition;
    float elementTop = child.anchoredPosition.y;
    float elementBottom = elementTop - child.rect.height;
    float visibleContentTop = -scrollPosition.y - padding;
    float visibleContentBottom = -scrollPosition.y - viewportHeight + padding;
    float scrollDelta =
        elementTop > visibleContentTop ? visibleContentTop - elementTop :
        elementBottom < visibleContentBottom ? visibleContentBottom - elementBottom :
        0f;
    scrollPosition.y += scrollDelta;
    scrollRect.content.anchoredPosition = scrollPosition;
}

彼得·莫里斯(Peter Morris)对运动类型为"弹性"的ScrollRects的回答的变体。令我困扰的是,滚动矩形一直在为边缘情况(第一个或最后几个元素)制作动画。希望有用:

/// <summary>
/// Thanks to https://stackoverflow.com/a/50191835
/// </summary>
/// <param name="instance"></param>
/// <param name="child"></param>
/// <returns></returns>
public static IEnumerator BringChildIntoView(this UnityEngine.UI.ScrollRect instance, RectTransform child)
{
    Canvas.ForceUpdateCanvases();
    Vector2 viewportLocalPosition = instance.viewport.localPosition;
    Vector2 childLocalPosition = child.localPosition;
    Vector2 result = new Vector2(
        0 - (viewportLocalPosition.x + childLocalPosition.x),
        0 - (viewportLocalPosition.y + childLocalPosition.y)
    );
    instance.content.localPosition = result;
    yield return new WaitForUpdate();
    instance.horizontalNormalizedPosition = Mathf.Clamp(instance.horizontalNormalizedPosition, 0f, 1f);
    instance.verticalNormalizedPosition = Mathf.Clamp(instance.verticalNormalizedPosition, 0f, 1f);
}

不过,它引入了一帧延迟。

更新:这是一个不引入帧延迟的版本,它还考虑了内容的缩放:

/// <summary>
/// Based on https://stackoverflow.com/a/50191835
/// </summary>
/// <param name="instance"></param>
/// <param name="child"></param>
/// <returns></returns>
public static void BringChildIntoView(this UnityEngine.UI.ScrollRect instance, RectTransform child)
{
    instance.content.ForceUpdateRectTransforms();
    instance.viewport.ForceUpdateRectTransforms();
    // now takes scaling into account
    Vector2 viewportLocalPosition = instance.viewport.localPosition;
    Vector2 childLocalPosition = child.localPosition;
    Vector2 newContentPosition = new Vector2(
        0 - ((viewportLocalPosition.x * instance.viewport.localScale.x) + (childLocalPosition.x * instance.content.localScale.x)),
        0 - ((viewportLocalPosition.y * instance.viewport.localScale.y) + (childLocalPosition.y * instance.content.localScale.y))
    );
    // clamp positions
    instance.content.localPosition = newContentPosition;
    Rect contentRectInViewport = TransformRectFromTo(instance.content.transform, instance.viewport);
    float deltaXMin = contentRectInViewport.xMin - instance.viewport.rect.xMin;
    if(deltaXMin > 0) // clamp to <= 0
    {
        newContentPosition.x -= deltaXMin;
    }
    float deltaXMax = contentRectInViewport.xMax - instance.viewport.rect.xMax;
    if (deltaXMax < 0) // clamp to >= 0
    {
        newContentPosition.x -= deltaXMax;
    }
    float deltaYMin = contentRectInViewport.yMin - instance.viewport.rect.yMin;
    if (deltaYMin > 0) // clamp to <= 0
    {
        newContentPosition.y -= deltaYMin;
    }
    float deltaYMax = contentRectInViewport.yMax - instance.viewport.rect.yMax;
    if (deltaYMax < 0) // clamp to >= 0
    {
        newContentPosition.y -= deltaYMax;
    }
    // apply final position
    instance.content.localPosition = newContentPosition;
    instance.content.ForceUpdateRectTransforms();
}
/// <summary>
/// Converts a Rect from one RectTransfrom to another RectTransfrom.
/// Hint: use the root Canvas Transform as "to" to get the reference pixel positions.
/// </summary>
/// <param name="from"></param>
/// <param name="to"></param>
/// <returns></returns>
public static Rect TransformRectFromTo(Transform from, Transform to)
{
    RectTransform fromRectTrans = from.GetComponent<RectTransform>();
    RectTransform toRectTrans = to.GetComponent<RectTransform>();
    if (fromRectTrans != null && toRectTrans != null)
    {
        Vector3[] fromWorldCorners = new Vector3[4];
        Vector3[] toLocalCorners = new Vector3[4];
        Matrix4x4 toLocal = to.worldToLocalMatrix;
        fromRectTrans.GetWorldCorners(fromWorldCorners);
        for (int i = 0; i < 4; i++)
        {
            toLocalCorners[i] = toLocal.MultiplyPoint3x4(fromWorldCorners[i]);
        }
        return new Rect(toLocalCorners[0].x, toLocalCorners[0].y, toLocalCorners[2].x - toLocalCorners[1].x, toLocalCorners[1].y - toLocalCorners[0].y);
    }
    return default(Rect);
}

如果有人在寻找平滑的滚动(使用 lerp)。

[SerializeField]
private ScrollRect _scrollRectComponent; //your scroll rect component
[SerializeField]
RectTransform _container; //content transform of the scrollrect
private IEnumerator LerpToChild(RectTransform target)
{
    Vector2 _lerpTo = (Vector2)_scrollRectComponent.transform.InverseTransformPoint(_container.position) - (Vector2)_scrollRectComponent.transform.InverseTransformPoint(target.position);
    bool _lerp = true;
    Canvas.ForceUpdateCanvases();
    while(_lerp)
    {
        float decelerate = Mathf.Min(10f * Time.deltaTime, 1f);
        _container.anchoredPosition = Vector2.Lerp(_scrollRectComponent.transform.InverseTransformPoint(_container.position), _lerpTo, decelerate);
        if (Vector2.SqrMagnitude((Vector2)_scrollRectComponent.transform.InverseTransformPoint(_container.position) - _lerpTo) < 0.25f)
        {
            _container.anchoredPosition = _lerpTo;
            _lerp = false;
        }
        yield return null;
    }
}

简单且完美运行

            var pos = 1 - ((content.rect.height / 2 - target.localPosition.y) / content.rect.height);
            scrollRect.normalizedPosition = new Vector2(0, pos);

是的,这可以使用编码垂直滚动,请尝试以下代码:

//Set Scrollbar Value - For Displaying last message of content
Canvas.ForceUpdateCanvases ();
verticleScrollbar.value = 0f;
Canvas.ForceUpdateCanvases ();

当我开发聊天功能时,这段代码对我来说工作正常。

我对提供的答案有问题,所以我写了自己的答案,这不关心您的滚动设置(锚点、枢轴、水平、垂直、目标不是内容转换的直接子级等)。我通过将本地空间中的目标子矩形转换为视口并检查它是否突出视口来做到这一点。如果是这样,请将内容向该方向移动足够多,以便目标子项完全可见。这比一些总是将目标捕捉到滚动顶部的答案要好。

public static void KeepChildInScrollViewPort(ScrollRect scrollRect, RectTransform child, Vector2 margin)
{
    Canvas.ForceUpdateCanvases();
    // Get min and max of the viewport and child in local space to the viewport so we can compare them.
    // NOTE: use viewport instead of the scrollRect as viewport doesn't include the scrollbars in it.
    Vector2 viewPosMin = scrollRect.viewport.rect.min;
    Vector2 viewPosMax = scrollRect.viewport.rect.max;
    Vector2 childPosMin = scrollRect.viewport.InverseTransformPoint(child.TransformPoint(child.rect.min));
    Vector2 childPosMax = scrollRect.viewport.InverseTransformPoint(child.TransformPoint(child.rect.max));
    childPosMin -= margin;
    childPosMax += margin;
    Vector2 move = Vector2.zero;
    // Check if one (or more) of the child bounding edges goes outside the viewport and
    // calculate move vector for the content rect so it can keep it visible.
    if (childPosMax.y > viewPosMax.y) {
        move.y = childPosMax.y - viewPosMax.y;
    }
    if (childPosMin.x < viewPosMin.x) {
        move.x = childPosMin.x - viewPosMin.x;
    }
    if (childPosMax.x > viewPosMax.x) {
        move.x = childPosMax.x - viewPosMax.x;
    }
    if (childPosMin.y < viewPosMin.y) {
        move.y = childPosMin.y - viewPosMin.y;
    }
    // Transform the move vector to world space, then to content local space (in case of scaling or rotation?) and apply it.
    Vector3 worldMove = scrollRect.viewport.TransformDirection(move);
    scrollRect.content.localPosition -= scrollRect.content.InverseTransformDirection(worldMove);
}

宽度表示滚动矩形中孩子的宽度(假设所有孩子的宽度都相同),间距表示孩子之间的空间,索引表示你想要到达的目标元素

public float getSpecificItem (float pWidth, float pSpacing,int pIndex) {
    return (pIndex * pWidth) - pWidth + ((pIndex - 1) * pSpacing);
}

垂直调整:

[SerializeField]
private ScrollRect _scrollRect;
private void ScrollToCurrentElement()
{
    var siblingIndex = _currentListItem.transform.GetSiblingIndex();
    float pos = 1f - (float)siblingIndex / _scrollRect.content.transform.childCount;
    if (pos < 0.4)
    {
        float correction = 1f / _scrollRect.content.transform.childCount;
        pos -= correction;
    }
    _scrollRect.verticalNormalizedPosition = pos;
} 

这是我为解决这个问题而创建的内容。将此行为放在可通过控制器 UI 导航选择的每个按钮上。它支持完全嵌套的子对象。它只支持垂直滚动矩形,但可以很容易地适应水平滚动。

    using UnityEngine;
    using System;
    using UnityEngine.EventSystems;
    using UnityEngine.UI;
    
    namespace Legend
    {
        public class ScrollToOnSelect: MonoBehaviour, ISelectHandler
        {
            ScrollRect scrollRect;
            RectTransform target;
    
            void Start()
            {
                scrollRect = GetComponentInParent<ScrollRect>();
                target = (RectTransform)this.transform;
            }
    
            Vector3 LocalPositionWithinAncestor(Transform ancestor, Transform target)
            {
                var result = Vector3.zero;
                while (ancestor != target && target != null)
                {
                    result += target.localPosition;
                    target = target.parent;
                }
                return result;
            }
    
            public void EnsureScrollVisible()
            {
                Canvas.ForceUpdateCanvases();
    
                var targetPosition = LocalPositionWithinAncestor(scrollRect.content, target);
                var top = (-targetPosition.y) - target.rect.height / 2;
                var bottom = (-targetPosition.y) + target.rect.height / 2;
    
                var topMargin = 100; // this is here because there are headers over the buttons sometimes
    
                var result = scrollRect.content.anchoredPosition;
                if (result.y > top - topMargin)
                    result.y = top - topMargin;
                if (result.y + scrollRect.viewport.rect.height < bottom)
                    result.y = bottom - scrollRect.viewport.rect.height;
    
                //Debug.Log($"{targetPosition} {target.rect.size} {top} {bottom} {scrollRect.content.anchoredPosition}->{result}");
    
                scrollRect.content.anchoredPosition = result;
            }
    
            public void OnSelect(BaseEventData eventData)
            {
                if (scrollRect != null)
                    EnsureScrollVisible();
            }
        }
    }

让我也添加我的东西,仅适用于垂直滚动:

    public static void FitScrollAreaToChildVertically(this ScrollRect sr, RectTransform selected, float scrollAreaUpperBoundMargin = -10, float scrollAreaLowerBoundMargin = -10)
    {
        var selectedRectTransform = selected;
        Canvas.ForceUpdateCanvases();
        var objPosition = (Vector2)sr.transform.InverseTransformPoint(selectedRectTransform.position);
        var scrollHeight = sr.GetComponent<RectTransform>().rect.height;
        var objHeight = selectedRectTransform.rect.height;
        float ubound = scrollHeight / 2 - scrollAreaUpperBoundMargin;
        float dbound = -scrollHeight / 2 + scrollAreaLowerBoundMargin;
        float itemdbound = objPosition.y - objHeight / 2;
        float itemubound = objPosition.y + objHeight / 2;
        if (itemdbound < dbound)
            sr.content.anchoredPosition += new Vector2(0, dbound - itemdbound);
        else if (itemubound > ubound)
            sr.content.anchoredPosition += new Vector2(0, -(itemubound - ubound));
    }

相关内容

  • 没有找到相关文章