• NGUI Tutorial 4 ScrollView


    一、createScrollView

    1、First, select the panel you want to be your scroll view and right-click anywhere in the Scene View to bring up the context menu, then choose Attach -> Scroll View.

    2、The last step is to add the UIDragScrollView script to at least one collide. like create sprite then Attach -> box colider. Again, select the collider, right click in the scene view, Attach -> Drag Scroll View

    3 、Now you Can Drag Sprite Only you Drag Sprite.

    二、ScrollView_V2
       ScorllView 创建之后只能在item上拖动才能有效,实现在ScorllView 区域内都能drag item。
    1 Create ->Widget scale the screen size equle to the size of Scroll View
    2 attach the box colider then attach the UIDragScrollView
    3 Now you can drag scroll view item which  contains the ScrollView Rectangle
     注意 Scorll View 和 UIRoot Depth 都有panel组件,所以即使Widget 的depth 高于 item的depth ,

    因为Scroll View Panel 的 depth 高于UIRoot ,所以不用担心item接受不到drag event. 

    三、Drag Item && Grid

      很多时候我们需要在Scroll View中Drag Item 到外面(Attach - > UIDragDropItem ,但是一旦脱出Scorll View 之后就消失不见了,可以再加一个Panel,Attach - > UIDragDropRoot 让其出Scroll View 可见,但是一旦放松鼠标之后还会不见)。

      如果 release 鼠标后 item就要回来,要保证不能超出Scorll View ,这就要用到Grid。

      To use UIGrid, select a panel, right-click anywhere in the scene view, and choose the Gridfrom the [/b]Create menu. You may also simply attach the UIGrid component to any empty game object.

      

      接下来让我们实现这个效果:

      1、select all sprite attach DragDropItem script then we can drag items (like sprite1 ,sprite 2)

      2、create UIGrid ,select all sprite as it's child,you can set Arrangement and Sorting  

        Arrangement: item 排列的方式

        Sorting :item drag 之后的排列,比如 horizontal 可以让item drag 到最后面。

      3 set restriction of all sprite's DragDropItem script to vertically

      4 这样drag item 之后就可以主动回来了。

         这样item 就只能向上拉影响item位置,而不会左右拉影响item位置

       

      

    四、TWO Drag

      看ngui 的 scrollview example 我们就可以看到两个grid,他们之间可以互相拖动物体到对方的grid中。

      让我们来实现个效果:

      注意,如果你的item drag出 scroll view 之后就消失了,那么你需要create -> uipanel, then add DragDropRoot on it,这样你的item 拖出来之后就可见了。上面已经讲过了

      

         1、create gameobject attach boxcolider ,then add DragDopContainer on it ,name it Container1.(这个就保证我们拖出来的在这个区域可见,而不是放松鼠标就消失了

         2、之后使用上面第三步创建的scrollView,copy一个,去掉里面所有的sprite name it ScorllView1.

         3 、将Container1 的 DragDopContainer 中的Reparent Targe reference to  ScrollView1 / Grid (copy 之后的 ScrollView中的子物体)

         4、然后我们就可以拖动第一个scrollview 中的item (sprite) 到这个区域,这个item会自动排列到另一个 Scrollview1中去了。

        

        

         

         5,但是我们还不能拖回去,当然实现的原理是一样的,copy 一个Container,用这个Container来引用第一个ScrollView中的Grid子物体即可。

        

         PS:一般将ScrollView作为Container的子物体。

      如果你将item拖到别的contain上要求平滑过渡到中间你可以如下设置:

      

        

    五、Last 

      如果你觉得还有点问题,我就放个Demo上来吧

      http://yunpan.cn/Q7nXTchHfX6AR  访问密码 c033

      

  • 相关阅读:
    asp.net webapi 无法使用多个post,浏览器不支持put delete,405错误
    vs2019 nable-migrations : 无法将“enable-migrations”项识别为 cmdlet 使用“1”个参数调用“LoadFrom”时发生异常:“ EntityFramew
    javascript 扩展运算符(spread)三个点(...)的作用及用法
    PIE SDK元素的选择和取消选择
    PIE SDK元素的删除
    PIE SDK元素事件的监听
    PIE SDK临时元素的绘制
    PIE SDK图片元素的绘制
    PIE SDK文本元素的绘制
    PIE SDK面元素的绘制
  • 原文地址:https://www.cnblogs.com/chongxin/p/3821118.html
Copyright © 2020-2023  润新知