#(Swift) 研究各種 UI 元件

目的：學習各種 UI 元件

研究 UILabel

透過 UIPickerView 來觀看 Line Break 變化

研究 UITextField

透過 UIPickerView 來觀看 Border Style 、 Clear Button 、 Keyboard Type 變化

Border Style

Clear Button

Keyboard Type

點擊畫面收起鍵盤

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        view.endEditing(true)
    }

研究 UITextView

透過 UIPickerView 來觀看 keyboard dismiss 變化

透過 UISwitch 來觀看 Editable 、Selectable 變化

關閉鍵盤

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        view.endEditing(true)
    }

研究 UIImageView

透過 UIPickerView 來觀看 content Mode 變化

研究 UISegmented Control

Segments

Segments 決定了 Segment control 的數量

Segments = 2

Segment

可以編輯每個 Segment 內容

Title 對應每個 Segment control 的文字

sImage

可以客製化 Segment 圖片

研究 UISlider

Value 決定初始值

Minimum 決定最小值

Maximum 決定最大值

Min Image 決定最小值旁邊的照片

Max Image 決定最大值旁邊的照片

Min Track 決定往最小值的顏色

Max Track 決定往最大值的顏色

Thumb Tint 決定選取紐的顏色

研究 UISwitch

State = On

State 決定開關狀態

On Tint 決定開關顏色

Thumb Tint 決定旋鈕顏色

研究 UIActivity Indicator View

透過 UIPickerView 來觀看 Style 變化

透過 UISwitch 來觀看 Animating 變化

研究 UIProgress View

Style = Default, Progress = 0.5

Style = Bar

Style Bar 的變化

Progress Bar 的數值變化，從0.0~1.0

Progress Tint Bar 的顏色

Track Tint Bar 剩餘的顏色

研究 UIVisual Effect View with Blur

透過 UIPickerView 來觀察 Blur Style 變化

研究 UIPage Control

of Pages = 3, Current = 0

# of Pages Page 數量

Current 目前所在位置

Hides for Single Page 當小圓點只剩下一個的時候，自動隱藏

Tint Color 尚未選取的小白點顏色

Current Page 目前選取的小白點顏色

研究UIDate Picker

透過 UIPickerView 來觀看 preferredDatePickerStyle、Mode 、minuteInterval 變化

preferredDatePickerStyle

Mode

minuteInterval

preferredDatePickerStyle 如果選擇 compact 或是 inline ，Model 是無法選擇 countDownTimer ，如果強制會造成閃退

以上是大部分常用的 UI 元件介紹，我想透過 UIPickerView 來即時觀看在手機內的變化，剛好也能複習 UIPickerView 的使用方法，未來也能加入其它元件的介紹，有問題歡迎留言與我交流謝謝。

UIPickerView

#How to use UIPickerView in Swift

GitHub

GitHub - jasonyen1009/learningUI