登录页面布局
效果图
代码
// // LoginController.swift // // Created by 雷神 on 2017/9/14. // copyright © 2017年 aso.ren. All rights reserved. // import UIKit import SnapKit class LoginController: UIViewController,UITextFieldDelegate { var txtUser: UITextField! //用户名输入框 var txtPwd: UITextField! //密码输入款 var formView: UIView! //登陆框视图 var horizontalLine: UIView! //分隔线 var confirmButton:UIButton! //登录按钮 var titleLabelOne: UILabel! //标题标签 var titleLabelTwo: UILabel! //标题标签 var topConstraint: Constraint? //登录框距顶部距离约束 override func viewDidLoad() { super.viewDidLoad() //视图背景色 self.view.backgroundColor = UIColor(red: 61/255,green: 66/255,blue: 78/255,alpha: 100) //登录框高度 let formViewHeightWidth = 280 //登录框背景 self.formView = UIView() self.formView.layer.borderWidth = 0.5 self.formView.layer.borderColor = UIColor.lightGray.cgColor self.formView.backgroundColor = UIColor.white self.formView.layer.cornerRadius = 5 self.view.addSubview(self.formView) //最常规的设置模式 self.formView.snp.makeConstraints { (make) -> Void in make.left.equalTo(15) make.right.equalTo(-15) //存储top属性 self.topConstraint = make.centerY.equalTo(self.view).constraint make.height.width.equalTo(formViewHeightWidth) } //标题一 self.titleLabelOne = UILabel() self.titleLabelOne.text = "Log in to" self.titleLabelOne.textColor = UIColor.black self.titleLabelOne.font = UIFont.systemFont(ofSize: 20) self.formView.addSubview(self.titleLabelOne) self.titleLabelOne.snp.makeConstraints { (make) -> Void in make.centerX.equalTo(self.formView) make.height.equalTo(24) make.top.equalTo(self.formView.snp.top).offset(15) } //标题二 self.titleLabelTwo = UILabel() self.titleLabelTwo.text = "Designer News" self.titleLabelTwo.textColor = UIColor.black self.titleLabelTwo.font = UIFont.systemFont(ofSize: 30) self.formView.addSubview(self.titleLabelTwo) self.titleLabelTwo.snp.makeConstraints { (make) -> Void in make.centerX.equalTo(self.formView) make.height.equalTo(34) make.top.equalTo(self.titleLabelOne.snp.top).offset(25) } //用户名图标 let imgIconMail = UIImageView(frame:CGRect(x: 11,y: 11,width: 26,height: 18)) imgIconMail.image = UIImage(named:"icon-mail") //用户名输入框 self.txtUser = UITextField() self.txtUser.delegate = self self.txtUser.placeholder = "Email" self.txtUser.tag = 100 self.txtUser.borderStyle=UITextBorderStyle.roundedRect self.txtUser.leftView = UIView(frame:CGRect(x: 0,y: 0,width: 44,height: 44)) self.txtUser.leftviewmode = UITextFieldviewmode.always self.txtUser.returnKeyType = UIReturnKeyType.next //用户名左侧图标布局设置 self.txtUser.leftView!.addSubview(imgIconMail) self.formView.addSubview(self.txtUser) //布局 self.txtUser.snp.makeConstraints { (make) -> Void in make.left.equalTo(15) make.right.equalTo(-15) make.height.equalTo(44) make.top.equalTo(self.titleLabelTwo.snp.bottom).offset(20) } //密码图标 let imgIconPwd = UIImageView(frame:CGRect(x: 11,width: 25,height: 25)) imgIconPwd.image = UIImage(named:"icon-password") //密码输入框 self.txtPwd = UITextField() self.txtPwd.delegate = self self.txtPwd.placeholder = "Password" self.txtPwd.tag = 101 self.txtPwd.borderStyle=UITextBorderStyle.roundedRect self.txtPwd.leftView = UIView(frame:CGRect(x: 0,height: 44)) self.txtPwd.leftviewmode = UITextFieldviewmode.always self.txtPwd.returnKeyType = UIReturnKeyType.next //密码框左侧图标布局 self.txtPwd.leftView!.addSubview(imgIconPwd) self.formView.addSubview(self.txtPwd) //布局 self.txtPwd.snp.makeConstraints { (make) -> Void in make.left.equalTo(15) make.right.equalTo(-15) make.height.equalTo(44) make.top.equalTo(self.txtUser.snp.bottom).offset(20) } //登录按钮 self.confirmButton = UIButton() self.confirmButton.setTitle("Log in",for: UIControlState()) self.confirmButton.setTitleColor(UIColor.white,for: UIControlState()) self.confirmButton.layer.cornerRadius = 5 self.confirmButton.backgroundColor = UIColor(red: 44/255,green: 99/255,blue: 210/255,alpha: 100) self.view.addSubview(self.confirmButton) self.confirmButton.snp.makeConstraints { (make) -> Void in make.left.equalTo(35) make.right.equalTo(-35) make.height.equalTo(44) make.top.equalTo(self.txtPwd.snp.bottom).offset(20) } } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。