#1-Xcode -UI元件

關於以下 UI 元件: Segmented Control,Slider,Switch,Activity Indicator View,Progress View,Page Control,Visual Effect View with Blur,Date Picker

Segmented Control:分段控制

開啟Main.storyboard,從library新增一個Segmented Control 元件到View Controller上。

從右側功能面板中選取Segmented Control的Attributes inspector,改變Segmented Control的各項屬性。

Segmented Control — Attributes inspector

(1)Segments:改變Segmented Control的數量。
(2)Segment:選擇對應的欄位,0為第一格,1為第二格,以此類推。
(3)Title:改變從Segment選取的對應欄位的標題。
(4)Image:改變從Segment選取的對應欄位的圖示。
(5)Selected:設定預設的選取欄位。

Slider: 滑桿

Slider — Attributes inspector

(1)Value:預設滑桿的起始值。
(2)Minimum:設定滑桿的最小值。
(3)Maximum:設定滑桿的最大值。
(4)Min Image:設定滑桿最小值端點的圖示。
(5)Max Image:設定滑桿最大值端點的圖示。
(6)Min Track:設定趨向最小值端點的滑桿軌跡顏色。
(7)Max Track:設定趨向最大值端點的滑桿軌跡顏色。
(8)Thumb Tint:設定滑動滑桿圖示的顏色。

Slider

Switch:開關

Switch — Attributes inspector

(1)State:預設開關起始狀態為On或Off。
(2)On Tint:設定開關開啟狀態時對應的顏色。
(3)Thumb Tint:設定開關顏色。

Slider

Activity Indicator View:活動指示

Activity Indicator View — Attributes inspector

(1) Style:設定Activity Indicator View的樣式。
(2) Color:設定Activity Indicator View的顏色。
(3) Animating:勾選會有動畫。

Activity Indicator View — Animating

Progress View:進度條

(1) Style:設定進度條樣式。
(2) Progress:預設起始進度值。
(3) Progress Tint:已完成進度的顏色。
(4) Track Tint:進度條軌道的顏色。
(5) Progress Image:已完成進度的圖示。
(6) Track Image:進度條軌道的圖示。

Progress View

Visual Effect View with Blur:在圖片加上模糊特效

(1)Blur Style:模糊特效的樣式,Regular/Dark/Light/Extra Light等多
種樣式可設定。

Visual Effect View with Blur

Page Control:頁面控制器

Page Control — Attributes inspector

(1) # of Pages:設定總共有幾頁。
(2) Current:設定起始值是第幾頁,是索引值故由0開始算第1頁。
(3) Hides for Single Page:當頁面只有一頁時,隱藏控制器。
(4) Tint Color:設定除了目前選定頁面之外的Dot顏色。
(5) Current Page:設定當前選定頁面的Dot顏色。

Page Control

Date Picker:日期選取器

Date Picker — Attributes inspector

(1) Style:設定樣式(Wheels/Compact/Inline)。
(2) Mode:設定形式(Time/Date/Date and Time/Count Down Timer)。
(3) Locale:設定語言。
(4) Interval:設定區間。
(5) Date:設定預設日期或時間。
(6) Minimum Date:自訂範圍內距離當前時間最遠的過去日期。
(7) Maximum Date:自訂範圍內距離當前時間最遠的未來日期。

Date Picker

--

--