研究 UI 元件:Progress View

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 元件來顯示當前相簿的觀看進度。

--

--

qedqed6
彼得潘的 Swift iOS / Flutter App 開發教室

吾乃阿克西斯教教義信奉者!汝,勿要忍耐。想喝的時候就喝,想吃的時候就吃便好。因為明天並不見得還能吃得到。