研究各種UI元件

慢慢習慣medium寫東西，有點像ＰＴＴ….

研究以下 UI 元件: Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page Control，Date Picker，Visual Effect View with Blur，Color Well

Segmented Control

研究欄位

1 Segments 調整Segment數量，看你要分幾個？
2 Segment 顯示每個Segment的個別屬性
3 Title Segment 按鈕上顯示的文字，
4 Image 或圖片
5 Selected 勾選該項為預設選取，只可勾選其中一個，如勾第二個，先前的會被取消。

Slider

最常見的就是調整音量的滑桿，代表回傳一個數值。

設定很簡單，Value是初始預設值，下面min和max是最大值和最小值範圍。

Min Image是在拉桿兩側可設定圖示來辨別大小方位，圖中使用system symbol，大小可調，Ｍax Image的部分亦同。

Min Track & Max Track 設定拉桿的顏色，兩側可分不同色。

Thumb tint 設定拉桿的圓鍵，也是可個別設定顏色，如圖中綠色。

Switch

就只是個開關，不是任天堂。

1 State 設定初始狀態，on或off，回傳布林值true or false。
2 On Tint 設定開關模組在on時的顏色，off時會變成灰色。
3 Thumb Tint 設定圓鍵的顏色，off時不會變色。

Activity Indicator View

1 Style 設定底圖和icon的大小，只有幾個style可選，感覺不太有用的項目。
2 Color 設定顏色
3 Animating 勾選就會一直轉圈圈，不勾就不會轉

Progress View

1 Style 只有default跟bar兩個選擇，跑起來好似沒太大不同之處。
2 Progress 初值設定，範圍是0 ~ 1
3 Progress Tint 進度條的顏色
4 Track Tint 背景軌道顏色
5 Progress Image …
6 Track Image 這一項跟前項，設定了也跑不出來…還要再研究研究。

Visual Effect View with Blur

Blur Style

這種浴室的毛玻璃特效，在預設的白底看不出效果，因此先插入底圖較能顯現。

Page Control

1 # of Pages 總頁數
2 Current 預設起始所在頁數

3 Hides for Single Page 假如只有一頁，Pages欄位0，則隱藏此排小圓點。如下圖。

4 Tint Colr 設定此排小圓點的底色
5 Current Page 顯示目前所在頁面位置的小圓點，用不同顏色顯示。如上圖的藍色。

Date Picker

1 Preferred Style 選擇樣式類型

wheels 輪轉式相當古典，是我最喜歡的類型。

Inline的樣式，中規中矩

compact 袖珍型的，較不佔畫面空間，展開來日期的部分就是Inline的樣式。

初始的樣子

點選展開的樣子，相當簡潔有力。

時間的部分則保留wheels的樣式

2 Mode 選擇僅日期、僅時間或日期與時間同時顯示的格式
3 Locale 語言環境，與時區無關，就是設定顯示特定的語言選項，像顯示上午下午之類的，各地有不同的顯示語言。

4 Interval 時間設定的間隔大小，如果設定2 minutes，那就是兩秒跳一格。

5 Date 設定要在初始畫面上顯示的日期與時間，可選擇現在，或是某一個特定的日期時間。
6 Minimum Date 設定日期範圍下限
7 Maximum Date 設定日期範圍上限

maximum date的日期時間不能早於minimum date，否則執行就會出現錯誤。

Color Well

一開始真不知道這一顆彩色的球是幹嘛的…. 只能設定顏色 和標題

模擬器跑下去才知道是個色彩選擇的工具模組

Title的欄位就是圖中寫著『有顏色的球』的位置標題

Opacity就是透明度，除此之外應該沒什麼特殊的了…

後記

打開xcode的介面其實就是感覺很多設定項很阿雜令人想要逃跑的感覺。

一個功能一個功能慢慢嘗試後，有比較熟悉的感覺。

這些項目都不難，試試看便知一二，倒是把這些體驗敘述出來比較燒腦…