8種常見UI元件,一次探索。

超常見的UI元件,每個都一定在你的手機出現過!

目錄

一、Segmented Control
二、Slider
三、Switch
四、Activity Indicator View
五、Progress View
六、Visual Effect View with Blur
七、Page Control
八、Visual Effect View with Blur

Segmented Control

功能:切換分類。
舉例:切換性別。
為了性別友善我特別增加了第三性~幫自己鼓掌(拍手)

研究欄位

1 Segments:有幾種分類。
2 Segment:選擇分類(選擇後才可以修改下面的選項)
3 Title:分類顯示名稱。
4 Image:分類顯示樣式(和分類顯示名稱只能二選一,不能同時顯示)
5 Selected:預設選取(有打勾就是預設,不管有幾種分類,只能勾一個)

Slider

功能:滑動來設定素質。
舉例:調整音量。

研究欄位

1 Value:預設值
2 Minimum
:最小值
3 Maximum
:最大值
4 Min Image
:最小值的圖案
5 Max Image
:最大值的圖案
6 Min Track
:滑動鈕左側的顏色(粉色)
7 Max Track
:滑動鈕右側的顏色(藍色)
8 Thumb Tint
:滑動鈕的顏色(黃色)
9 Tint:更改Min/Max Image的顏色(紫)

Switch

功能:開關。
舉例:鬧鐘開關。
484很討厭看到這個畫面!一天要按掉10個鬧鐘才願意起床(我最荒唐)

研究欄位

1 State:預設狀態On/Off
2 On Tint
:On的顏色(綠色)
3 Thumb Tint
:Off的顏色(白色)

Activity Indicator View

功能:正在做某件事的進度條。
舉例:載入中。

研究欄位

1 Style:設定大小
2 Color
:設定顏色
3 Animating
:旋轉效果(有打勾才會動)

Progress View

功能:顯示進圖條。
舉例:資料下載進度。

研究欄位

1 Style:樣式,有Default、Bar兩種,但我看不出差別(被打
2 Progress:起始值0~1
3 Progress Tint:已完成進度的顏色
4 Track Tint:未完成進度的顏色
5 Progress Image:完成進度的圖案,但我不知道怎麼讓圖案出現(再被打
6 Track Image:未完成進度的圖案,但我不知道怎麼讓圖案出現(被暴打

等我研究出來後再補上啦~

Visual Effect View with Blur

功能:毛玻璃特效(霧化)
舉例:打馬賽克(?

研究欄位

Blur Style:毛玻璃模式。恕我無能,除了一些很黑的,不然我看起來都覺得差不多(小聲) 一樣等我分辨出來後再補上。

Page Control

功能:小圓點,顯示有幾個分頁,現在在哪個分頁。
舉例:手機桌布分頁。

研究欄位

1 # of Pages:共幾個分頁
2 Current
:目前在第幾個分頁(0是最左邊,1往右一格,以此類推)
3 Hides for Single Page
:勾選時,當只有一頁時不顯示點點。
4 Tint Color
:非目前頁面點的顏色(粉)
5 Current Page
:目前頁面點的顏色(藍)

Visual Effect View with Blur

功能:選擇時間。
舉例:就是選擇時間。

Mode 1。Time,時間。
Mode 2。Date,日期。
Mode 3。Date and Time,日期+時間。(好想打Day and night…)
Mode 4。Count Down Time,倒數。

研究欄位

1 Mode:顯示模式。有四種,時間、日期、日期+時間、倒數。
2 Locale
:時區
3 Interval
: 時間間隔單位(1.2.3.4.5.6.10.12.15.20.30分可選)
— — — — — — — 倒數模式沒有以下三種設定 — — — — — — —
4 Date:Current Date自訂初始時間 or Custom使用目前時間
5 Minimum Date
: 打勾,設置最早時間範圍
6 Maximum Date
:打勾,設置最晚時間範圍

References

--

--