unity学习笔记-scrowview的使用

最近需要实现一个需求,在一个动态生成的界面里,点击不同的图标,scrowview组件能够滑行到对应的位置上,达到准确定位的效果,提高用户的使用体验

实现思路

通控制scrowview>content>rectransform>posY来实现列表的位置定位

具体实现

搭建

scrowview

使用scrowview搭建起来最基本的可以拖动的列表(在界面的一侧),我是删掉了scrowview 的horizontalbar和verticalbar组件的(没啥用)

然后关闭对应的不需要拖动的方向
在scrowview的content里新建(动态生成)几个image或者ui组件就行,然后在content里添加contentfitter的组件(让content可以动态的延伸),以及laygroup组件(有三个,grid,horizontal,vertical)根据自己的需要去添加就好了,然后在laygroup组件里设置一下你需要的spacing间距等配置即可

button

在界面的一侧搭建一组简单的button组件,用来控制scrowview需要展示的位置

代码

思路

每一个button对应的是scrowview里每一个元素对应的位置,越往后的button(对应的元素),在scrowview里的值是需要加上前面的所有元素的值的
定义一个临时变量用来储存scrowview里当前元素和前面所有元素的sizeDelta.y的值之和
循环scrowview容器去获得每一个元素在scrowview里的位置(也即是定义的这个临时变量)
然后将这个值给下面的ForwardToMedalDetail方法即可
ForwardToMedalDetail方法是用dotween插件的DOAnchorPosY方法(其实就是加了个移动过程的动画,体验会丝滑一点)

核心代码

					int 对应的button索引 = 0;
					0的意思是点击这个button,scrowview会移动到最上面,因为他对应的是scrowview里的第一个元素
					float temSizeDelta = 0;
                    for (int i= 0; i< medalTaskMenu2Content.childCount; i++)
                    {
                        if (i< 对应的button索引)
                        {
                            temSizeDelta += scrowview的content(i).GetComponent<RectTransform>().sizeDelta.y;
                        }
                    }
                    ForwardToMedalDetail((temSizeDelta + (你设置的laygroup的spaceing的值* index2)));

	public void ForwardToMedalDetail(float value)
    {
        medalTaskMenu2Content.GetComponent<RectTransform>().DOAnchorPosY(value, 1);
    }

总结

因为是直接在项目里写的,所以很多部分不能展示出来,其中主要是scrowview和button之间我是在代码里对应动态生成的,所以看前面的代码可能会比较懵逼
核心就是要获得scrowview对应元素的值然后赋值给scrowview的content的pos就可以了,估计有的大佬一下就写出来了,我捉摸了一天哈哈哈哈哈哈,加油吧