NGUI 仿android viewapger+listview效果

NGUI 仿android viewapger+listview效果

辞职半个月，打算从cocos2dx转unity。这里吐槽一下触控，已经迷失了发展方向，cocos发展成现在这个不着调的样子，触控难辞其咎。本来是挺好的开源项目，如果能像mycat和jfinal这样的做开源的话，不会落到今天这样的地步。当然这只是个人的愚见，全当牢骚好了。
进入正题，最近在玩《皇室战争》，很喜欢它的UI设计，所以打算在unity模仿。
viewapger+listview效果的效果简而言之就是横向滑动时翻页，竖向滑动时滚动该页的内容。就像微信主界面，横向滑动可以在聊天、通讯录、朋友圈和我这几个界面页里切换，同时当在聊天列表里竖滑的时候可以查看聊天列表的内容。在android里开发可以很简单的实现，用viewapger+listview写好布局文件，自己处理一下滑动冲突，基本上就能实现了。在NGUI中需要自己实现一下触摸消息的分发才可以，下面介绍一下我的思路。
首先定义一个scroll view 来处理横向滑动的翻页。这里提供一下我重载NGUI的俩个脚本：

public class ScrollViewDrageControll : MonoBehaviour
{
/// <summary>
/// Reference to the scroll view that will be dragged by the script.
/// </summary>

public UIScrollView scrollView;

// Legacy functionality, kept for backwards compatibility. Use 'scrollView' instead.
[HideInInspector]
[SerializeField]
UIScrollView draggablePanel;

UIScrollView.Movement curMovement;
UIScrollView.Movement oldMovement = UIScrollView.Movement.Unrestricted;
ScrollViewCenterChild curCenterChild;

Transform mTrans;
UIScrollView mScroll;
bool mAutoFind = false;
bool mStarted = false;

/// <summary>
/// Automatically find the scroll view if possible.
/// </summary>

void OnEnable()
{
mTrans = transform;

// Auto-upgrade
if (scrollView == null && draggablePanel != null)
{
scrollView = draggablePanel;
draggablePanel = null;
}

if (mStarted && (mAutoFind || mScroll == null))
FindScrollView();
}

/// <summary>
/// Find the scroll view.
/// </summary>

void Start()
{
mStarted = true;
GameObject gridObject = GameObject.FindGameObjectWithTag("main_scroll grid");
curCenterChild = gridObject.GetComponentInChildren<ScrollViewCenterChild>();
FindScrollView();
}

/// <summary>
/// Find the scroll view to work with.
/// </summary>

void FindScrollView()
{
// If the scroll view is on a parent, don't try to remember it (as we want it to be dynamic in case of re-parenting)
UIScrollView sv = NGUITools.FindInParents<UIScrollView>(mTrans);

if (scrollView == null || (mAutoFind && sv != scrollView))
{
scrollView = sv;
mAutoFind = true;
}
else if (scrollView == sv)
{
mAutoFind = true;
}
mScroll = scrollView;
}

/// <summary>
/// Create a plane on which we will be performing the dragging.
/// </summary>

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;
}
}

if (!pressed)
{
oldMovement = UIScrollView.Movement.Unrestricted;
}
}

/// <summary>
/// Drag the object along the plane.
/// </summary>

void OnDrag(Vector2 delta)
{
if (delta.x == 0)
{
curMovement = UIScrollView.Movement.Vertical;
}
else
{
curMovement = UIScrollView.Movement.Horizontal;
}
if(oldMovement == UIScrollView.Movement.Unrestricted)
{
oldMovement = curMovement;
}
if (oldMovement != curMovement)
{
return;
}

if (scrollView && NGUITools.GetActive(this))
{
//横向滑动的scroll view
if (scrollView.transform.name == "main_scroll view")
{
if (delta.y == 0)
{
scrollView.Drag();
}
}
else
{
GameObject gameObject = curCenterChild.CurPage;
if (gameObject && scrollView == gameObject.GetComponentInChildren<UIScrollView>())
{
if (delta.x == 0)
{
scrollView.Drag();
}
}
}
}
}

/// <summary>
/// If the object should support the scroll wheel, do it.
/// </summary>

void OnScroll(float delta)
{
if (scrollView && NGUITools.GetActive(this))
scrollView.Scroll(delta);
}

/// <summary>
/// Pan the scroll view.
/// </summary>

public void OnPan(Vector2 delta)
{
if (scrollView && NGUITools.GetActive(this))
scrollView.OnPan(delta);
}
}

ScrollViewCenterChild：用来实现翻页效果并且记录当前页

public class ScrollViewCenterChild : UICenterOnChild
{

//当前页
GameObject curPage;
public GameObject CurPage
{
get { return curPage; }
}
// Use this for initialization
void Start()
{
base.onCenter = new OnCenterCallback(this.getCurPage);
base.Recenter();
}

void getCurPage(GameObject g)
{
curPage = g;
}

}

在UI Root下建立一个UI Widget，在这个UI Widget添加BOX Collider，有几个scroll view 就添加几个 ScrollViewDrageControll脚本，里面的参数添加需要控制的那个scroll view。ScrollViewCenterChild添加到与UI Grid同一个对象上即可。
每一次翻页，ScrollViewCenterChild 都会记录下当前显示的页对象。在滑动的时候，首先判断方向，如果横滑则直接拖动主scroll view，如果竖滑则拖动当前正在显示的scroll view上。
这里不足之处在于方向上的判断过于生硬，在正式的项目上扩大范围才能获得好的体验。
实在不好意思，第一次发文章，图片死活插不进去，底下有例子的链接，里面有代码和资源。需要自己导入NGUI，我用的是3.9.4这版本。
欢迎各位拍砖。
下载地址：
<http://pan.baidu.com/s/1dFjrdnz>