SnapKit代码布局登录示例

登录页面布局

效果图

代码

//
//  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, y: 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, y: 0, width: 44, 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)
        }

    }
  

}