#2–3研究 UI 元件

Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page Control，Date Picker，Visual Effect View with Blur

Chloe

·

Follow

Published in

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

·

5 min read

·

Feb 28, 2019

--

Share

Segmented Control

1. Segments：設定分隔數量，最少兩個。
2. Segment：選擇欲設定的Segment。
3. Title：該Segment的顯示名稱。
4. Image：該Segment的顯示照片，Title和Image只能擇一設定
5. Selected：預設有無被點選。

Slider

1. Value：Slider圈圈預設的位置，如上圖，最大值為５，預設位置為１。
2. Minimum：Slider最小數值。
3. Maximum：Slider最大數值。
4. Min / Max Image：Slider 左右兩側 顯示之圖片。
5. Min Track ：圈圈以前顯示的顏色指引，如上圖。
6. Max Track：圈圈以後顯示的顏色指引，如上圖。
7. Thumb Tint：圈圈的顏色指引，如上圖。

Switch

1. State：預設是On還是Off
2. On Tint：如果State是On，則顯示設定的顏色。若State是Off，邊框顏色則由View-Tint所決定。
3. Thumb Tint：圈圈的顏色指引，如左圖。

Activity Indicator View

1. Style：預設有三種轉圈形式，分別為：Large White, White和Grey。
2. Color：自定義顏色。
3. Animating：打勾後，在執行模擬器時會轉動～

Progress View

1. Style：有兩種樣式，分別是Default及Bar。 default 未完成進度時會顯示為預設顏色（灰色），bar未完成進度條則沒有顏色。
2. Progress：目前的進度值，值為0–1中間的小樹。
3. Progress Tint：已到達進度條之顏色。
4. Track Tint：未到達進度條之顏色。
5. Progress Image：Custom Progress View
6. Track Image：Custom Track View

Visual Effect View with Blur 毛玻璃效果

1. Blur Style:有五種樣式可選擇，分別是Extra Light , Light , Dark , Regular 以及 Prominent

Page Control

1. # of Pages ：設定Page數量(上圖設定有5頁)
2. Current：預設停留page(首頁為0 ，故上圖2為第三頁)
3. Hides for Single Page：當Page=1時，隱藏此Page Control 。
4. Tint Color：不在當前Page，所顯示顏色。
5. Current Page ：停在當前Page，所顯示顏色。

Date Picker

1. Mode：有四種模式
   (1)Time : 顯示時間（12小時制）
   (2)Date：年月日
   (3)Time and Date：日期＋時間
   (4)Timer：時＋分
2. Locale：時區選擇
3. Interval：設定分鐘的最小間距
4. Date：Current Data、Custom（設定預設時間）
5. Minimum Date：滾輪中可選擇多久以前日期，打勾後若超過，會回到所設定的最小日期。
6. Maximum Date：滾輪中可選擇多遠未來日期，打勾後若超過，會回到所設定的最大日期。