研究 UI 元件:Progress View
Published in
Jul 19, 2021
Progress View
一個讓使用者知道,當前任務處理到什麼程度的進度條。
如何加入 Progress View 元件
點選 Object Library > 搜尋欄上輸入 Progress View
Style 屬性
Style 屬性可以設定為 2 種,Default 或 Bar。
- 下圖是 Default 的樣式。
- 下圖是 Bar 的樣式。
Progress 屬性
Progress 是一個 0.0 ~ 1.0 的浮點數(Float)型別的數值,用來表示當前進度。
- 下圖是將 Progress 數值設定為 0.1 的狀態。
- 下圖是將 Progress 數值設定為 0.8 的狀態。
Progress Tint 、Track Tint 屬性
- Progress Tint 可以設定已經處理進度的顏色。下圖將已經處理的進度設為紅色。
- Track Tint 可以設定尚未處理進度的顏色。下圖將尚未處理進度設為綠色。
Progress Image 、Track Image 屬性
- Progress Image 可以設定已經處理進度用什麼圖片填滿。下圖將已經處理的進度使用櫻花背景圖填滿。(櫻花圖片已經事先放在 Assets.xcassets)
- Track Image 可以設定尚未處理進度用什麼圖片填滿。下圖將尚未處理進度使用星空背景圖填滿。(星空圖片已經事先放在 Assets.xcassets)
Progress View 設計
- 始終向使用者報告準確的進度。
- 對具有明確定義處理時間長度的任務使用進度條。
更多詳細內容可以參考下面的網址:
Progress View 元件的簡單應用
用 Progress View 元件來顯示當前相簿的觀看進度。