你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

Unity UGUI 效果之多页翻页，多页任意翻页的简单效果实现（示例演示为动态加载多图片实现翻页预览效果）_unity 图片多次翻书展开动画

作者：你好赵伟 | 2024-06-02 02:01:04

踩

unity 图片多次翻书展开动画

Unity UGUI 效果之多页翻页，多页任意翻页的简单效果实现（示例演示为动态加载多图片实现翻页预览效果）

一、简单介绍

UGUI，是Unity自带的 GUI 系统，有别于 NGUI；使用 UGUI 也能制作出比较酷炫的效果。

本节介绍，使用 UGUI 通过代码实现多页翻页的效果，示例是以动态加载图片为例实现的多页翻页效果。

二、实现原理

1、通过展示的总的动态图片个书，每页每页展示图片的数量，分为若干页

2、Button实现前后翻页，Toggle 实现任意翻页

3、关键的逻辑代码是当前页时，代码实现展示的内容

三、注意事项

1、在计算分页总页数的时候，注意整除和右余数的时候，总页数是不一样的

2、前后翻页和任意翻页都要互相更新显示

3、代码 toggle.isOn 的时候，是不会触发对应的监听时间函数，请注意

4、多说一句，在加载图片展示的时候，最好不要一张一张边加载，边展示，这样很有可能会程序崩溃；多图多的话，分批多次加载，一批加载完，展示一批

5、图片加载的路径（pageIconPath = @"D:\Tmp\Images"），是我本机的图片位置，代码中记得更改为自己的图片路径

四、效果预览

五、实现步骤

1、打开 Unity ，新建空工程

2、在场景中布局 UGUI ，PageItem 和 MultiPageToggleItem 会作为预制体，用于动态加载

3、在工程中新建脚本，编辑脚本，实现相关逻辑代码

4、把脚本对应挂载，并赋值

5、运行场景，效果如上

六、关键代码

1、MultiPageShowWrapper.cs


using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;
 
public class MultiPageShowWrapper : MonoBehaviour
{
    #region 常量
 
    // Page Icon 加载路径
    const string pageIconPath = @"D:\Tmp\Images";
 
    // PageItem Resources 加载路径
    const string PageItemPath = @"PageItem";
 
    // MultiPageToggleItem Resources 加载路径
    const string MultiPageToggleItemPath = @"MultiPageToggleItem";
 
    // 每页展示 icon 的数量
    const int ShowPageIconItemCountPerPage = 10;
    #endregion
 
    #region 字段
    // 生成显示放置 PageItem 的父物体
    public Transform PageGrid_Image;
    // 生成显示放置 MultiPageToggleItem 的父物体
    public Transform PageToggleGroup;
    // 左翻页按钮
    public Button LeftPage_Button;
    // 右翻页按钮
    public Button RightPage_Button;
    // 当前页/总页显示文本
    public Text PageCount_Text;
 
 
 
    // PageItem 物体
    GameObject mPageItem;
    // MultiPageToggleItem 物体
    GameObject mMultiPageToggleItem;
 
    // Page ICon 图片路径的列表
    private List<string> mPageIconList = new List<string>();
    
 
 
    private int currentPage = 0;
    private int totalPage = 0;
    private int currentIntiateItem = 0;
    private int PageIconListCount = 0;
 
    #endregion
 
    #region 方法
 
 
 
    #region 其他视情况而定的方法 协程加载指定路径的图片
 
    
    private List<Texture2D> mPageIconTextureList = new List<Texture2D>();
    int loadIndex = 0;
    bool isLoadedEnd = false;
    void InitLoadIconTexture2d()
    {
        mPageIconList = GetWindiowsPCPicturesPath.GetPictutresPathsInTheFilePath(pageIconPath);
 
        for (int i = 0; i < mPageIconList.Count; i++)
        {
            loadIndex++;
            GetTexture(mPageIconList[i], (texture2D) =>
            {
                loadIndex--;
                mPageIconTextureList.Add(texture2D);
            });
        }
    }
    void Start()
    {
        InitLoadIconTexture2d();
    }
 
 
    void Update() {
        if (mPageIconTextureList.Count>0 && loadIndex <=0 && isLoadedEnd == false)
        {
            isLoadedEnd = true;
            StartCoroutine(ShowPageIconList(mPageIconTextureList));
        }
    }
 
    /// <summary>
    /// 请求图片
    /// </summary>
    /// <param name="url">图片地址,like 'http://www.my-server.com/image.png '</param>
    /// <param name="action">请求发起后处理回调结果的委托,处理请求结果的图片</param>
    /// <returns></returns>
    public void GetTexture(string url, Action<Texture2D> actionResult)
    {
        StartCoroutine(_GetTexture(url, actionResult));
    }
 
    /// <summary>
    /// 请求图片
    /// </summary>
    /// <param name="url">图片地址,like 'http://www.my-server.com/image.png '</param>
    /// <param name="action">请求发起后处理回调结果的委托,处理请求结果的图片</param>
    /// <returns></returns>
    IEnumerator _GetTexture(string url, Action<Texture2D> actionResult)
    {
        UnityWebRequest uwr = new UnityWebRequest(url);
        DownloadHandlerTexture downloadTexture = new DownloadHandlerTexture(true);
        uwr.downloadHandler = downloadTexture;
        yield return uwr.SendWebRequest();
        Texture2D t = null;
        if (!(uwr.isNetworkError || uwr.isHttpError))
        {
            t = downloadTexture.texture;
        }
        else
        {
            Debug.Log("下载失败，请检查网络，或者下载地址是否正确 ");
        }
 
        if (actionResult != null)
        {
            actionResult(t);
        }
    }
 
    #endregion
 
    /// <summary>
    /// 加載 PageItem
    /// </summary>
    /// <returns></returns>
    private GameObject LoadAppItem()
    {
        GameObject tmp = Resources.Load<GameObject>(PageItemPath);
        if (tmp == null)
        {
            Debug.LogError("AppItem Load Failure!! AppItemPath may be Error.");
            return null;
        }
 
        return tmp;
    }
 
    /// <summary>
    /// 加載 MultiPageToggleItem
    /// </summary>
    /// <returns></returns>
    private GameObject LoadMultiPageToggleItem()
    {
        GameObject tmp = Resources.Load<GameObject>(MultiPageToggleItemPath);
        if (tmp == null)
        {
            Debug.LogError("AppItem Load Failure!! AppCountToggleItemPath may be Error.");
            return null;
        }
 
        return tmp;
    }
 
    /// <summary>
    /// 展示 Page Icon 列表
    /// 注意 有考虑到数据动态的怎加或减少的情况
    /// </summary>
    /// <param name="pageIconTextureList"></param>
    /// <returns></returns>
    private IEnumerator ShowPageIconList(List<Texture2D> pageIconTextureList)
    {
        yield return new WaitForEndOfFrame();
        PageIconListCount = pageIconTextureList.Count;
        mPageIconTextureList = pageIconTextureList;
 
        #region 当前页数和总页数        
 
        // 设置初始当前页为 1
        currentPage = 1;
        // 判断总数量是否整除每页数量 （有余则总页数+1，整除则不用）
        totalPage = (int)(PageIconListCount / ShowPageIconItemCountPerPage) + (((PageIconListCount % ShowPageIconItemCountPerPage) == 0) ? 0 : 1);
 
        #endregion
 
        #region 底部任意切换页数的UI Toggel 显示生成
 
        // Page Toggle  (底部任意切换页数的UI Toggel 显示生成)
        HideMultiPageToggleItems();
        if (PageToggleGroup.childCount >= totalPage)
        {
            for (int i = 0; i < totalPage; i++)
            {
                MultiPageToggleItem multiPageToggleItem = PageToggleGroup.GetChild(i).GetComponent<MultiPageToggleItem>();
                SetMultiPageToggleItemData(i, multiPageToggleItem);
                multiPageToggleItem.gameObject.SetActive(true);
            }
 
 
        }
        else
        {
 
            for (int i = 0; i < PageToggleGroup.childCount; i++)
            {
                MultiPageToggleItem multiPageToggleItem = PageToggleGroup.GetChild(i).GetComponent<MultiPageToggleItem>();
                SetMultiPageToggleItemData(i, multiPageToggleItem);
                multiPageToggleItem.gameObject.SetActive(true);
            }
 
            // 之前生成不够数量的 multiPageToggleItem 则生成
            for (int i = PageToggleGroup.childCount; i < totalPage; i++)
            {
                MultiPageToggleItem multiPageToggleItem = GameObject.Instantiate(mMultiPageToggleItem).GetComponent<MultiPageToggleItem>();
                SetMultiPageToggleItemData(i, multiPageToggleItem);
            }
        }
 
        #endregion
 
        #region Page Icon 的展示
 
        // Page Item （Page Icon 的展示（原理同上类似））
        currentIntiateItem = PageGrid_Image.childCount;
 
        if (PageIconListCount < ShowPageIconItemCountPerPage)
        {
            // 隱藏所有，保障多餘的不會顯示
            HidePageItems();
        }
 
        // 展示已有的不必重新生成的對象(currentIntiateItem 不會超過ShowAppItemCountPerPage)
        for (int i = 0; i < currentIntiateItem; i++)
        {
            if (PageIconListCount < currentIntiateItem)
            {
                if (i == PageIconListCount)
                {
                    break;
                }
            }
 
            PageItem pageItem = PageGrid_Image.GetChild(i).GetComponent<PageItem>();
            pageItem.gameObject.SetActive(true);
            SetPageItemData(i, pageIconTextureList, pageItem);
        }
 
        // App總數大於生成的 生成的小於 ShowAppItemCountPerPage 個
        // 1、App總數大於 ShowAppItemCountPerPage
        // 2、App總數小於等於 ShowAppItemCountPerPage
        if (PageIconListCount > currentIntiateItem)
        {
            if (ShowPageIconItemCountPerPage < PageIconListCount)
            {
                for (int i = currentIntiateItem; i < ShowPageIconItemCountPerPage; i++)
                {
                    PageItem pageItem = Instantiate(mPageItem).GetComponent<PageItem>();
                    SetPageItemData(i, pageIconTextureList, pageItem);
 
                }
            }
            else
            {
                for (int i = currentIntiateItem; i < PageIconListCount; i++)
                {
                    PageItem pageItem = Instantiate(mPageItem).GetComponent<PageItem>();
                    SetPageItemData(i, pageIconTextureList, pageItem);
 
                }
            }
        }
 
        #endregion
 
        #region 页数和翻页按钮的更新
        //更新頁碼
        PageCount_Text.text = currentPage + "/" + totalPage;
        // 最前頁，把左翻頁隱藏
        LeftPage_Button.gameObject.SetActive(false);
        // 只有一页，右翻页也隐藏
        if (totalPage == 1)
        {
            RightPage_Button.gameObject.SetActive(false);
        }
 
        #endregion
    }
 
 
    #region 左右翻页操作数据显示
 
    /// <summary>
    /// 向前（左）翻頁
    /// </summary>
    private void LeftPageEvent()
    {
 
        // 最前一頁，不能左翻頁        
        if ((currentPage) == 1)
        {
            return;
        }
        else
        {
            // 向左翻頁 右翻頁若隱藏即可顯示
            if (RightPage_Button.gameObject.activeSelf == false)
            {
                RightPage_Button.gameObject.SetActive(true);
            }
 
 
 
            currentPage = currentPage - 1;
            // Toggle 更新 （这里不会主动调用 toggle 事件，所以放心不用重复操作数据）           
            PageToggleGroup.GetChild(currentPage - 1).GetComponent<MultiPageToggleItem>().SetToggleIsOn(true);
 
            // 最前頁，把左翻頁隱藏
            if (currentPage == 1)
            {
 
                LeftPage_Button.gameObject.SetActive(false);
            }
 
            // 刷新展示
            int startInt = ((currentPage - 1) * ShowPageIconItemCountPerPage);
 
            for (int i = 0; i < ShowPageIconItemCountPerPage; i++)
            {
                PageItem pageItem = PageGrid_Image.GetChild(i).GetComponent<PageItem>();
                pageItem.gameObject.SetActive(true);
                SetPageItemData(startInt + i, mPageIconTextureList, pageItem);
            }
 
 
 
        }
 
        //更新頁碼
        PageCount_Text.text = currentPage + "/" + totalPage;
 
    }
 
 
    /// <summary>
    /// 向后（右）翻頁
    /// </summary>
    private void RightPageEvent()
    {
 
        // 最后一頁，不能右翻頁        
        if ((currentPage) == totalPage)
        {
            return;
        }
        else
        {
 
 
 
            // 向右翻頁 左翻頁若隱藏即可顯示
            if (LeftPage_Button.gameObject.activeSelf == false)
            {
                LeftPage_Button.gameObject.SetActive(true);
            }
 
 
            currentPage = currentPage + 1;
            // Toggle 更新 （这里不会主动调用 toggle 事件）            
            PageToggleGroup.GetChild(currentPage - 1).GetComponent<MultiPageToggleItem>().SetToggleIsOn(true);
 
            int startInt = ((currentPage - 1) * ShowPageIconItemCountPerPage);
            // 翻到最后一頁（可能不是10個，要計算展示個數）
            if (currentPage == (totalPage))
            {
                // 隱藏所有，保障多餘的不會顯示
                HidePageItems();
 
                int endInt = PageIconListCount - startInt;
                for (int i = 0; i < endInt; i++)
                {
                    PageItem pageItem = PageGrid_Image.GetChild(i).GetComponent<PageItem>();
                    pageItem.gameObject.SetActive(true);
                    SetPageItemData(startInt + i, mPageIconTextureList, pageItem);
                }
 
                // 把右翻頁隱藏
                RightPage_Button.gameObject.SetActive(false);
            }
            else
            { // 翻到不是最后一頁（10個展示即可）
 
 
                for (int i = 0; i < ShowPageIconItemCountPerPage; i++)
                {
                    PageItem pageItem = PageGrid_Image.GetChild(i).GetComponent<PageItem>();
                    pageItem.gameObject.SetActive(true);
                    SetPageItemData(startInt + i, mPageIconTextureList, pageItem);
                }
            }
 
 
 
        }
 
 
        //更新頁碼
        PageCount_Text.text = currentPage + "/" + totalPage;
    }
 
    #endregion
 
 
    #region Toggle 翻页数据（这里有底部（子） MultiPageToggleItem 发送消息调用）
 
    /// <summary>
    /// Toggle翻页
    /// </summary>
    /// <param name="page"></param>
    public void ToggelPageEvent(int page)
    {
        if (currentPage == page)
        {
            return;
        }
        currentPage = page;
 
 
        // 最前頁，把左翻頁隱藏
        if (currentPage == 1)
        {
 
            LeftPage_Button.gameObject.SetActive(false);
        }
        else
        {
            LeftPage_Button.gameObject.SetActive(true);
        }
        if (currentPage == totalPage)
        {
            // 把右翻頁隱藏
            RightPage_Button.gameObject.SetActive(false);
        }
        else
        {
            RightPage_Button.gameObject.SetActive(true);
        }
 
 
 
        int startInt = ((currentPage - 1) * ShowPageIconItemCountPerPage);
        // 翻到最后一頁（可能不是10個，要計算展示個數）
        if (currentPage == (totalPage))
        {
            // 隱藏所有，保障多餘的不會顯示
            HidePageItems();
 
            int endInt = PageIconListCount - startInt;
            for (int i = 0; i < endInt; i++)
            {
                PageItem pageItem = PageGrid_Image.GetChild(i).GetComponent<PageItem>();
                pageItem.gameObject.SetActive(true);
                SetPageItemData(startInt + i, mPageIconTextureList, pageItem);
            }
 
 
        }
        else
        { // 翻到不是最后一頁（10個展示即可）
 
 
            for (int i = 0; i < ShowPageIconItemCountPerPage; i++)
            {
                PageItem pageItem = PageGrid_Image.GetChild(i).GetComponent<PageItem>();
                pageItem.gameObject.SetActive(true);
                SetPageItemData(startInt + i, mPageIconTextureList, pageItem);
            }
        }
 
        //更新頁碼
        PageCount_Text.text = currentPage + "/" + totalPage;
    }
 
    #endregion
 
    /// <summary>
    /// 设置生成的 pageItem 的数据
    /// </summary>
    /// <param name="i"></param>
    /// <param name="pageIconlist"></param>
    /// <param name="pageItem"></param>
    private void SetPageItemData(int i, List<Texture2D> pageIconlist, PageItem pageItem)
    {
        pageItem.transform.SetParent(PageGrid_Image, false);
        pageItem.transform.localScale = Vector3.one;
        pageItem.IconTexture = pageIconlist[i];
       
    }
 
    /// <summary>
    /// 设置 MultiPageToggleItem 实体数据信息
    /// </summary>
    /// <param name="i"></param>
    /// <param name="multiPageToggleItem"></param>
    private void SetMultiPageToggleItemData(int i, MultiPageToggleItem multiPageToggleItem)
    {
        multiPageToggleItem.transform.SetParent(PageToggleGroup, false);
        multiPageToggleItem.transform.localScale = Vector3.one;
        multiPageToggleItem.Page = i + 1;
        multiPageToggleItem.SetToggleGroup(PageToggleGroup.GetComponent<ToggleGroup>());
 
        // 为了默认第一个 toggle 是 isOn 显示的（预制体要提前 false）
        if (i != 0)
        {
            multiPageToggleItem.SetToggleIsOn(false);
        }
        else
        {
            multiPageToggleItem.SetToggleIsOn(true);
        }
    }
 
    /// <summary>
    /// 隐藏 PageToggleGroup 下所有 MultiPageToggleItem 实体
    /// </summary>
    private void HideMultiPageToggleItems()
    {
        for (int i = 0; i < PageToggleGroup.childCount; i++)
        {
            PageToggleGroup.GetChild(i).gameObject.SetActive(false);
        }
    }
 
    /// <summary>
    /// 隐藏 PageGrid_Image 下所有 PageItem 实体
    /// </summary>
    private void HidePageItems()
    {
        for (int i = 0; i < PageGrid_Image.childCount; i++)
        {
            PageGrid_Image.GetChild(i).gameObject.SetActive(false);
        }
    }
 
    #endregion
 
    #region Unity回调
 
    /// <summary>
    /// Awake this instance.
    /// </summary>
    void Awake()
    {
 
        // 下載 AppItem
        mPageItem = LoadAppItem();
        mMultiPageToggleItem = LoadMultiPageToggleItem();
 
        // 綁定左右翻页的监听事件
        LeftPage_Button.onClick.AddListener(LeftPageEvent);
        RightPage_Button.onClick.AddListener(RightPageEvent);
 
       
    }
 
    
 
    private void OnEnable()
    {
        //StartCoroutine(ShowPageIconList( GetWindiowsPCPicturesPath.GetPictutresPathsInTheFilePath(pageIconPath)));
    }
 
    #endregion
 
 
 
 
}

2、PageItem.cs


using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;
 
public class PageItem : MonoBehaviour
{
    public RawImage Icon_RawImage;
 
    // 字段
    private Texture2D iconTexture;
    private string iconpath;
 
    // 属性
    public Texture2D IconTexture { get => iconTexture;
        set {
            iconTexture = value;
 
            if (Icon_RawImage != null)
            {
                Icon_RawImage.texture = iconTexture;
            }
        }
    }
    public string Iconpath { get => iconpath; set {
 
            iconpath = value;
            GetTexture(iconpath,(texture2d)=> {
                IconTexture = texture2d;
            });
        }
    }
 
 
 
    #region 其他视情况而定的方法 协程加载指定路径的图片 (注意：动态多图加载，这种方式很有可能会让程序奔溃)
 
    /// <summary>
    /// 请求图片
    /// </summary>
    /// <param name="url">图片地址,like 'http://www.my-server.com/image.png '</param>
    /// <param name="action">请求发起后处理回调结果的委托,处理请求结果的图片</param>
    /// <returns></returns>
    public void GetTexture(string url, Action<Texture2D> actionResult)
    {
        StartCoroutine(_GetTexture(url, actionResult));
    }
 
    /// <summary>
    /// 请求图片
    /// </summary>
    /// <param name="url">图片地址,like 'http://www.my-server.com/image.png '</param>
    /// <param name="action">请求发起后处理回调结果的委托,处理请求结果的图片</param>
    /// <returns></returns>
    IEnumerator _GetTexture(string url, Action<Texture2D> actionResult)
    {
        UnityWebRequest uwr = new UnityWebRequest(url);
        DownloadHandlerTexture downloadTexture = new DownloadHandlerTexture(true);
        uwr.downloadHandler = downloadTexture;
        yield return uwr.SendWebRequest();
        Texture2D t = null;
        if (!(uwr.isNetworkError || uwr.isHttpError))
        {
            t = downloadTexture.texture;
        }
        else
        {
            Debug.Log("下载失败，请检查网络，或者下载地址是否正确 ");
        }
 
        if (actionResult != null)
        {
            actionResult(t);
        }
    }
 
    #endregion
 
}

3、MultiPageToggleItem.cs


 
using UnityEngine;
using UnityEngine.UI;
 
public class MultiPageToggleItem : MonoBehaviour
{
    public Toggle MultiPage_Toggle;
 
    private int page;
 
    public int Page { get => page; set => page = value; }
 
    // Start is called before the first frame update
    void Start()
    {
        // 绑定事件
        MultiPage_Toggle.onValueChanged.AddListener((isOn) => {
            if (isOn == true)
            {
                Debug.Log("发送消息 ToggelPageEvent " + Page);
                SendMessageUpwards("ToggelPageEvent", Page);
            }
        });
    }
 
    /// <summary>
    /// 设置 ToggleGroup
    /// </summary>
    /// <param name="toggleGroup"></param>
    public void SetToggleGroup(ToggleGroup toggleGroup)
    {
        MultiPage_Toggle.group = toggleGroup;
    }
 
    /// <summary>
    /// 设置 isON
    /// </summary>
    /// <param name="isOn"></param>
    public void SetToggleIsOn(bool isOn)
    {
        MultiPage_Toggle.isOn = isOn;
    }
 
}

4、GetWindiowsPCPicturesPath.cs


 
 
using System;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using System.IO;
 
using UnityEngine;
 
public class GetWindiowsPCPicturesPath {
 
    public static void DebugPaths() {
        List<string> filePaths = GetPictutresPathsInTheFilePath(@"D:\Tmp\Images");
        for (int i = 0; i < filePaths.Count; i++)
        {
            Debug.Log(filePaths[i]);
        }  
    }
 
    /// <summary>
    /// win 中获取指定文件夹下的图片，不包括子文件夹的图片
    /// </summary>
    /// <param name="path"></param>
    /// <returns>图片路径集合列表</returns>
    public static List<string> GetPictutresPathsInTheFilePath(string filePath)
    {
        List<string> filePaths = new List<string>();
        string imgtype = "*.BMP|*.JPG|*.GIF|*.PNG";
        string[] ImageType = imgtype.Split('|');
        for (int i = 0; i < ImageType.Length; i++)
        {
            //获取指定文件夹下所有的图片路径  
            string[] dirs = Directory.GetFiles(filePath, ImageType[i]);
            for (int j = 0; j < dirs.Length; j++)
            {
                filePaths.Add(dirs[j]);
            }
        }
 
        return filePaths;
    }
}

七、参考工程

下载地址：https://download.csdn.net/download/u014361280/12639147

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/660441

Unity UGUI 效果 之 多页翻页，多页任意翻页的简单效果实现（示例演示为动态加载多图片实现翻页预览效果）_unity 图片多次翻书展开动画

Unity UGUI 效果 之 多页翻页，多页任意翻页的简单效果实现（示例演示为动态加载多图片实现翻页预览效果）

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

六、关键代码

七、参考工程

Unity UGUI 效果之多页翻页，多页任意翻页的简单效果实现（示例演示为动态加载多图片实现翻页预览效果）_unity 图片多次翻书展开动画

Unity UGUI 效果之多页翻页，多页任意翻页的简单效果实现（示例演示为动态加载多图片实现翻页预览效果）