1. 建一个Image,设置宽高比为300*400,并添加Scroll Rect 和 Mask组件,并修改名称为ViewPager。
2. 在ViewPager下添加 horizontal Layout Group 和 Scrollbar
Scrollbar: 用于控制滑动,位置在Layout正下方,不会显示
horizontal Layout Group: 作为item的父布局,设置宽高比为1500*400,然后新建5个Image,大小都为300*400。
反选ViewPager中Mask组件后,可以看到item的情况如下:
3. 修改参数
1. 将layout于ViewPager中Scroll Rect的Content属性绑定
2. 将Scrollbar与ViewPager中Horizontal Scrollbar绑定,反选Vertical属性
4. 挂载脚本
脚本内容如下:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class CustomViewPage : 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;
}
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);
}
}
}
5. 在ViewPager上,添加Event Trigger组件,并且添加Pointer Up时间监听
以上就是左右步骤啦!!
不过item的点击事件,有点小瑕疵,我尝试了新建5个Button,但是Button的点击事件和滑动会产生冲突,正常ScrollView中添加Item,并且添加点击事件,是不会出现这种情况的,这里出现冲突的原因,应该是挂载Event Trigger的原因。
正在想解决办法,头疼啊。。。
网友评论