【COCOS CREATOR 系列教程之四】基于0.7.1先簡單制作一個PAGEVIEW

由于目前版本還沒有釋出1.0，是以還有不少元件沒有釋出，那麼Himi也看到Cocos Creator群裡有幾個童鞋問起過PageView的問題，那麼Himi正好借此練手，基于目前版本制作一個PageView。

本文分為兩部分進行講解： 1. 制作PageView     2. 如何使用

一. 制作PageView

由于都是基于目前cc版本提供的元件進行的，是以這裡不進行詳細的解釋與介紹。

其實制作PageView，首先考慮要保證考慮如下幾點：

1. 要能自動布局

2. 要能設定裁切區域

3. 提供使用者參數設定。

那麼回過頭來想考慮目前CC版本提供的元件，是否可滿足以上條件呢：

1. 自動布局？？  CC裡有Layout，并且可以設定布局橫豎兩方向、還提供了間隔的設定。

2. 設定裁切區域？？ CC裡有Mask。

OK，下面開始動手，步驟如下：

1. 首先我們建立一個空節點PageView，并添加Mask元件作為裁切視圖。

2. 在PageView節點下，我們添加一個布局元件pLayout， 以後使用者直接在pLayout下進行添加item即可實作自動布局。

3. 在根節點PageView挂自定義的腳本，其内容實作觸摸滑動翻頁的邏輯(對Layout的位置改變)等

4. Himi将PageView制作成了Prefab，便于使用（現在插件制作Himi還沒仔細看 – -。）

完成效果如下圖GIF所示：（點選可看到動态效果）

<a href="http://www.himigame.com/wp-content/uploads/2016/02/pageview.gif" target="_blank"></a>

二. 如何使用：

1. 拷貝PageView(Prefab)和PvJs(腳本)到資料總管中，拖PageView 的Prefab 到層級管理器中即可使用。

2. 參數設定：

選中根節點PageView，然後檢視屬性檢查器中的腳本提供的參數，如下圖：

<a href="http://www.himigame.com/wp-content/uploads/2016/02/[email protected]" target="_blank"></a>

Item_Count: Item 數量  (請保證這裡的數量與你在pLayout下添加的子節點數量保證一緻！)

Item_Width: 每個 Item 的寬度

Item_Height:每個 Item 的高度

Item_Move_Dis:設定觸發翻頁的距離(像素)

3. 設定剪切區域大小

選中根節點PageView，然後檢視屬性檢查器中的節點Node的Size屬性，讓其寬高與每個Item的寬高保持一緻！

4. 設定布局類型、排序類型以及間隔

選中  根節點PageView  下的pLayout 子節點的屬性檢查器中的Layout元件，如下圖：

<a href="http://www.himigame.com/wp-content/uploads/2016/02/[email protected]" target="_blank"></a>

Layout Type: 布局的類型，三個類型：

NONE : 無  （既然要做PageView的效果，選這個不太講道理了，請務必不要選這個）

HORIZONTAL：橫向排版

VERTICAL: 縱向排版

Margin：空白的大小（橫向可改寬度、縱向可改變高度）

Spacing X: 每個item X軸之間的間隔（選擇橫向排版時出現的屬性）

Spacing Y: 每個item Y軸之間的間隔（選擇縱向排版時出現的屬性）

Horizontal Direction:有兩個類型：

LEFT_TO_RIGHT：從左到右的順序排列

RIGHT_TO_LEFT：從右到左的順序排列

5. 在pLayout下添加item吧，想加多少請随意。隻需記得其數量要保證與PageView腳本裡的Item_Count參數設定的數量保持一緻。

其實簡化使用過程，就1步：

選中PageView，在屬性檢查器中，設定好Node 的Size 與你的Item大小保持一緻，并對腳本暴露出來的參數進行合适設定。

（記得檢查pLayout下的Layout Type 這個布局類型屬性不可選NONE，因為Himi也不支援 -。 0）

項目結構：

<a href="http://www.himigame.com/wp-content/uploads/2016/02/[email protected]" target="_blank"></a>

資料總管的HPV檔案夾就是啦～

PageViewTest 是示例

PageView 是模闆，大家用這個～

PvJs 是腳本

himi 是圖檔，大家可以無視

使用示範：（點選可看到動态效果）

<a href="http://www.himigame.com/wp-content/uploads/2016/02/user.gif" target="_blank"></a>

那麼年前就到這裡，各位咱們年後見～  

本文轉自 xiaominghimi 51CTO部落格，原文連結：http://blog.51cto.com/xiaominghimi/1741214，如需轉載請自行聯系原作者