untiy用Scroll View实现划页效果(配图极多)
一、实现的效果
1、使用panel存放所有的内容,用按钮显示和隐藏panel
2、可以鼠标划页和按钮划页
3、一点点小细节
最终差不多这个样子
一、前期准备
1、创建一个panel和一个按钮,用来存放scroll view 和控制panel的显示隐藏,然后调整一下按钮的位置。注意在Hierarchy面板中将panel放在button上面。
2、在panel中创建脚本组件,叫什么名称都行,里面粘贴下面的代码,代码非常简单是控制panel的显示和隐藏,注意脚本名称别忘记修改成你设置的。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 挂载到panel面板
// 设置面板的显示和隐藏
public class PanelSetting : MonoBehaviour
{
bool isShow;
public GameObject Panel;
void Start()
{
isShow = false;
Panel.SetActive(isShow);
}
public void openPanel()
{
if (!isShow) Panel.SetActive(true);
else Panel.SetActive(false);
isShow = !isShow;
}
}
3、回到unity中给panel关联
4、按钮调用panel脚本组件的openPanel方法。
5、完成、测试是否可以显示隐藏panel。
二、添加scroll view和页面按钮
1、在panel下创建scroll view和五个按钮,并调整位置
2、在scroll view 》 viewport 》content 》建立五个image图片作为想要切换的页面,并添加不同的颜色便于区分
3、在content中添加两个组件。
4、可以通过viewport的显示隐藏遮罩来查看排列情况。
5、panel下建立新脚本SliderControl,控制鼠标滑动和按钮点击。
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class SliderControl : MonoBehaviour
{
public Scrollbar m_Scrollbar;
public ScrollRect m_ScrollRect;
private float mTargetValue;
private bool mNeedMove = false;
// 移动速度(常量)
private const float MOVE_SPEED = 1F;
// 平稳时间(常量)
private const float SMOOTH_TIME = 0.2F;
// 移动速度(变量)
private float mMoveSpeed = 0f;
public void OnPointerDown()
{
mNeedMove = false;
}
//鼠标滑动
public void OnPointerUp()
{
// 判断当前位于哪个区间,设置自动滑动至的位置
if (m_Scrollbar.value <= 0.125f)
{
mTargetValue = 0;
}
else if (m_Scrollbar.value <= 0.375f)
{
mTargetValue = 0.25f;
}
else if (m_Scrollbar.value <= 0.625f)
{
mTargetValue = 0.5f;
}
else if (m_Scrollbar.value <= 0.875f)
{
mTargetValue = 0.75f;
}
else
{
mTargetValue = 1f;
}
mNeedMove = true;
mMoveSpeed = 0;
}
//按钮点击
public void OnButtonClick(int value)
{
switch (value)
{
case 1:
mTargetValue = 0;
break;
case 2:
mTargetValue = 0.25f;
break;
case 3:
mTargetValue = 0.5f;
break;
case 4:
mTargetValue = 0.75f;
break;
case 5:
mTargetValue = 1f;
break;
default:
Debug.LogError("!!!!!");
break;
}
mNeedMove = true;
}
void Update()
{
if (mNeedMove)
{
if (Mathf.Abs(m_Scrollbar.value - mTargetValue) < 0.01f)
{
m_Scrollbar.value = mTargetValue;
mNeedMove = false;
return;
}
m_Scrollbar.value = Mathf.SmoothDamp(m_Scrollbar.value, mTargetValue, ref mMoveSpeed, SMOOTH_TIME);
}
}
}
6、
7、Scroll View添加组件Event Trigger》add new…》PointerUP》+号》panel拉入到None(Object)
8、设置五个按钮,注意五个都设置,值分别为12345.
9、此时已经基本完成,可以游戏视图测试一下鼠标拖动和按钮点击是否会滑动,如果有问题,按照上面图片查找是否有错误。
3、收尾工作
收尾无非就是按钮选中颜色和去掉纵向滚动条等,取消panel的默认透明背景色等,都非常简单,就不截图了。
1、关闭纵向滚动条,在scroll view的scroll rect组件取消勾选vertical
2、按钮选中,将五个按钮的selected颜色修改
3、取消背景色,将panel的image颜色透明度修改为0。
4、取消页面背景色,将scroll view的image组件背景色修改为0
5、隐藏横线滚动条,选中Scrollbar Horizontal,拖动到显示区域外。