NGUI 类皇室战争(CR)的滚动列表效果完整实现(一)
前言:CR作为SuperCell的热卖大作,受到很多用户的追捧.
玩法新颖,游戏性突出这些都不说了.它的UI体验也是别具一格令人感觉整个UI交互就像一个辅助生活的APP一样十分好用.
本系列最终效果展示:
[底部Button变换以及控制ScrollView翻页]
[水平滑动具有相册翻页效果同时底部Button响应]
[支持垂直滑动与水平滑动]
今天就来说说如何用NGUI实现CR的横向竖向都支持的滚动列表.
仔细观察CR的UI的滚动效果会发现,当你成功垂直滑动后按住不放,发现只能垂直滑动了,同样当你成功水平滑动后按住不放,后续也只能水平滑动.
那么思路便有了,检测到用户首次按下之后记录下射线检测到的位置,记为:mLastPos,然后当用户企图Drag时,分析onDrag函数传入的参数:Vector2 delta,如果delta.x的绝对值大于delta.y的绝对值那么就启用横向滑动列表,反之则启用垂直滑动列表.
下面搭建一下基础场景:
开始我在每个ScrollView上Add了NGUI的UIGrid以及UIScrollView,为了响应拖动又在每个UISprite添加了UIDragScrollView.
然而这还不能实现我们想要的效果.
观察UIDragScrollView.cs中的源码:
void OnPress (bool pressed)
{
// If the scroll view has been set manually, don't try to find it again
if (mAutoFind && mScroll != scrollView)
{
mScroll = scrollView;
mAutoFind = false;
}
if (scrollView && enabled && NGUITools.GetActive(gameObject))
{
scrollView.Press(pressed);
if (!pressed && mAutoFind)
{
scrollView = NGUITools.FindInParents<UIScrollView>(mTrans);
mScroll = scrollView;
}
}
}注意到,在检测到按入或按出时即onPress函数会调用UIScrollView的Press函数,并把是否按入\按出的信息传入.
再观察UIScrollView.cs中的对应源码,在Press函数中会有这么一段:
if (pressed)
{
// Remove all momentum on press
mMomentum = Vector3.zero;
mScroll = 0f;
// Disable the spring movement
DisableSpring();
// Remember the hit position
mLastPos = UICamera.lastWorldPosition;
// Create the plane to drag along
mPlane = new Plane(mTrans.rotation * Vector3.back, mLastPos);
// Ensure that we're working with whole numbers, keeping everything pixel-perfect
Vector2 co = mPanel.clipOffset;
co.x = Mathf.Round(co.x);
co.y = Mathf.Round(co.y);
mPanel.clipOffset = co;
Vector3 v = mTrans.localPosition;
v.x = Mathf.Round(v.x);
v.y = Mathf.Round(v.y);
mTrans.localPosition = v;
if (!smoothDragStart)
{
mDragStarted = true;
mDragStartOffset = Vector2.zero;
if (onDragStarted != null) onDragStarted();
}
}注意这里
// Remember the hit position
mLastPos = UICamera.lastWorldPosition;这是最关键的,我们希望在按入时相关的逻辑在分析出究竟使用场景中的HScrollView还是VScrollView后再进行处理.
因此我们需要把if(pressed){…}花括号里面的代码剪切走,延后执行.
为了不扰乱NGUI的正常功能,我分别对UIScrollView.cs以及UIDragScrollView.cs做了复制,重命名以及修改.
为了方便,我直接把全部代码放在这里:
(注:剪切走的代码放到了这里:
)
//----------------------------------------------
// NGUI: Next-Gen UI kit
// Copyright © 2011-2015 Tasharen Entertainment
//----------------------------------------------
using UnityEngine;
/// list = new BetterList();
public enum Movement
{
Horizontal,
Vertical,
Unrestricted,
Custom,
}
public enum DragEffect
{
None,
Momentum,
MomentumAndSpring,
}
public enum ShowCondition
{
Always,
OnlyIfNeeded,
WhenDragging,
}
public delegate void OnDragNotification ();
/// ();
Vector4 clip = mPanel.finalClipRegion;
Bounds b = bounds;
float hx = (clip.z == 0f) ? Screen.width : clip.z * 0.5f;
float hy = (clip.w == 0f) ? Screen.height : clip.w * 0.5f;
if (canMoveHorizontally)
{
if (b.min.x < clip.x - hx) return true;
if (b.max.x > clip.x + hx) return true;
}
if (canMoveVertically)
{
if (b.min.y < clip.y - hy) return true;
if (b.max.y > clip.y + hy) return true;
}
return false;
}
}
/// ();
if (mPanel.clipping == UIDrawCall.Clipping.None)
mPanel.clipping = UIDrawCall.Clipping.ConstrainButDontClip;
// Auto-upgrade
if (movement != Movement.Custom && scale.sqrMagnitude > 0.001f)
{
if (scale.x == 1f && scale.y == 0f)
{
movement = Movement.Horizontal;
}
else if (scale.x == 0f && scale.y == 1f)
{
movement = Movement.Vertical;
}
else if (scale.x == 1f && scale.y == 1f)
{
movement = Movement.Unrestricted;
}
else
{
movement = Movement.Custom;
customMovement.x = scale.x;
customMovement.y = scale.y;
}
scale = Vector3.zero;
#if UNITY_EDITOR
NGUITools.SetDirty(this);
#endif
}
// Auto-upgrade
if (contentPivot == UIWidget.Pivot.TopLeft && relativePositionOnReset != Vector2.zero)
{
contentPivot = NGUIMath.GetPivot(new Vector2(relativePositionOnReset.x, 1f - relativePositionOnReset.y));
relativePositionOnReset = Vector2.zero;
#if UNITY_EDITOR
NGUITools.SetDirty(this);
#endif
}
}
[System.NonSerialized] bool mStarted = false;
void OnEnable ()
{
list.Add(this);
if (mStarted && Application.isPlaying) CheckScrollbars();
}
void Start ()
{
mStarted = true;
if (Application.isPlaying) CheckScrollbars();
}
void CheckScrollbars ()
{
if (horizontalScrollBar != null)
{
EventDelegate.Add(horizontalScrollBar.onChange, OnScrollBar);
horizontalScrollBar.alpha = ((showScrollBars == ShowCondition.Always) || shouldMoveHorizontally) ? 1f : 0f;
}
if (verticalScrollBar != null)
{
EventDelegate.Add(verticalScrollBar.onChange, OnScrollBar);
verticalScrollBar.alpha = ((showScrollBars == ShowCondition.Always) || shouldMoveVertically) ? 1f : 0f;
}
}
void OnDisable () { list.Remove(this); }
/// ();
if (sp != null) sp.enabled = false;
}
/// ();
DisableSpring();
Bounds b = bounds;
if (b.min.x == b.max.x || b.min.y == b.max.y) return;
Vector4 clip = mPanel.finalClipRegion;
float hx = clip.z * 0.5f;
float hy = clip.w * 0.5f;
float left = b.min.x + hx;
float right = b.max.x - hx;
float bottom = b.min.y + hy;
float top = b.max.y - hy;
if (mPanel.clipping == UIDrawCall.Clipping.SoftClip)
{
left -= mPanel.clipSoftness.x;
right += mPanel.clipSoftness.x;
bottom -= mPanel.clipSoftness.y;
top += mPanel.clipSoftness.y;
}
// Calculate the offset based on the scroll value
float ox = Mathf.Lerp(left, right, x);
float oy = Mathf.Lerp(top, bottom, y);
// Update the position
if (!updateScrollbars)
{
Vector3 pos = mTrans.localPosition;
if (canMoveHorizontally) pos.x += clip.x - ox;
if (canMoveVertically) pos.y += clip.y - oy;
mTrans.localPosition = pos;
}
if (canMoveHorizontally) clip.x = ox;
if (canMoveVertically) clip.y = oy;
// Update the clipping offset
Vector4 cr = mPanel.baseClipRegion;
mPanel.clipOffset = new Vector2(clip.x - cr.x, clip.y - cr.y);
// Update the scrollbars, reflecting this change
if (updateScrollbars) UpdateScrollbars(mDragID == -10);
}
/// ();
if (sp != null && sp.enabled) return;
mShouldMove = false;
if (onStoppedMoving != null)
onStoppedMoving();
}
}
else
{
// Dampen the momentum
mScroll = 0f;
NGUIMath.SpringDampen(ref mMomentum, 9f, delta);
}
}
#if UNITY_EDITOR
/// 另外一个响应脚本:
//----------------------------------------------
// NGUI: Next-Gen UI kit
// Copyright © 2011-2015 Tasharen Entertainment
//----------------------------------------------
using UnityEngine;
using System.Collections;
using System.Runtime.InteropServices;
using System;
/// ();
hScroll = transform.parent.parent.GetComponent ();
}
/// 今天先到这里,接下来我会继续对效果进行补充和完善.