uGUI練習(七) Drag And Drop

本文轉載自查看原文 2014-09-16 09:58 10024 uGUI/ uGUI/Unity2D

練習目標

練習UI的拖放操作

一、相關組件

EventTrigger
Canvas Group
ScrollRect
Mask
Scrollbar

二、拖放練習

1、創建一個Panel，命名Panel1,添加EventTrigger組件，稍稍改一下Panel的顏色

2、Panel1下創建一個Text,輸入”Test Draggable\n object”,設置字體顏色及Text超出處理

DragDropScene.cs代碼

3、在 uGUI練習(五) Draggable Object一文中，已經大概了解uGUI的EventSystem，需要繼承三個事件接口，接下來我們創建一個DragDropScene.cs，代碼如下

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class DragDropScene : MonoBehaviour,IDragHandler,IPointerDownHandler,IPointerUpHandler 
{
    public void OnDrag(PointerEventData eventData)
    {
        GetComponent<RectTransform>().pivot.Set(0,0);
        transform.position=Input.mousePosition;
    }
    
    public void OnPointerDown(PointerEventData eventData)
    {
        transform.localScale=new Vector3(0.7f,0.7f,0.7f);
    }
    
    public void OnPointerUp(PointerEventData eventData)
    {
        transform.localScale=new Vector3(1f,1f,1f);
    }
}

4、上面的代碼就是按下，拖動，抬起這三個事件的處理.把這個腳本綁定在Panel1，按Ctrl+P 運行游戲，在Game視圖我們就可以拖動Panel1了.

5、選中創建好的Panel1，按Ctrl+D Copy 幾個Panel,更改成不同的顏色，如下圖所示：

6、在上面的步驟中，我們創建了幾個Panel1,並且給它們都綁定了DragDropScene.cs，但還沒有實現Drop的事件；

接下來，我們創建一個Panel,命名DropPanel，用來作停放Panel的容器

7、在DropPanel下創建一個Panel，命名Grid,並給它添加Grid Layout Group和Canvas Group組件

8、為了讓我們知道Drop是可以停放的，我們在Grid下創建兩個Panel，同樣的給它們綁定DragDropScene.cs，如下圖：

9、接下來就是把Panel，拖動並停放在DropPanel下，如下圖所示

修改事件代碼

10、打開DragDropScene.cs腳本，添加一行，並修改OnPointerDown(),OnPointUp( )

[SerializeField] GameObject grid=null,rootCanvas=null;

public void OnPointerDown(PointerEventData eventData)
{
    transform.localScale=new Vector3(0.7f,0.7f,0.7f);
    transform.parent=rootCanvas.transform;
}

public void OnPointerUp(PointerEventData eventData)
{
    transform.localScale=new Vector3(1f,1f,1f);

    RaycastHit2D hit = Physics2D.Raycast(Input.mousePosition,-Vector2.up);
    if (hit.collider != null) {
        //如果射線檢測到的gameobject為grid，就把當前Panel放在grid節點下
        if(hit.collider.gameObject.name=="Grid")
            transform.parent=grid.transform;
    }
}

上面的代碼，當鼠標抬起時，如果是在Grid的上方，就把當前Panel設置在Grid下，鼠標按下時，設置當前Panel的Parent為rootCanvas11、為DragDropScene設置參數值：