初識ScrollRect

一、了解制作滑動列表需要用到的一些組件

1、ScrollRect的參數介紹

①Movement Type滑動選項，可選三個 Unrestricted，Elastic與Clamped：

a. Unrestricted：讓ScrellRect的滑動不受Content的限制，就算Content已經滑到頭了也還能繼續滑過去

b. Elastic：讓ScrollRect的滑動受Content的尺寸限制。如果滑動超出Content邊界，則以一個彈性力彈回來。

Elasticity設置彈性力，設置越大則回彈力越小。這個值應該設置在0到1之間

c. Clamped:讓ScrollRect的滑動受Content的尺寸限制。但是沒有回彈力。當滑動到達邊界的時候就立即停止滑動。

②Viewport：ScrollRect的可見視窗。其實就是指向一個Mask對象。可以把Mask腳本也掛在ScrollRect上，那么這個ViewPort就可以指向ScrollRect自己了（可以不指定）

參考鏈接： http://mot.ttthyy.com/146.html

2、自動排版工具的使用

用到了網格布局(Grid Layout Group)和內容大小適配器(Content Size Fitter)

二、基礎的滑動列表的制作

1、創建Canvas下的空節點，加上需要的這些組件

2、在這個節點下在加一個空節點（如果需要設置ScrollRect中的Viewport的話，我們需要把裁切加在這個節點上）

3、添加內容節點，因為這里做的是一個橫向的列表，起始元素從左邊開始，因此我們需要把錨點設置為（0， 0.5）

如果我們錨點沒有設置在（0，0.5），默認在中間，因為我們用了Content Size Fitter組件，這個組件在自動調整UI元素的大小時，是根據UI元素自身的軸心點來擴展大小的，也就是說，如果我Content的軸心點在0.5*0.5位置的話，Content的大小就會向四周擴大。

4、部分重要的代碼：

①獲取一些組件，設置一些參數

--- 獲取ScrollRect組件
self._scrollRect    = self.transform:GetComponent(typeof(UnityEngine.UI.ScrollRect))
self._content       = self.transform:Find("Viewport/Content")
--- 獲取網格布局組件
self._gridGroup     = self._content:GetComponent(typeof(UnityEngine.UI.GridLayoutGroup))
--- 獲取ContentSizeFitter組件
self._sizeFiter     = self._content:GetComponent(typeof(UnityEngine.UI.ContentSizeFitter))
--- 動態加載網格布局列表(其實就是創建預制體為Content節點的子節點)
function M:initGridLayoutGroup()
    --- 修改一些參數
    self._gridGroup.cellSize = Vector2(225, 225)
    self._gridGroup.spacing = Vector2(6.5, 10)
    for i = 1, self._rowNum do
        for j = 1, self._colNum do
            local icon = UnityEngine.GameObject.Instantiate(self._iconPre, self._content)
            local item = icon.transform:GetLuaTable()
            --- @type UnityEngine.UI.Text
            item._textContent.text = i
            item:updateData(i, j)
            table.insert(self._icons, item)
        end
    end
end

 

參考： https://www.cnblogs.com/chenwz91/p/5092571.html

三、拓展學習的資料和鏈接

1、翻頁功能的滑動列表，還有一些基礎的UGUI教程

鏈接: https://pan.baidu.com/s/1jhsGdyy9qxfR8qTmtfw5GQ?pwd=k2cd 提取碼: k2cd 復制這段內容后打開百度網盤手機App，操作更方便哦

2、無限循環列表（資源優化處理）

http://qiankanglai.me/2015/08/15/LoopScrollRect/

https://github.com/qiankanglai/LoopScrollRect