Swift隨手紀錄Day18-新增成員頁面-UIView-SegmentedControl

Darren
Swift

防止偷懶Day18 講了好久的新增成員終於要來做了@@ 預想中希望有一個UIImageView來選擇頭像 當然也要一個TextField來輸入名字,以及註冊用的button 然後有一個選擇守備位置的功能 想了一想,用之前玩過的SegmentedControl來試試效果好了 GO

防止偷懶Day18

講了好久的新增成員終於要來做了@@

預想中希望有一個UIImageView來選擇頭像

當然也要一個TextField來輸入名字,以及註冊用的button

然後有一個選擇守備位置的功能

想了一想,用之前玩過的SegmentedControl來試試效果好了

GO

照例先看看完成的畫面

先看code吧

import

class
AddMemberController
UIViewController
    
    let
=
"P"
"C"
"1B"
"2B"
"3B"
"SS"
"LF"
"CF"
"RF"
    
    override
var
Bool
        return
false
    }
    
    let
UIImageView
=
        let
=
UIImageView
        image.translatesAutoresizingMaskIntoConstraints =
false
        image.image =
UIImage
"picture"
        image.contentMode =
        image.layer.cornerRadius =
5
        image.layer.masksToBounds =
true
        return
    }()
    
    let
UISegmentedControl
=
        let
=
UISegmentedControl
"P"
"C"
"1B"
"2B"
"3B"
"SS"
"LF"
"CF"
"RF"
		sc.selectedSegmentIndex =
0
        sc.translatesAutoresizingMaskIntoConstraints =
false
        return
    }()
    
    let
UITextField
=
        let
=
UITextField
        text.translatesAutoresizingMaskIntoConstraints =
false
        text.placeholder =
"Input Name"
        text.layer.borderColor =
UIColor
        text.layer.borderWidth =
1
        return
    }()
    
    let
UIButton
=
        let
=
UIButton
        button.translatesAutoresizingMaskIntoConstraints =
false
        button.backgroundColor =
        button.setTitle("Register"
        button.addTarget(self
#selector
        return
    }()
    
    override
func
viewDidLoad
        super
        NotificationCenter
self
#selector
AddMemberController
NSNotification
Name
UIKeyboardWillShow
nil
        NotificationCenter
self
#selector
AddMemberController
NSNotification
Name
UIKeyboardWillHide
nil
        view.backgroundColor =
        
        let
=
UIBarButtonItem
"BACK"
self
#selector
        navigationItem.leftBarButtonItem =
        
        view.addSubview(profileImage)
        view.addSubview(positionSegmentedControl)
        view.addSubview(nameText)
        view.addSubview(registerButton)
        
        profileImage.topAnchor.constraint(equalTo: view.topAnchor, constant: 64
=
true
        profileImage.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive =
true
        profileImage.heightAnchor.constraint(equalToConstant: 130
=
true
        profileImage.widthAnchor.constraint(equalToConstant: 130
=
true
        
        positionSegmentedControl.topAnchor.constraint(equalTo: profileImage.bottomAnchor, constant: 32
=
true
        positionSegmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive =
true
        positionSegmentedControl.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -
24
=
true
        positionSegmentedControl.heightAnchor.constraint(equalToConstant: 24
=
true
        
        
        nameText.topAnchor.constraint(equalTo: positionSegmentedControl.bottomAnchor, constant: 12
=
true
        nameText.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive =
true
        nameText.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -
24
=
true
        nameText.heightAnchor.constraint(equalToConstant: 50
=
true
        
        registerButton.topAnchor.constraint(equalTo: nameText.bottomAnchor, constant: 12
=
true
        registerButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive =
true
        registerButton.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -
24
=
true
        registerButton.heightAnchor.constraint(equalToConstant: 50
=
true
        
    }
    
    func
registerNewPlayer
        self
true
nil
    }
    
    func
backHome
        self
true
nil
    }
    
    override
func
touchesBegan
_
touches
Set
UITouch
with
event
UIEvent
        view.endEditing(true
    }
    
    func
keyboardWillShow
notification
NSNotification
        if
let
=
?
UIKeyboardFrameBeginUserInfoKey
as?
NSValue
?
            if
self
==
0
                self
-=
            }
        }
    }
    
    func
keyboardWillHide
notification
NSNotification
        if
let
=
?
UIKeyboardFrameBeginUserInfoKey
as?
NSValue
?
            if
self
!=
0
                self
+=
            }
        }
    }
	
	override
func
viewWillDisappear
animated
Bool
        super
        NSNotificationCenter
self
    }
    
}

11~44先實作需要的元件,UIImageView、UISegmentedControl、UITextField、UIButton

接下來在viewDidLoad將上面四個元件作為subView加入畫面跟設定anchor

在UISegmentedControl內可以設定一個[Any]!的陣列

這裡我們需要九個守備位置,因此放入["P", "C", "1B", "2B", "3B", "SS", "LF", "CF", "RF"]

然後為了避免之後使用者忘記這個欄位把selectedSegmentIndex預設為0

再來是83行點擊註冊鈕觸發的registerNewPlayer function,這邊先讓點擊後畫面在這邊退出回到上一頁

之後這邊準備把資料傳到Firebase上做儲存(應該很快…..吧( ̄ c ̄)y▂ξ)

最後是91行之後的四個function是負責處理點擊UItextField之後畫面出現keyboard的附加動作

第一個function處理點擊keyboard以外的部分會收起keyboard

第二跟第三個function則是分別負責在keyboard出現之後把畫面往上抬高,讓使用者依然看得到UItextField

以及收起來之後畫面還原的工作,而為了處理這兩個動作必須在viewDidLoad裡面設置一個觀察者來觀察keyboard的活動

因此在48、49行加入了NSNotificationCenter

然而加上NSNotificationCenter之後還是得記得在畫面消失之後回收

因此最後在viewWillDisappear裡面remove,完工

完成的畫面動作如下

Thanks for reading!

I hope you found this article helpful. Feel free to share your thoughts or questions.