使用自动布局

Hanyang Li

已于 2023-07-25 13:43:04 修改

阅读量936

点赞数

分类专栏： Swift Sina 文章标签： iOS Swift

于 2022-04-07 18:08:38 首次发布

本文链接：https://blog.csdn.net/u011193452/article/details/124022925

版权

Swift Sina 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

1. 创建控件

///界面显示
class DemoView: UIView {
    
    //构造函数 initWithFrame 是UIView 的指定构造函数
    //使用纯代码开发使用的
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    //initWithCoder - 使用 SB & XIB 开发加载的函数
    //使用 storyboard 开发的入口
    required init?(coder: NSCoder) {
        //导致如果使用 SB 开发，调用这个视图，会直接崩溃
        //阻止使用 SB 使用当前自定义视图
        //如果只希望当前视图被纯代码的方式加载，可以使用 fatalError
        //atalError("init(coder:) has not been implemented")
        super.init(coder: coder)
        setupUI()
    }
    
    //MARK: - 懒加载控件
    /// 图标，使用 image： 构造函数创建的 imageView 默认就是 image 的大小
    private lazy var iconView: UIImageView = UIImageView(image: UIImage(named: "visitordiscover_feed_image_smallicon"))
    
    ///遮罩图像
    private lazy var markView: UIImageView = UIImageView(image: UIImage(named: "visitordiscover_feed_mask_smallicon"))
   
    /// 小房子
    private lazy var homeView: UIImageView = UIImageView(image: UIImage(named: "visitordiscover_feed_image_house"))
    ///消息文字
    private lazy var  messageLabel: UILabel = {
        let lable = UILabel()
        //,关注一些人，回这看看有什么惊喜,关注一些人，回这看看有什么惊喜
        lable.text = "关注一些人，回这看看有什么惊喜"
        //界面设计上，避免使用纯黑色
        lable.textColor = UIColor.darkGray
        lable.font = UIFont.systemFont(ofSize: 14)
        lable.numberOfLines = 0
        return lable
    }()
    //注册按钮
    private lazy var registerButton: UIButton = {
        var button = UIButton()
        button.setTitle("注册", for: UIControl.State.normal)
        button.setTitleColor(UIColor.orange, for: UIControl.State.normal)
        button.setBackgroundImage(UIImage(named: "common_button_white_disable"), for: UIControl.State.normal)
        return button
    }()
    
    //登录按钮
    private lazy var loginButton: UIButton = {
        var button = UIButton()
        button.setTitle("登录", for: UIControl.State.normal)
        button.setTitleColor(UIColor.darkGray, for: UIControl.State.normal)
        button.setBackgroundImage(UIImage(named: "common_button_white_disable"), for: UIControl.State.normal)
        return button
    }()
}

2. 设置界面

2.1 原生方式布局

extension DemoView{
    //设置界面
    private func setupUI(){
        //1.添加控件
        addSubview(iconView)
        addSubview(markView)
        addSubview(homeView)
        addSubview(messageLabel)
        addSubview(registerButton)
        addSubview(loginButton)
        //2.设置自动布局
        /**
           添加约束需要添加到父视图上
           建议，子视图最好有一个统一的参照物
         */
        //translatesAutoresizingMaskIntoConstraints 默认是 true，支持使用 setFrame 的方式设置控件位置
        // false 支持使用自动布局来设置控件位置
        for v in subviews{
            v.translatesAutoresizingMaskIntoConstraints = false
        }
       
        //1.背景图标
        addConstraint(NSLayoutConstraint(item: iconView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: iconView, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1.0, constant: 0))
        //2.小房子
        addConstraint(NSLayoutConstraint(item: homeView, attribute: .centerX, relatedBy: .equal, toItem: iconView, attribute: .centerX, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: homeView, attribute: .centerY, relatedBy: .equal, toItem: iconView, attribute: .centerY, multiplier: 1.0, constant: 0))
        //3.消息文字
        addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .centerX, relatedBy: .equal, toItem: iconView, attribute: .centerX, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .top, relatedBy: .equal, toItem: iconView, attribute: .bottom, multiplier: 1.0, constant: 5))
         //文字宽高
        addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 224))
        addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant:36))
        //4.注册
        addConstraint(NSLayoutConstraint(item: registerButton, attribute: .top, relatedBy: .equal, toItem: messageLabel, attribute: .bottom, multiplier: 1.0, constant: 5))
        addConstraint(NSLayoutConstraint(item: registerButton, attribute: .left, relatedBy: .equal, toItem: messageLabel, attribute: .left, multiplier: 1.0, constant: 0))
        //注册宽高
        addConstraint(NSLayoutConstraint(item: registerButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100))
        addConstraint(NSLayoutConstraint(item: registerButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 36))
        //5.登录
        addConstraint(NSLayoutConstraint(item: loginButton, attribute: .top, relatedBy: .equal, toItem: messageLabel, attribute: .bottom, multiplier: 1.0, constant: 5))
        addConstraint(NSLayoutConstraint(item: loginButton, attribute: .right, relatedBy: .equal, toItem: messageLabel, attribute: .right, multiplier: 1.0, constant: 0))
        //登录宽高
        addConstraint(NSLayoutConstraint(item: loginButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100))
        addConstraint(NSLayoutConstraint(item: loginButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 36))
        //6.遮罩图像
        /**
          VFL： 可视化格式语言
          H：水平方向
          V：垂直方向
          |：边界
          [] 包装控件
         metrics: 是一个字典[名字: NSNumber] - VFL 字符串中表示某一个数值
         */
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[mask]-0-|", options: [], metrics: nil, views: ["mask": markView]))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[mask]-(bthHeight)-[regButton]", options: [], metrics: ["bthHeight": -36], views: ["mask": markView,"regButton": registerButton]))
        
        //设置背景 - 灰度值 R = G  = B，在 UI 元素中，大多数都使用灰度图，或者纯色图(安全色)
        backgroundColor = UIColor(white: 234/255.0, alpha: 1.0)
    }
}

2.2 SnapKit 方式布局

//MARK: - 设置界面
extension VisitorView{
    //设置界面
    private func setupUI(){
        //1.添加控件
        addSubview(iconView)
        addSubview(maskIView)
        addSubview(homeView)
        addSubview(messageLabel)
        addSubview(registerButton)
        addSubview(loginButton)
        
        //2.设置自动布局
        //1>背景图标
        // make 理解为要添加的约束对象
        iconView.snp.makeConstraints { make in
            //指定 centerX 属性 等于 ‘参照对象’. 'snp_'参照属性值
            //offset 就是指定相对视图
            make.centerX.equalTo(self.snp.centerX)
            make.centerY.equalTo(self.snp.centerY).offset(-60)
        }
        //2>小房子
        homeView.snp.makeConstraints { make in
            make.center.equalTo(iconView.snp.center)
        }
        //3>消息文字 - 宽高
        messageLabel.snp.makeConstraints { make in
            make.centerX.equalTo(iconView.snp.centerX)
            make.top.equalTo(iconView.snp.bottom).offset(5)
            make.width.equalTo(224)
            make.height.equalTo(36)
        }
 
       //4>注册 - 宽高
        registerButton.snp.makeConstraints { make in
            make.top.equalTo(messageLabel.snp.bottom).offset(10)
            make.left.equalTo(messageLabel.snp.left)
            make.width.equalTo(100)
            make.height.equalTo(36)
        }
        
        //5>登录 - 宽高
        loginButton.snp.makeConstraints { make in
            make.top.equalTo(messageLabel.snp.bottom).offset(10)
            make.right.equalTo(messageLabel.snp.right)
            make.width.equalTo(100)
            make.height.equalTo(36)
        }
        //6>遮罩图像
        maskIView.snp.makeConstraints { make in
            make.top.equalTo(self.snp.top)
            make.left.equalTo(self.snp.left)
            make.right.equalTo(self.snp.right)
            make.bottom.equalTo(registerButton.snp.top).offset(-40)
        }
        //3.设置背景 - 灰度值 R = G  = B，在 UI 元素中，大多数都使用灰度图，或者纯色图(安全色)
       backgroundColor = UIColor(white: 237/255.0, alpha: 1.0)
    }
}