UGUI之布局的使用

unity的LayoutGroup分為三種，

Horizontal Layout Group（水平布局）：對象填充總個父物體，水平會填充

Vertical Layout Group（垂直布局）：垂直（高度）會填充

Grid Layout Group （網格布局）：以表格的形式布局，不會填充父物體

 比如：垂直布局和水平布局效果

 

Grid Layout Group

  如果單純的時候用滑動效果可以使用Scroll Rect組件即可。但使用布局就要使用布局控件

Grid Layout Group是網格布局，先看看一個效果

其實滑動依然是用的Scroll Rect。這個就不說了。這里主要說布局。

Spacing 表示 cell之間的距離。

Cell表示格子的寬度和和高度

Start Axis 表示布局方式，有橫向和縱向

Child Alignment 表示對齊方式。

 

注意Layout Group節點下面的所有cell節點都是不能修改Rect Transform的。因為cell可能下面會放很多圖片，這樣我們會用個空的gameObject來當父節點。

 

 

 

但你仔細看。會發現。這個不是整塊滑動的。比如手機屏幕左右滑動，是滑動區域判斷的。沒有划過來的時候。會退回去。像這樣

 

這里可以根據Scroll Rect組件的normalizedPosition屬性來判斷。這是一個Vector2坐標。是滑動中XY的值

horizontalNormalizedPosition：水平的值

verticalNormalizedPosition：垂直的值

需要在拖動結束后判斷。需要繼承

IBeginDragHandler，IEndDragHandler。引用命名空間：using UnityEngine.EventSystems;

具體代碼：

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

public class newScroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
    ScrollRect rect;

    //頁面：0，1，2  索引從0開始
    //每夜占的比列：0/2=0  1/2=0.5  2/2=1
    float[] page = { 0, 0.5f, 1 };

    //滑動速度
    public float smooting = 4;

    //滑動的起始坐標
    float targethorizontal = 0;

    //是否拖拽結束
    bool isDrag = false;

    // Use this for initialization
    void Start()
    {
        rect = transform.GetComponent<ScrollRect>();
    }

    // Update is called once per frame
    void Update()
    {
        //如果不判斷。當在拖拽的時候要也會執行插值，所以會出現閃爍的效果
        //這里只要在拖動結束的時候。在進行插值
        if (!isDrag)
        {
            rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, Time.deltaTime * smooting);
        }
    }

    /// <summary>
    /// 拖動開始
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
    }

    /// <summary>
    /// 拖拽結束
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        isDrag = false;

        //    //拖動停止滑動的坐標 
        //    Vector2 f = rect.normalizedPosition;
        //    //水平  開始值是0  結尾值是1  [0,1]
        //    float h = rect.horizontalNormalizedPosition;
        //    //垂直
        //    float v = rect.verticalNormalizedPosition;




        float posX = rect.horizontalNormalizedPosition;
        int index = 0;
        //假設離第一位最近
        float offset = Mathf.Abs(page[index] - posX);
        for (int i = 1; i < page.Length; i++)
        {
            float temp = Mathf.Abs(page[i] - posX);
            if (temp < offset)
            {
                index = i;

                //保存當前的偏移量
                //如果到最后一頁。反翻頁。所以要保存該值，如果不保存。你試試效果就知道
                offset = temp;
            }
        }

        /*
         因為這樣效果不好。沒有滑動效果。比較死板。所以改為插值
         */
        //rect.horizontalNormalizedPosition = page[index];


        targethorizontal = page[index];
    }
}

 

像這種布局。內容是動態添加的。所以內容的多少是不確定的。很多時候是用u3d自帶的ContentSizeFitter。這個組件可以自動計算寬度

 

那么問題來了。當總數不是頁數的倍數，那么horizontalNormalizedPosition是不正確的。比如：有2頁。一頁5條

當只有6條。是不是也是2頁呢？。

所以又得必須動態計算了。

這里寫了一個適用於其他場合的類

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

class UIScrollItemTips : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
    //頁面：0，1，2  索引從0開始
    //每夜占的比列：0/2=0  1/2=0.5  2/2=1
    public List<float> pageArray;

    //public List<float> PageArray
    //{
    //    // get { return pageArray; }
    //    set { pageArray = value; }
    //}
    private List<Toggle> toggleArray;

    public List<Toggle> ToggleArray
    {
        //get { return toggleArray; }
        set { toggleArray = value; }
    }
    public int pageCount;//多少頁

    public int pageIndex = 0;//:當前頁碼
    private ScrollRect rect;
    //滑動速度
    public float smooting;

    public float Smooting
    {
        get { return smooting; }
        set { smooting = value; }
    }

    private int pageSize;

    /// <summary>
    /// 一頁顯示多少條
    /// </summary>
    public int setPageSize
    {
        get { return pageSize; }
        set { pageSize = value; }
    }

    private int sumRecord;

    /// <summary>
    /// 總記錄數
    /// </summary>
    public int setSumRecord
    {
        get { return sumRecord; }
        set { sumRecord = value; }
    }

    private List<GameObject> pageList = new List<GameObject>();

    //滑動的起始坐標
    public float targethorizontal = 0;

    //是否拖拽結束
    public bool isDrag = false;


    public GameObject root;

    private int updateInfo;

    public int UpdateInfo
    {
        //get { return updateInof; }
        set { Init(); }
    }

    //private static UIScrollItem instance;
    //public static UIScrollItem Instance
    //{
    //    get { return instance; }
    //    //set { ObjectPools.instance = value; }
    //}

    void Init()
    {
        UnInit();
        //pageSize = 8;
        //setSumRecord = 54;
        smooting = 4;
        rect = transform.GetComponent<ScrollRect>();
        pageArray = new List<float>();
        toggleArray = new List<Toggle>();
        targethorizontal = 0;
        rect.horizontalNormalizedPosition = 0;
        //instance = this; //單列

        pageCount = Convert.ToInt32(Math.Ceiling((double)sumRecord / pageSize)); //sumRecord為總記錄數

        //Debug.LogError(pageCount);

        //求出每頁的臨界角，頁索引從0開始
        int num = pageCount - 1;
        if (num == 0) num = 1;
        for (int i = 0; i < pageCount; i++)
        {
            //Debug.LogError(i + "/" + num + "==" + (float)i / (float)num);
            pageArray.Add((float)i / (float)num);
        }

        if (root != null)
        {
            ToggleGroup group = root.GetComponent<ToggleGroup>();

            for (int i = 0; i < pageCount; i++)
            {
                //獲取頁碼預設體
                GameObject pageItem = U3DResources.SpawnUI("Item_New");
                pageList.Add(pageItem);
                pageItem.transform.SetParent(root.transform);
                pageItem.transform.localScale = new Vector3(1, 1, 1);
                pageItem.transform.localRotation = new Quaternion();
                pageItem.transform.localPosition = Vector3.one;

                Toggle toogle = pageItem.transform.Find("page").GetComponent<Toggle>();
                toogle.group = group;
                toggleArray.Add(toogle);
            }


        }

        //Debug.LogError(pageSize);

        //rect.horizontalNormalizedPosition = 0;

        //不管怎樣默認都是顯示最后一頁，同理，頁碼頁碼也是。已在生成頁碼時處理
        //初始化不需要顯示滑動效果。直接賦值即可
        //targethorizontal = pageArray[pageArray.Count - 1];
        //rect.horizontalNormalizedPosition = pageArray[pageArray.Count - 1];

        foreach (var item in toggleArray)
        {
            item.isOn = false;
        }

        if (toggleArray.Count > 0)
        {
            //默認第一個選中
            toggleArray[0].isOn = true;

        }
    }

    void Awake()
    {
    }
    void Start()
    {
        //Init();
        //rect.horizontalNormalizedPosition = 0;
    }

    void Update()
    {
        //如果不判斷。當在拖拽的時候要也會執行插值，所以會出現閃爍的效果
        ////這里只要在拖動結束的時候。在進行插值
        if (!isDrag)
        {
            rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, Time.deltaTime * smooting);

            //rect.horizontalNormalizedPosition = targethorizontal;
        }
    }
    /// <summary>
    /// 拖動開始
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
    }

    /// <summary>
    /// 拖拽結束
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        isDrag = false;

        float posX = rect.horizontalNormalizedPosition;
        int index = 0;
        //假設離第一位最近
        float offset = Mathf.Abs(pageArray[index] - posX);
        for (int i = 1; i < pageArray.Count; i++)
        {
            float temp = Mathf.Abs(pageArray[i] - posX);
            if (temp < offset)
            {
                index = i;
                //保存當前的偏移量
                offset = temp;
            }
        }
        try
        {
            targethorizontal = pageArray[index];
            //說明頁碼大於1 toggle有值
            if (pageCount > 1 && toggleArray.Count > 0)
                toggleArray[index].isOn = true;
        }
        catch (Exception)
        {
            return;
        }
    }

    void UnInit()
    {
        foreach (var item in pageList)
        {
            U3DResources.Despawn(item);
        }
    }
}

調用

itemTips.setSumRecord = nows;
            itemTips.setPageSize = 8;
            mItemGrid.GetComponent<ContentSizeFitter>().enabled = false;

            //總頁數
            int pageCount = Convert.ToInt32(Math.Ceiling((double)nows / itemTips.setPageSize)); //sumRecord為總記錄數

            int resultCount = nows;

            if (nows % itemTips.setPageSize != 0)
            {
                //求差
                int poor = pageCount * itemTips.setPageSize - nows;
                //加上差數。湊整
                resultCount = nows + poor;
            }
            else
            {
                //可以啟用自動計算寬度
                //mItemGrid.GetComponent<ContentSizeFitter>().enabled = true;
            }

            //Debug.LogError(nows);
            //Debug.LogError(resultCount);

            GridLayoutGroup group = mItemGrid.GetComponent<GridLayoutGroup>();
            float cellSize = group.cellSize.x; //一個格子的寬度
            float spacing = group.spacing.x; //格子的間距

            //總寬度
            float totalWidth = cellSize * resultCount + (resultCount - 1) * spacing;
            //Debug.LogError(totalWidth);

            RectTransform rectWidth = mItemGrid.GetComponent<RectTransform>();
            Vector2 targetVec = new Vector2(totalWidth, rectWidth.sizeDelta.y);
            rectWidth.sizeDelta = targetVec;

itemTips是UIScrollItemTips變量

ScrollRect滑動組件。怎么可以定位到哪個地方呢。即滑動到指定位置；

ScrollRect有個屬性normalizedPosition，是Vector2類型的。

如果是垂直滑動；那么范圍是1-0

比如到初始位置

GetComponent<ScrollRect>().normalizedPosition = new Vector2(0, 1);

滑動到最后一頁

GetComponent<ScrollRect>().normalizedPosition = new Vector2(0, 0);