#7 研究以下 UI 元件: Segmented Control,Slider,Switch,Activity Indicator View,Progress View,Page Control,Date Picker,Visual Effect View with Blur

ynag
彼得潘的 Swift iOS / Flutter App 開發教室
9 min readJul 12, 2021

一.研究Segmented Control

Segmented Control元件

Segmented Control元件是可以切換選項之元件,將研究其元件之用法以及調整方式

研究欄位

1.Segments:

此欄位是給予增加選項之功能用,可以增加多選項給予選擇。

在此數值改成4可以多增加兩個選項
增加了兩個選項可以編輯選擇

2.Segment:

此欄位是給予欄位命名順序編輯使用對應欄位給予正確命名

依照對應欄位給予正確命名

3.Title:

此欄位是給予對應欄位命名名稱位置需對應Segment欄位給予正確命名

4.Image:

此欄位是將Title命名欄位的位置從文字改成圖片按鈕選項

Image是將Title文字命名改成圖片命名
Segment1對應第二笑臉圖案

5.Selected:

此欄位是將已選取的按鈕變色

把選取的按鈕變色
選取第一個按鈕
第二個按鈕以此類推

二.研究Slider元件

Slider元件

Slider元件是控制滑動元件,用途是調整音量,螢幕亮度使用。

研究欄位

  1. Value:

設定滑動元件預設的位置,預設在中間數字越小越偏向左邊越大往右邊。

2. Minimum:

設定滑動元件預設的位置最小值,預設在中間數字越大越偏向左邊越小往右邊。

3. Maximum:

設定滑動元件預設的位置最大值,預設在中間數字越小越偏向左邊越大往右邊。

4. Min Image:

設定最小值圖標

此欄位是設定滑動元件的最小值圖標

5. Max Image:

設定最大值圖標

此欄位是設定滑動元件的最大值圖標

6. Min Track:

設定滑動元件前端底色

此欄位是設定滑動元件桿前端底色,預設是藍色此範例改成灰色。

7. Max Track:

設定滑動元件後端底色

此欄位是設定滑動元件桿以滑動後端底色,預設是白色此範例改成黑色。

三.研究Switch元件

Switch元件

Switch元件是設定開關跟Selected選項不太相同只能開跟關,多用於單一開關使用。例如:時鐘開關

研究欄位

1.State:

設定預設開關是否開或關

此欄位是設定Switch元件預設開關狀態,此圖是設定預設為Off若無設定就是ON。

2.On Tint:

設定開關開啟時底色

此欄位是設定Switch元件在開啟狀態的底色,預設為綠色此範例為黑色。

3.Thumb Tint:

設定開關按鈕的顏色

此欄位是設定Switch元件按鈕的底色,預設是白色這裡設定成紫色。

四.研究Activity Indicator View元件

Activity Indicator View元件

Activity Indicator View元件用於程式讀取載入狀態使用。

1.Style:

Style放大圖示

此欄位是設定Style圖示大小,此圖是已經放大的圖示

2.Color:

Colr是設定元件顏色

此欄位是設定Color元件顏色預設為灰色。

3.Animating:

Animating為動畫效果

此功能是讓載入畫面變成動畫連動。

四.研究Progress View元件

Progress View元件

Progress View元件是顯示進度元件,例如下載進度。

研究欄位

1.Style:

Progress View元件Style效果
Progress View元件尚未開啟Style效果

此功能是將Progress View元件尚未執行之進度灰底給關閉。

2.Progress:

Progress View元件Progress效果

此功能是將Progress View元件調整進度條預設進度使用,畫面顯示為預設90%進度。

3.Progress Tint:

Progress View元件Progress Tint效果

此功能是將Progress View元件進度條更改顏色之用

4.Track Tint:

Progress View元件Track Tint效果

此功能是將Progress View元件尚未讀取之進度更改顏色用(這裡用黃色)

5.Progress Image:

此功能是將進已完成度條顯示圖片,要使用進度條圖檔。

6.Track Image:

此功能是將進未完成度條顯示圖片,要使用進度條圖檔。

五.研究Visual Effect View with Blur元件

Visual Effect View with Blur元件是使用毛玻璃效果

可以將圖片以毛玻璃覆蓋達成毛玻璃效果。

Visual Effect View with Blur元件(毛玻璃效果)

研究欄位:

1.Blur Style:

此欄位是更換毛玻璃效果

Blur Style為更換毛玻璃效果

六.研究Page Control元件

Page Control元件為小圓點元件由三個小圓點所組成

Page Control為小圓點元件

研究欄位:

1.of Pages:

of Pages為增加原點數量
of Pages調成10的效果

2.Current:

Current是條原點預設亮點
Current調成7後為第七個原點亮起

3.Hides for Single Page:

Hides for Single Pagee勾選後可以展示滑動狀態
Hides for Single Pagee勾選後展示滑動狀態

4.Tint Color:

Tint Color為調整小原點顏色
Tint Color調整黃色後展示

5.Current Page:

Current Page為調整已執行原點顏色
Current Page調整已執行原點顏色

七.研究Date Picker元件

Date Picker元件為日期選擇元件,例如日曆找尋日期使用。

Date Picker元件為顯示月曆元件

研究欄位:

1.Style:

Style是改變月曆風格(此為liline風格)

2.Mode:

Mode為改變月曆日期選擇風格(此為Data and Time風格)

3.Locale:

Locale為調整顯示語言

4.Interval:

Interval為調整月曆日期間隔(這裡設置間隔三)
Interval為調整月曆日期間隔(這裡設置間隔三)

5.Date:

(圖一)Date是設定月曆能夠選取的區間

6.Minimum Date:

如圖一所示Minimum Date設定起始資料選取範圍

上圖顯示1970/1/1 7:00:00 PM

也就是說只能找1970/1/1 7:00:00 PM以後的資料往前無法尋找。

7.Maximum Date:

如圖一所示Maximum Date設定終點資料選取範圍

上圖顯示1937/12/31 7:00:00 PM

也就是說只能找1937/12/31 1 7:00:00 PM以前的資料往後無法尋找。

--

--