Unity Scroll View 元素自动排版，左右翻页实现

主要功能：

1.content自动扩充（仅为初始化时）
2.实现左右按钮点击 翻页查看
3.分页展示，遵循从左往右，从上往下顺序排版

顺序：分页排版展示，从左往右，从上往下顺序
（类似Grid Layout Group 和 Content Size Fitter 组件结合实现，不同在于Grid Layout Group整个content从左往右的排版，此处实现为content分页从左往右排版，例：content下有两页内容，实现了第一页从左往右从上往下顺序排版后，再根据从左往右从上往下顺序排版第二页内容）

代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ContentTestScript : MonoBehaviour
{
/*
     [Header("RectTransform")]//显示到inspector面板
    [Tooltip("RectTransform")] //鼠标放上显示注释

        编辑器模式下添加 Content 下子物体无法自动排版，可更改一下Inspector面板中的任意属性的数值即可重写排版

    */

    [Header("RectTransform")]
    [Tooltip("RectTransform")]
    public RectTransform rect;
    [Header("预制体")]
    [Tooltip("预制体")]
    public GameObject item;
    [Header("左边距离")]
    [Tooltip("左边距离")]
    public float padding_left = 55; //左边距离
    [Header("顶部距离")]
    [Tooltip("顶部距离")]
    public float padding_top = 78; //顶部距离
    [Header("元素宽")]
    [Tooltip("元素宽")]
    public float cell_x = 300; //元素宽
    [Header("元素高")]
    [Tooltip("元素高")]
    public float cell_y = 180; //元素高
    [Header("元素之间左右距离")]
    [Tooltip("元素之间左右距离")]
    public float spacing_x =55; //元素之间左右距离
    [Header("元素之间上下距离")]
    [Tooltip("元素之间上下距离")]
    public float spacing_y =27; //元素之间上下距离
    

    //每页数量
    int perPage = 0;

    int imageCount = 67;
    int row = 3; //行数
    int column = 4;//每页展示的列数

    //当前展示总有多少页
    int pageCount = 0;

    //移动逻辑
    bool isMove = false;
    //移动目标位置
    Vector3 moveTarget = Vector3.zero;
    //当前移动的页数
    int moveindex = 0;
    //每一页的宽度
    float perPageWidth = 0;

    void Start()
    {
        
    }

    void Init() {
        moveindex = 0;
        perPage = row * column;
        imageCount = transform.childCount;
        SetCellSize();
        SetRectPivotAndAnchors();
        SetContentSize();
        ShowImage();
    }
    
    /// <summary>
    /// 当数值发生改变时执行此方法
    /// </summary>
    void OnValidate()
    {
        Init();
    }




    void FixedUpdate () {
        if (isMove)
        {
            if (Vector3.Distance(transform.localPosition, moveTarget) > 10f)
            {
                transform.localPosition = Vector3.Lerp(transform.localPosition, moveTarget, 0.1f);
            }
            else {
                isMove = false;
            }
        }
    }


    /// <summary>
    /// 设置元素大小
    /// </summary>
    void SetCellSize() {

        for (int i = 0; i < imageCount; i++)
        {
            RectTransform newRect= transform.GetChild(i).GetComponent<RectTransform>();

            newRect.sizeDelta = new Vector2(cell_x, cell_y); //设置item大小
        }

    }



    /// <summary>
    /// 设置轴点和锚点 左上
    /// </summary>
    void SetRectPivotAndAnchors() {
        rect.pivot = new Vector2(0, 1); //轴点
        //锚点
        rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, 0, 1);
        rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, 0, 1);
    }

    /// <summary>
    /// 设置content大小
    /// </summary>
    void SetContentSize() {
        pageCount = imageCount / perPage;//取整
        int remain= imageCount % perPage;//取余
        if (remain>0)
        {
            pageCount += 1;
        }
        float hight = padding_top * 2 + cell_y * row + spacing_y * (row - 1);//顶距离+底距离+每行的高+行之间的间距
        float width = padding_left * 2 + pageCount * column * cell_x + (pageCount * column - 1) * spacing_x;
        rect.sizeDelta = new Vector2(width, hight); //设置content大小
    }


    //临时content子物体下标
    int index=0;


    /// <summary>
    /// 加载图片
    /// </summary>
    void ShowImage()
    {
        //content 的中心点为左上角
        //此时content的左上角坐标为（0,0,0），因此第一个图片(左上角)位置为：
        float start_x = padding_left + cell_x / 2;
        float start_y = -(padding_top + cell_y / 2);
       
        index = 0;
        //当前页数 pageCount
        for (int i = 0; i < pageCount; i++)
        {
            for (int m = 0; m < row; m++) //每行 
            {
                for (int n = 0; n < column; n++) //每列
                {
                    if (index >= imageCount)
                    {
                        break;
                    }

                    //每一页的宽度 第二页时宽需要加上第一页的宽度
                    perPageWidth = column * cell_x + spacing_x * column;
                    Vector3 newPos = new Vector3(perPageWidth * i + start_x + (spacing_x + cell_x) * n, start_y - (spacing_y + cell_y) * m, 0);
                    //获取当前图片
                    transform.GetChild(index).localPosition = newPos;
                    index++;
                }
            }
        }
    }

   public void LeftButtonClick() {
        moveindex--;
        if (moveindex >= 0)
        {
            isMove = true;
            moveTarget = new Vector3(-moveindex * perPageWidth + 10, transform.localPosition.y, transform.localPosition.z); //+10为距离判断误差
//Debug.Log(string.Format("<color=yellow>{0}</color>", moveTarget ));
        }
        else {
            moveindex=0;
        }
    }

   public void RightButtonClick()
    {
        moveindex++;
        //Debug.Log(moveindex < pageCount);
        if (moveindex < pageCount)
        {
            Debug.Log("perPageWidth:" + perPageWidth);
            isMove = true;
            moveTarget = new Vector3(-(moveindex * perPageWidth + 10), transform.localPosition.y, transform.localPosition.z); //+10为距离判断误差

//Debug.Log(string.Format("<color=yellow>{0}</color>", moveTarget ));
        }
        else {
            moveindex = pageCount - 1;
        }
    }
}

界面截图：
UI搭建：

UI.png