各種UI元件實驗

茆閔智
茆閔智
Nov 4 · 4 min read

1.Segmented Control

2.Slider

3.Switch

4.Activity Indicator View

5.Progress View

6.Page Control

7.Date Picker

8.Visual Effect View with Blur


Segmented Control

可切換分類的元件:

Segments:設定分類的數量,最小的設定為兩個
Segment:選擇指定的分類
Title:輸入分類顯示的文字
Image:把分類顯示的文字改由圖案呈現
Selected:選定的分類選項若勾選則表示為預設

Slider

滑動設定數值的元件

Value:設定預設值,即初始滑動鈕停留的位置
Minimum:設定滑動軌道的最小值,顯示位置在最左邊
Maximum:設定滑動軌道的最大值,顯示位置在最右邊
Min Image:設定軌道最左邊的圖片
Max Image:設定軌道最右邊的圖片
Min Track:左邊滑動軌道的顯示顏色
Max Track:右邊滑動軌道的顯示顏色
Thumb Tint:滑動鈕的顏色設定

Switch

開關元件

State:設定開關按鈕初始的位置,ON>按鈕在右、OFF>按鈕在左
On Tint:State在標示ON狀態時的底色顏色設定
Thumb Tint:按鈕的顏色設定

Activity Indicator View

顯示進度讀取中的元件

Style:讀取進度旋轉圈圈的樣式,共有三種可選擇
Color:讀取進度旋轉圈圈的顏色,且顏色以漸層方式顯示
Animating:勾選後,啟動模擬器可以顯示動態旋轉

Progress View

顯示進度條的元件

Style:Default未完成之進度條顯示為灰色、Bar未完成之進度條未顯示顏色
Progress:當前的進度值位置,最小為0、最大為1,以0.1為單位做調整
Progress Tint:已完成進度條的顏色
Track Tint:未完成進度條的顏色
Progress Image:在Progress Tint設定在Default時,可以使用圖像取代已完成進度條的顏色
Track Image:在Track Tint設定在Default時,可以使用圖像取代未完成進度條的顏色

Visual Effect View with Blur

毛玻璃效果的元件

Blur Style:共有5種的顯示方式可做選擇

Page Control

顯示分頁的元件

#of Pages:分頁的數量
Current:預設初始停留在分頁的位置
Hides for Single Page:當Pages設定為1時,隱藏此分頁圓點
Tint Color:非當前分頁圓點顯示的顏色
Current Page:當前分頁圓點顯示的顏色

Date Picker

時間選擇的元件

Mode:共有4種模式可選擇,時間/日期/時間+日期/倒數計時
Locale:選擇初始時區, Default 則跟隨使用者系統的時區設定變化
Interval:設定分鐘的間距
Date:Current Data、Custom(多一個設定初始顯示的日期及時間)
Minimum Date:設定可以選擇的最早日期及時間
Maximum Date:設定可以選擇的最晚日期及時間

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

    茆閔智

    Written by

    茆閔智

    彼得潘的 Swift iOS App 開發教室

    學習 Swift iOS App 開發的學生作品集

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade