效果图
效果图
<br />
1、UI布局 第一个页面的布局很简单，就不做介绍了
- 重点讲下第二个的页面的布局
1.1、在Main.storyboard中拖入一个ViewController
设置大小
<br />
1.2、拖入一个imageView，并设置约束下左右为0 上 -20
效果图
<br />
1.3、添加返回按钮和标题
拖入button
按钮
<br />
拖入label,设置字体居中
label
label
<br />
1.4 拖入两个textfiled
选择第一个拖入的textfiled
第一个textfiled
选择第二个textfiled,按住ctrl键
设置如图
如图
<br />
1.5、拖入一个button
第一步
第二步
<br />
然后在自己选择背景颜色，placehloder，设置image最后效果如下
最终效果
<br />
<br /><br />
2、创建一个类，继承ViewController,并且和拖入的ViewController进行关联
然后把textfiled、button拖入到你创建的ViewController中
- 然后在点击storyboard中的textfiled
把约束拖入到Viewcontroller中
再次使用上面的方法把密码框的约束也拖入到viewcontroller中
首先先声明属性：PS（你的命名可以与我的不同，自己做出相应的修改）
//账号
@IBOutlet weak var account: UITextField!
//密码
@IBOutlet weak var password: UITextField!
//登录
@IBOutlet weak var loginBtn: UIButton!
//密码的约束
@IBOutlet weak var passwordLine: NSLayoutConstraint!
//账号的约束
@IBOutlet weak var accouneLine: NSLayoutConstraint!
//按钮的bounds
var btnBounds : CGRect! = CGRectZero
然后重写下面两个方法
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
passwordLine.constant -= UIScreen.mainScreen().bounds.width
accouneLine.constant -= UIScreen.mainScreen().bounds.width
btnBounds = loginBtn.bounds
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
UIView.animateWithDuration(0.75) {
self.accouneLine.constant = 0
self.view.layoutIfNeeded()
}
UIView.animateWithDuration(0.75, delay: 0.2, options: UIViewAnimationOptions.CurveLinear, animations: {
self.passwordLine.constant = 0
self.view.layoutIfNeeded()
}, completion: nil)
}
<br />
监听登录按钮点击事件和按下事件
@IBAction func btnTouchDown(sender: UIButton) {
UIView.animateWithDuration(0.25) {
sender.bounds = CGRect(x: self.btnBounds.origin.x + 20, y: 0, width: self.btnBounds.size.width - 40, height: self.btnBounds.size.height)
}
}
@IBAction func loginBtnClick(sender: UIButton) {
UIView.animateWithDuration(0.75, delay: 0, usingSpringWithDamping: 0.35, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
sender.enabled = false
sender.bounds = CGRect(x: self.btnBounds.origin.x - 40, y: self.btnBounds.origin.y, width: self.btnBounds.size.width + 80, height: self.btnBounds.size.height)
}) { (_) in
sender.enabled = true
}
}
<br />
监听返回按钮的点击事件
@IBAction func btn(sender: UIButton) {
dismissViewControllerAnimated(true, completion: nil)
}
<br />
最后在ViewDidLoad中设置圆角
override func viewDidLoad() {
super.viewDidLoad()
loginBtn.layer.cornerRadius = 5
account.layer.cornerRadius = 5
password.layer.cornerRadius = 5
}
<br />
