#7 研究以下 UI 元件: Segmented Control,Slider,Switch,Activity Indicator View,Progress View,Page Control,Date Picker,Visual Effect View with Blur
一.研究Segmented Control
Segmented Control元件是可以切換選項之元件,將研究其元件之用法以及調整方式
研究欄位
1.Segments:
此欄位是給予增加選項之功能用,可以增加多選項給予選擇。
2.Segment:
此欄位是給予欄位命名順序編輯使用對應欄位給予正確命名
3.Title:
此欄位是給予對應欄位命名名稱位置需對應Segment欄位給予正確命名
4.Image:
此欄位是將Title命名欄位的位置從文字改成圖片按鈕選項
5.Selected:
此欄位是將已選取的按鈕變色
二.研究Slider元件
Slider元件是控制滑動元件,用途是調整音量,螢幕亮度使用。
研究欄位
- Value:
設定滑動元件預設的位置,預設在中間數字越小越偏向左邊越大往右邊。
2. Minimum:
設定滑動元件預設的位置最小值,預設在中間數字越大越偏向左邊越小往右邊。
3. Maximum:
設定滑動元件預設的位置最大值,預設在中間數字越小越偏向左邊越大往右邊。
4. Min Image:
此欄位是設定滑動元件的最小值圖標
5. Max Image:
此欄位是設定滑動元件的最大值圖標
6. Min Track:
此欄位是設定滑動元件桿前端底色,預設是藍色此範例改成灰色。
7. Max Track:
此欄位是設定滑動元件桿以滑動後端底色,預設是白色此範例改成黑色。
三.研究Switch元件
Switch元件是設定開關跟Selected選項不太相同只能開跟關,多用於單一開關使用。例如:時鐘開關
研究欄位
1.State:
此欄位是設定Switch元件預設開關狀態,此圖是設定預設為Off若無設定就是ON。
2.On Tint:
此欄位是設定Switch元件在開啟狀態的底色,預設為綠色此範例為黑色。
3.Thumb Tint:
此欄位是設定Switch元件按鈕的底色,預設是白色這裡設定成紫色。
四.研究Activity Indicator View元件
Activity Indicator View元件用於程式讀取載入狀態使用。
1.Style:
此欄位是設定Style圖示大小,此圖是已經放大的圖示
2.Color:
此欄位是設定Color元件顏色預設為灰色。
3.Animating:
此功能是讓載入畫面變成動畫連動。
四.研究Progress View元件
Progress View元件是顯示進度元件,例如下載進度。
研究欄位
1.Style:
此功能是將Progress View元件尚未執行之進度灰底給關閉。
2.Progress:
此功能是將Progress View元件調整進度條預設進度使用,畫面顯示為預設90%進度。
3.Progress Tint:
此功能是將Progress View元件進度條更改顏色之用
4.Track Tint:
此功能是將Progress View元件尚未讀取之進度更改顏色用(這裡用黃色)
5.Progress Image:
此功能是將進已完成度條顯示圖片,要使用進度條圖檔。
6.Track Image:
此功能是將進未完成度條顯示圖片,要使用進度條圖檔。
五.研究Visual Effect View with Blur元件
Visual Effect View with Blur元件是使用毛玻璃效果
可以將圖片以毛玻璃覆蓋達成毛玻璃效果。
研究欄位:
1.Blur Style:
此欄位是更換毛玻璃效果
六.研究Page Control元件
Page Control元件為小圓點元件由三個小圓點所組成
研究欄位:
1.of Pages:
2.Current:
3.Hides for Single Page:
4.Tint Color:
5.Current Page:
七.研究Date Picker元件
Date Picker元件為日期選擇元件,例如日曆找尋日期使用。
研究欄位:
1.Style:
2.Mode:
3.Locale:
4.Interval:
5.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以前的資料往後無法尋找。