UGUI实现关卡选择的滚动图

首先创建如下的UI关系：

其中每个Tollgate都是Image，选一个背景图片。

其中Panel的宽高设置为2000*230，然后每张图(Image)设置为500*230，TopPanel设置为500*230，所以有四张图。

 

给TopPanel添加ScrollRect组件和Mask组件。

ScrollRect的Content拉进Panel作为显示的内容，把Vertical和Horizontal不勾选

新建一个ScrollBar，拖进Hotinzontal scrollbar

 

下一部运行一下，看能不能拖动Scrollbar 横向改变显示内容。

可以的话就可以把Scrollbar隐藏掉，然后用脚本控制scrollbar的Value值。

其中点击左右按钮，就动态改变Value值。

左右按钮记得绑定事件。

改变代码如下：

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

 

public class ScrollRectControl : MonoBehaviour {

 

public Scrollbar scrollbar;

private float scrollbar_TargetValue;

void Start ()

{

scrollbar_TargetValue = 0f;

}

void Update ()

{

if(scrollbar_TargetValue <= 0)

{

scrollbar_TargetValue = 0f;

}

if(scrollbar_TargetValue >= 0.99f)

{

scrollbar_TargetValue = 1f;

}

scrollbar.value = Mathf.MoveTowards(scrollbar.value,scrollbar_TargetValue,Time.deltaTime);

}

public void RightBtnPressed()

{

scrollbar_TargetValue += 0.33f;

}

public void LeftBtnPressed()

{

scrollbar_TargetValue -= 0.33f;

}

}

 

虽然这样做有个小Bug，就是图片不切合，有误差...本来算好是0.25不过误差较大，后面改为0.33也是还有无法消除的误差，这个应该是比例没算好。

 

结果是我把TopPanel的宽高修改为410*230后就OK，不过还是有点小问题咯，不能完全切合，不过将判断条件修改成0.99就可以了。

但是这样子看背景图就有点尴尬了，再稍微调整一下背景图和Tollgate按钮效果才可以比较好。

 

不过没关系，现在手机游戏一般都是通过计算手指拖动的距离来改变Value值，这就有思路实现手机上关卡滚动图拖动效果了吧。