在開始時(shí)悼凑,我們需要理解在UI中RectTransform中的Pivot筷屡。
Pivot相當(dāng)與一張圖片的中心點(diǎn)
例如:
image.png
圖片位置的軸是以Pivot作為軸的中心,來計(jì)算當(dāng)前圖片的位置信息。
image.png
了解pivot的軸心的位置便于我們?cè)O(shè)置滑動(dòng)UI的邊界
pivot(0,0)
image.png
pivot(1,0)
image.png
pivot(1,1)
image.png
pivot(0,1)
image.png
這里以左右無限滑動(dòng)作為例子
在明白pivot的作用后雇逞,我們需要設(shè)置左邊、右邊的邊界(邊界:當(dāng)圖片到達(dá)邊界時(shí)自動(dòng)移動(dòng)位置)
邊界
image.png
首頁(yè)需要把這些對(duì)象的pivot設(shè)置為(0,0)
左邊界:
LimitLeft=scrollRect.transform.TransformPoint(Vector3.zero).x;
獲取左邊的滾動(dòng)矩形的最左邊的位置
往左邊滑動(dòng)
方法一: cueerntImageLeft=獲取最左邊的圖片的錨點(diǎn)的X軸+圖片與圖片的間距
方法二:Vector3 X=new Vector3 (獲取最左邊的圖片的局部坐標(biāo)+ImgeSize,0,0);
cueerntImageLeft=ScrollRect.transform.TransformPoint(X).x;
if(LimitLeft=>cueerntImageLeft)
{
圖片排序一次茁裙,
把最左邊的圖片替換把右邊
}
右邊界:
Vector3 scrollRectAnchorRight = new Vector3 (獲取scrollRect的寬度+圖片與圖片的間距)塘砸;
LimitRight=scrollRect.transform.TransformPoint(scrollRectAnchorRight )
.x;
往右邊滑動(dòng):
根據(jù)左邊的一樣同理,只不過這次獲取的是最右邊的圖片
if(LimitRight<=cueerntImageRight)
{
圖片排序一次晤锥,
把最右邊的圖片替換把左邊
}
這里需要了解 父級(jí).transform.TransformPoint:
在官方的解釋中:局部左邊轉(zhuǎn)換為世界坐標(biāo)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
public RectTransform content; //滑動(dòng)內(nèi)容
public ScrollRect scrollRect;
private ContentSizeFitter contentSizeFitter;
private HorizontalLayoutGroup horizontalLayoutGroup;
private List<RectTransform> ShowImageList = new List<RectTransform>(); //存儲(chǔ)循環(huán)顯示的Image
private RectTransform scrollRectTransform;
private float Startpoitios; //記錄開始的位置
private float curretPosition; //當(dāng)前的位置信息
private float scrollRectLeft; //滑動(dòng)的參照點(diǎn)
private float ImgeSize = 300; //圖片的大小
public int indeximage; //UI的ID
[HideInInspector] private int count = 20; //顯示顯示的個(gè)數(shù)
private void Awake()
{
InitCompent();
}
void Start()
{
InitContentList();
Invoke("EnablEdcompent", .1f);
}
//克隆
public void InitContentList()
{
foreach (RectTransform rectTransform in content)
{
indeximage++;
ShowImageList.Add(rectTransform);
}
}
public void InitCompent()
{
contentSizeFitter = content.GetComponent<ContentSizeFitter>();
horizontalLayoutGroup = content.GetComponent<HorizontalLayoutGroup>();
scrollRect = scrollRect.GetComponent<ScrollRect>();
//左邊的邊界
scrollRectLeft = scrollRect.transform.TransformPoint(Vector3.zero).x;
// scrollRectLeft = scrollRectTransform.anchoredPosition.x;
scrollRectTransform = scrollRect.GetComponent<RectTransform>();
scrollRect.onValueChanged.AddListener((data) => { infiniteScroll(data); });
}
public void EnablEdcompent()
{
horizontalLayoutGroup.enabled = false;
contentSizeFitter.enabled = false;
}
//無限滑動(dòng)
public void infiniteScroll(Vector2 data)
{
// float Left = content.transform.TransformPoint(ShowImageList[0].localPosition.x + ImgeSize, ShowImageList[0].localPosition.y, 0).x;
float Left = ShowImageList[0].position.x + ImgeSize;
curretPosition = content.GetComponent<RectTransform>().anchoredPosition.x;
float offsetX = curretPosition - Startpoitios;
if (offsetX < 0)
{
if (indeximage + 1 <= count)
{
Startpoitios = curretPosition;
Debug.LogError("A:"+ (Left + ImgeSize)+"B:"+ scrollRectLeft);
if (Left + ImgeSize <= scrollRectLeft)
{
ShowImageList[0].transform.SetAsLastSibling();
ShowImageList[0].anchoredPosition =
new Vector3(ShowImageList[ShowImageList.Count - 1].anchoredPosition.x + horizontalLayoutGroup.spacing + ImgeSize, ShowImageList[0].anchoredPosition.y, 0);
indeximage++;
for (int i = 0; i < ShowImageList.Count; i++)
{
ShowImageList[i] = content.transform.GetChild(i).GetComponent<RectTransform>();
}
content.GetComponent<RectTransform>().sizeDelta += new Vector2(horizontalLayoutGroup.spacing + ImgeSize, 0);
}
}
}
else
{
// Vector3 scrollRectAnchorRight = new Vector3(scrollRectTransform.rect.width + horizontalLayoutGroup.spacing, 0, 0f);
//float scrollRectRight = scrollRect.transform.TransformPoint(scrollRectAnchorRight).x;
float scrollRectRight = scrollRectLeft + scrollRectTransform.rect.width + horizontalLayoutGroup.spacing;
Vector3 childUpRight = new Vector3(ShowImageList[ShowImageList.Count - 1].anchoredPosition.x, ShowImageList[ShowImageList.Count - 1].anchoredPosition.y, 0f);
float childRight = content.transform.TransformPoint(childUpRight).x;
if (childRight >= scrollRectRight + ImgeSize)
{
if (indeximage - ShowImageList.Count == 0)
{
return;
}
ShowImageList[ShowImageList.Count - 1].SetAsFirstSibling();
indeximage--;
ShowImageList[ShowImageList.Count - 1].anchoredPosition = new Vector2(ShowImageList[0].anchoredPosition.x - horizontalLayoutGroup.spacing - ImgeSize, ShowImageList[ShowImageList.Count - 1].anchoredPosition.y);
for (int i = 0; i < ShowImageList.Count; i++)
{
ShowImageList[i] = content.transform.GetChild(i).GetComponent<RectTransform>();
}
content.GetComponent<RectTransform>().sizeDelta -= new Vector2(horizontalLayoutGroup.spacing + ImgeSize, 0);
}
}
Startpoitios = curretPosition;
}
private void OnDisable()
{
indeximage = 0;
if(horizontalLayoutGroup!=null)
horizontalLayoutGroup.enabled = true;
if(contentSizeFitter!=null)
contentSizeFitter.enabled = true;
}
}
Image.gif