Swift Automatic Layout Library Snapkit implementation of a login page use detailed

The previous articles explain how to use automatic layout library Snapkit. This article uses a complete sample (login page) to demonstrate how to automate the layout using Snapkit in the actual project.

1, the effect chart is as follows

2, Code explanation
(1) User name, password input area (white area) Set Vertical center constraint, its height is fixed 90, width adaptive (15 pixels from the left and right side of the screen)
(2) User name, password input box between the split line is the use of gray background UIView implementation, its height is 1 pixels, the same set vertical center constraints.
(3) Login button distance above the input area of 20 pixels, height fixed is 40, the width of the same adaptive (from the left and right side of the screen are 15 pixels)
(4) above the title label according to the input area below 20 pixels, the width of adaptive, center content.
(5) When the keyboard appears, modify the input area of the vertical constraint offset, so that it moves upward (when moving, the landing button, the title tag will also move synchronously). Avoid the keyboard to block the login box when using a small screen device.
(6) When the keyboard disappears, the entire login area will move down back to the original position (up and down the process have animation effect)

3, page code

Import Uikit
Import Snapkit

Class Viewcontroller:uiviewcontroller, Uitextfielddelegate {

var txtuser:uitextfield! User name Input Box
var txtpwd:uitextfield! Password Input Section
var formview:uiview! Landing Box View
var horizontalline:uiview! Separator line
var confirmbutton:uibutton! Login button
var titlelabel:uilabel! Title label

var topconstraint:constraint? Login box distance from top constraint

Override Func Viewdidload () {
Super.viewdidload ()

View background color
Self.view.backgroundColor = Uicolor (red:1/255, green:170/255, blue:235/255,
ALPHA:1)

Login Box Height
Let Formviewheight = 90
Login Box Background
Self.formview = UIView ()
Self.formView.layer.borderWidth = 0.5
Self.formView.layer.borderColor = Uicolor.lightgraycolor (). Cgcolor
Self.formView.backgroundColor = Uicolor.whitecolor ()
Self.formView.layer.cornerRadius = 5
Self.view.addSubview (Self.formview)
Most general setup mode
self.formView.snp_makeConstraints {(make)-> Void in
Make.left.equalTo (15)
Make.right.equalTo (-15)
Store Top Property
Self.topconstraint = Make.centerY.equalTo (self.view). Constraint
Make.height.equalTo (Formviewheight)
}

Separator line
Self.horizontalline = UIView ()
Self.horizontalLine.backgroundColor = Uicolor.lightgraycolor ()
Self.formView.addSubview (Self.horizontalline)
self.horizontalLine.snp_makeConstraints {(make)-> Void in
Make.height.equalTo (0.5)
Make.left.equalTo (15)
Make.right.equalTo (-15)
Make.centerY.equalTo (Self.formview)
}

Password map
Let ImgLock1 = Uiimageview (Frame:cgrectmake (11, 11, 22, 22))
Imglock1.image = UIImage (named: "Iconfont-user")

Password map
Let ImgLock2 = Uiimageview (Frame:cgrectmake (11, 11, 22, 22))
Imglock2.image = UIImage (named: "Iconfont-password")

User name Input Box
Self.txtuser = Uitextfield ()
Self.txtUser.delegate = Self
Self.txtUser.placeholder = "User name"
Self.txtUser.tag = 100
Self.txtUser.leftView = UIView (frame:cgrectmake (0, 0, 44, 44))
Self.txtUser.leftViewMode = Uitextfieldviewmode.always
Self.txtUser.returnKeyType = Uireturnkeytype.next

User name input box left icon
self.txtuser.leftview!. Addsubview (IMGLOCK1)
Self.formView.addSubview (Self.txtuser)

Layout
self.txtUser.snp_makeConstraints {(make)-> Void in
Make.left.equalTo (15)
Make.right.equalTo (-15)
Make.height.equalTo (44)
Make.centerY.equalTo (0). Offset (-FORMVIEWHEIGHT/4)
}

Password input Box
Self.txtpwd = Uitextfield ()
Self.txtPwd.delegate = Self
Self.txtPwd.placeholder = "Password"
Self.txtPwd.tag = 101
Self.txtPwd.leftView = UIView (frame:cgrectmake (0, 0, 44, 44))
Self.txtPwd.leftViewMode = Uitextfieldviewmode.always
Self.txtPwd.returnKeyType = Uireturnkeytype.next

Password input box left icon
self.txtpwd.leftview!. Addsubview (ImgLock2)
Self.formView.addSubview (SELF.TXTPWD)

Layout
self.txtPwd.snp_makeConstraints {(make)-> Void in
Make.left.equalTo (15)
Make.right.equalTo (-15)
Make.height.equalTo (44)
Make.centerY.equalTo (0). Offset (FORMVIEWHEIGHT/4)
}

Login button
Self.confirmbutton = UIButton ()
Self.confirmButton.setTitle ("Login", ForState:UIControlState.Normal)
Self.confirmButton.setTitleColor (Uicolor.blackcolor (),
ForState:UIControlState.Normal)
Self.confirmButton.layer.cornerRadius = 5
Self.confirmButton.backgroundColor = Uicolor (colorliteralred:1, Green:1, Blue:1,
alpha:0.5)
Self.confirmButton.addTarget (Self, Action: #selector (Loginconfrim),
forControlEvents:. Touchupinside)
Self.view.addSubview (Self.confirmbutton)
self.confirmButton.snp_makeConstraints {(make)-> Void in
Make.left.equalTo (15)
Make.top.equalTo (Self.formView.snp_bottom). Offset (20)
Make.right.equalTo (-15)
Make.height.equalTo (44)
}

Title label
Self.titlelabel = Uilabel ()
Self.titleLabel.text = "Hangge.com"
Self.titleLabel.textColor = Uicolor.whitecolor ()
Self.titleLabel.font = uifont.systemfontofsize (36)
Self.view.addSubview (Self.titlelabel)
self.titleLabel.snp_makeConstraints {(make)-> Void in
Make.bottom.equalTo (self.formView.snp_top). Offset (-20)
Make.centerX.equalTo (0)
Make.height.equalTo (44)
}
}

Input box get focus start Edit
Func textfielddidbeginediting (Textfield:uitextfield)
{

Uiview.animatewithduration (0.5, animations: {()-> Void in
Self.topconstraint? Updateoffset (-125)
Self.view.layoutIfNeeded ()
})
}

Action when the input box returns
Func Textfieldshouldreturn (Textfield:uitextfield)-> Bool
{
Let tag = Textfield.tag
Switch Tag {
Case 100:
Self.txtPwd.becomeFirstResponder ()
Case 101:
Loginconfrim ()
Default
Print (Textfield.text)
}
return True
}

Login button click
Func Loginconfrim () {
Close the keyboard
Self.view.endEditing (True)
View constraint restore initial settings
Uiview.animatewithduration (0.5, animations: {()-> Void in
Self.topconstraint? Updateoffset (0)
Self.view.layoutIfNeeded ()
})
}
}

Original: www.hangge.com