Unity Scroll View 圖文並茂範例

說明

分享在 Unity 中使用垂直佈局群組與內容大小適配器，結合捲動視圖實現可滑動的圖文內容。

預覽

實作

這裡主要講解 Scroll View 的部分，Background 就是後面的佈告欄圖片可以先忽略它。

Scroll View

1. GameplayFeatureCanvas: 新增 Canvas。
2. Background: 在 Canvas 新增 Image 當作背景。
3. Scroll View: 在 Hierarchy Background 按右鍵 UI 新增 Scroll View。
   • Rect Transform，此範例採用展開內縮的方式。
   • Scroll Rect
     • 關閉 Horizontal，因為此範例是垂直捲動，所以用不到。
     • 勾選 Vertical。
     • 設定 Horizontal Scrollbar 為 None，因為此範例沒有打算呈現捲動條。
     • 設定 Vertical Scrollbar 為 None，因為此範例沒有打算呈現捲動條。
4. 隱藏 Scrollbar Horizontal。
5. 隱藏 Scrollbar Vertical。

Content

1. Rect Transform: 使用 top stretch 向上貼齊。
2. 加入 Vertical Layout Group。
   • Child Alignment: Upper Left 使用向上貼齊。
   • Control Child Size: 勾選 Width。
   • Child Force Expand: 勾選 Width。
3. 新增 Content Size Fitter 組件。
   • Vertical Fit: 選擇 Prefered Size，讓它隨著垂直高度調整大小。

Content 裡面的 Panel

為了能夠圖文並茂，又要可以自適應調整圖文大小，我利用 Panel 調整它的高度，用來給 Content 做垂直排序，它的高度是自訂的。

Panel 裡面會有多個子 Panel，每個子 Panel 是為了調整它的大小而新增的，至於要怎麼調整子 Panel 就看自己想要的排版而定。

雖然高度客製化，但缺乏了一點自動調整大小彈性，整理下來有符合我想要的效果，讀者們可以根據我提供的範例進行改變以符合需求。