#3_研究各種UI元件＿初心者習作

利用設定背景音樂的功能練習各種UI元件

目的

這次的作業是研究各種UI元件，題目中有下列內容要實現。

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＿毛玻璃效果。

這些內容多數是app中的設定功能會使用到的，我剛好想幫我的『偵探事務所』做個設定BGM的功能，為什麼偵探事務所需要設定BGM？畢竟這個app是讓用戶可以藉由閱讀偵探小說或電影來更認識偵探們，希望用戶在閱讀的同時有背景音樂襯托，就像高智慧殺人魔在潛心研究計畫時都會放個古典樂來聽一樣。

參考資料

主要是參考 彼得潘的 iOS App Neverland的這篇文章製作。

研究以下 UI 元件: Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page…

使用的元件介紹

1.Segmented Control＿切換分類。

研究欄位

1 Segments＿分類數量。
2 Segment＿各分類設定切換。
3 Title＿分類名稱。
4 Image＿分類圖像（使用系統提供的圖像時無法使用title）
5 Selected＿預設選取。

2.Slider＿滑動設定數值。

研究欄位

1 Value＿預設數值。
2 Minimum＿最小值。
3 Maximum＿最大值。
4 Min Image＿最小值顯示圖。
5 Max Image＿最大值顯示圖。
6 Min Track＿小到大軌道色。
7 Max Track＿大到小軌道色。
8 Thumb Tint＿控制鈕顏色。

3.Switch＿開關。

研究欄位

1 State＿預設狀態on/off。
2 On Tint＿on的顏色。
3 Thumb Tint＿控制鈕顏色。

4.Activity Indicator View＿轉圈圈進度，也就是小菊花。
5.Progress View＿進度條。

為了方便呈現，一口氣放了兩種進度條，一般不會這樣做。

研究欄位

1 Style＿菊花大小。
2 Color＿菊花顏色。
3 Animating＿開啟動態效果。

研究欄位

1 Style＿進度條樣式。
2 Progress＿進度（1為滿條）。
3 Progress Tint＿已完成進度色。
4 Track Tint＿未完成進度顏色。

6.Page Control＿顯示分頁小圓點。

可用來顯示有多少項目

研究欄位

1 # of Pages＿分頁總數。
2 Current＿目前在第幾頁。
3 Hides for Single Page＿單一頁時隱藏。
4 Tint Color＿點點本來色。
5 Current Page＿目前所在分頁色。

7.Date Picker＿時間選擇。

時間選擇有多種模式，這次選用的是倒數模式。

研究欄位

1 Mode＿模式選擇。
2 Locale＿時區。
3 Interval＿調整時間間隔。
4 Count Down＿預設倒數。

8.Visual Effect View with Blur＿毛玻璃效果。

發現毛玻璃效果壓在圖片上用來顯示字串效果還不錯。

研究欄位

Blur Style＿模糊風格。

小結

這些元件可設定的內容遠比說明得多，運用得當會得到很不錯的視覺效果。裡面部分設定無法從替換看出明顯效果，所以也不知道做什麼用的，僅會的這幾項也算是目前堪用，足夠讓我的我的『偵探事務所』做出個雛形出來。