###### tags: `Unity UI`
# UI-向下滑 Unity-scrollRect+Mask

要做出可以像一般手機向下滑的效果。

## 1. 先建立一個Scroll View


---

## 2. 建立一個image

因為scroll view有一個欄位需要放顯示的物件，而image有點像將需要顯示的所有物件統整到image。


**建立image:**


---
## 3. 將Scroll View的範圍拉好(會顯示的範圍)


**影片的範圍應改為下方的範圍，原因是顯示的範圍不能超過上方黃色也不能超過下方功能鍵處。**


並把這兩個刪除，因為我覺得不好看



---
## 4. 拉好image
因為把要顯示的物件建完後，長度可能會超過手機，因此image一開始就拉長一點。

**影片有誤，image的範圍應拉到黃色下方處即可**

記得把image在hierarchy的位置調換，上面的UI會會顯示在底層，類似繪圖軟體的圖層。


---
## 5. 把目前有的記事本物件放在image底下，將image放在scroll View底下


---

## 6. 把image放進Scroll View的content裡面


- 將Horizontal的勾取消

我們只要向下滑動不需要水平滑度

- 並把Movement Type改成clamped

在滑動的過程會在限制的範圍

---
## 7. 拉完所有物件
記得要把需要顯示的物件放到image下，而image一定要是scroll View的子物件!

---
## 8. 在scroll View 新增 mask 物件

---
## 9.把image透明度設成0
這樣就可以看到記事本原本背後的黃色背景了!

---
## 10. 完成!

如果有問題的話應該是圖層擺放先後的問題，可以先隨便改一下物件在Hierachy的位置。