研究各種 UI 元件

各種常用的 UI 元件屬性說明

Photo by UX Store on Unsplash

Segmented Control

應用：切換類別。

1. Segments : 類別數
2. Segment : 第幾個類別(左側第一個類別為0開始算，Red = 0、Green = 1、Blue = 2)

3. Title : 類別的名稱

4. Selected : 打勾為預設選取 (如上圖 Red 預設被選取)

Slider

應用：利用滑動來設定數值。

1. Value : 預設值
2. Minimum : 最小值
3. Maximum : 最大值
4. Max Image : 最大值的圖案
5. Min Track : 滑動鈕左側的顏色(綠)
6. Max Track : 滑動鈕右側的顏色(灰)
7. Thumb Tint : 滑動鈕的顏色(黃)

Switch

應用：開關。

On

Off

1. State : On / Off 狀態
2. On Tint : On 的顏色(藍)
3. Thumb Tint : 開關顏色(白)

Activity Indicator View

應用：表示正在做某件事等待中…

Style.Medium

Style.Large

1. Style : 設定圖案大(Large) / 小(Medium)
2. Color : 顏色(藍)
3. Animating : 開啟動態旋轉效果(勾選)

Progress View

應用：進度顯示條。

50% (Set progress = 0.5)

1. Style : 樣式
2. Progress : 初始值(0~1)
3. Progress Tint : 已完成進度的顏色
4. Track Tint : 未完成進度的顏色
5. Progress Image : 完成進度的圖案
6. Track Image : 未完成進度的圖案

Visual Effect View with Blur

應用：毛玻璃特效(霧化)。

1. Blure Style : 毛玻璃模式

Page Control

應用：顯示在第幾個分頁。

共有三個分頁，目前位於第一個分頁。

1. # of Pages : 共幾個分頁
2. Current : 目前在第幾個分頁(從0開始算)
3. Hides for Single Page : 當只有一頁時不顯示
4. Tint Color : 非目前頁面點的顏色(黑)
5. Current Page : 目前頁面點的顏色(綠)

Date Picker

應用：選取時間。

1. Mode : 顯示模式
2. Locale : 時區
3. Interval : 時間間隔單位
4. Date : 自訂初始時間 or 使用目前時間
5. Minimum Date : 最早時間範圍
6. Maximum Date : 最晚時間範圍

參考資料：

研究以下 UI 元件: Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page…