Swift的一个简单布局Demo

Xcode快捷键:

格式化代码:

control + i (Editor-Structure-Re indent)

移动代码:

alt+command+[ (Editor-Structure-Move Line Up)
alt+command+] (Editor-Structure-Move Line Down)

从当前位置删除到分隔符:

例如: 如下代码, 我们想把dataArray改为resultArray:
let group = dataArray[section]
通常做法是将鼠标放到data后面, 然后按delete多次删除data, 其实删除的这一步可以按住alt+delete; 这样就会删除当前鼠标指针到前面分隔符之间的字符.

向后删除:

fn + delete; 只是Mac系统的功能, 也就是说, 所有的编辑界面都可以用, 不仅限于Xcode

创建桥接文件:

因为目前QMUI还没有Swift版本, 是OC版本, 而我们是Swift项目, 所有需要创建桥接文件, 方法是在项目里面创建一个OC文件, 会自动弹出提示询问是否添加桥接文件, 选择是就行了

#import 

使用:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = UIColor.systemPink
        
        view.addSubview(showMoreButtonView)
    }
    
    @objc func onPrimaryClick(){
        print("点击了按钮")
    }
    
    //懒加载
    lazy var showMoreButtonView: QMUIButton = {
        let result = QMUIButton(frame: CGRect(x: 50, y: 100, width: 200, height: 45))
        result.adjustsButtonWhenHighlighted = true//自动调整高亮效果
        result.titleLabel?.font = UIFont.systemFont(ofSize: 15)
        result.setTitleColor(.white, for: .normal)
        result.backgroundColor = UIColor.blue
        result.layer.cornerRadius = 5
        result.setTitle("从底部显示更多弹窗按钮", for: .normal)
        result.addTarget(self, action: #selector(onPrimaryClick), for: .touchUpInside)
        return result
    }()
}

SnapKit -- 登录注册页

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = "登录"
        
        //输入框
        view.addSubview(accountView)
        view.addSubview(passwordView)
        view.addSubview(primaryButtonView)
        view.addSubview(registerButtonView)
        
        accountView.snp.makeConstraints { make in
            make.left.equalToSuperview().offset(16) //距离父视图左边距离
            make.right.equalToSuperview().offset(-16)//距离父视图右边距离
            if #available(iOS 11.0, *) {
                //距离安全区域的距离
                make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top).offset(16)
            } else {
                // Fallback on earlier versions
            }
            make.height.equalTo(50)
        }
        
        passwordView.snp.makeConstraints { make in
            make.left.equalToSuperview().offset(16) //距离父视图左边距离
            make.right.equalToSuperview().offset(-16)//距离父视图右边距离
            make.top.equalTo(accountView.snp.bottom).offset(16)
            make.height.equalTo(50)
        }
        
        primaryButtonView.snp.makeConstraints { make in
            make.left.equalToSuperview().offset(16) //距离父视图左边距离
            make.right.equalToSuperview().offset(-16)//距离父视图右边距离
            make.top.equalTo(passwordView.snp.bottom).offset(16)
            make.height.equalTo(50)
        }
        
        registerButtonView.snp.makeConstraints { make in
            make.centerX.equalToSuperview() //水平居中
            make.top.equalTo(primaryButtonView.snp.bottom).offset(16)
        }
    }
    
    //懒加载
    lazy var accountView: QMUITextField = {
        let result = QMUITextField()
        result.textInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
        result.backgroundColor = .lightGray
        result.layer.cornerRadius = 5
        result.placeholder = "请输入用户名"
        return result
    }()
    
    lazy var passwordView: QMUITextField = {
        let result = QMUITextField()
        result.textInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
        result.backgroundColor = .lightGray
        result.layer.cornerRadius = 5
        result.placeholder = "请输入密码"
        result.isSecureTextEntry = true
        return result
    }()
    
    lazy var primaryButtonView: QMUIButton = {
        let view = QMUIButton()
        view.adjustsButtonWhenHighlighted = true
        view.titleLabel?.font = UIFont.systemFont(ofSize: 16)
        view.setTitleColor(.white, for: .normal)
        view.backgroundColor = .blue
        view.layer.cornerRadius = 5
        view.setTitle("登录", for: .normal)
        view.addTarget(self, action: #selector(onPrimaryClick), for: .touchUpInside)
        return view
    }()
    
    lazy var registerButtonView: QMUIButton = {
        let view = QMUIButton()
        view.adjustsButtonWhenHighlighted = true
        view.titleLabel?.font = UIFont.systemFont(ofSize: 16)
        view.setTitleColor(.gray, for: .normal)
        view.setTitle("去注册", for: .normal)
        view.sizeToFit() //宽高根据文字大小自适应
        view.addTarget(self, action: #selector(onRegisterClick), for: .touchUpInside)
        return view
    }()
    
    @objc func onPrimaryClick(){
        print("登录")
        navigationController?.pushViewController(SettingController(), animated: true)
    }
    @objc func onRegisterClick(){
        print("去注册")
    }
}

SnapKit -- 设置页

SettingView.swift中, 封装组件:

/// 设置itemVIew
class SettingView: UIView {

    //重写构造方法
    init(){
        super.init(frame: CGRect.zero)
        
        innerInit()//定义公共的init方法
    }

    //重写可视化的init方法
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        
        innerInit()//定义公共的init方法
    }
    
    func innerInit() {
        backgroundColor = .white
        addSubview(iconView)
        addSubview(titleView)
        addSubview(moreIconView)
    }
    
    /// 当视图加入父视图时 / 当视图从父视图移除时调用
    override func didMoveToSuperview() {
        super.didMoveToSuperview()
        
        //添加约束
        iconView.snp.makeConstraints { make in
            make.left.equalToSuperview().offset(16)
            make.centerY.equalToSuperview()
            make.width.equalTo(20)
            make.height.equalTo(20)
        }
        
        titleView.snp.makeConstraints { make in
            make.left.equalTo(iconView.snp.right).offset(16)
            make.centerY.equalToSuperview()
            //不用设置宽高, 根据内容自动宽高
        }
        
        moreIconView.snp.makeConstraints { make in
            make.right.equalToSuperview().offset(-16)
            make.centerY.equalToSuperview()
            make.width.equalTo(20)
            make.height.equalTo(20)
        }
    }
    
    /// 左侧图标
    lazy var iconView: UIImageView = {
        let result = UIImageView()
        result.image = UIImage(named: "Setting")
        return result
    }()
    
    /// 标题
    lazy var titleView: UILabel = {
        let result = UILabel()
        result.text = "设置"
        result.textColor = .black
        return result
    }()
    
    /// 右侧图标
    lazy var moreIconView: UIImageView = {
        let result = UIImageView()
        result.image = UIImage(named: "Arrow")
        return result
    }()
}

SettingController.swift中, 使用组件:

class SettingController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = "设置"
        self.view.backgroundColor = .systemGray
        
        //-------设置item
        self.view.addSubview(settingView)
        self.view.addSubview(collectionView)
       
        //-----设置约束
        settingView.snp.makeConstraints { make in
            make.left.equalToSuperview()
            make.right.equalToSuperview()
            if #available(iOS 11.0, *) {
                make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top).offset(16)
            } else {
                // Fallback on earlier versions
            }
            make.height.equalTo(55)
        }
        
        collectionView.snp.makeConstraints { make in
            make.left.equalToSuperview()
            make.right.equalToSuperview()
            make.top.equalTo(self.settingView.snp.bottom).offset(0.5)
            make.height.equalTo(55)
        }
        
    }
    
    
    
    /// 设置Item
    lazy var settingView: SettingView = {
        let result = SettingView()
        result.titleView.text = "设置"
        //设置点击事件
        result.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onSettingClick(recognizer:))))
        
        return result
    }()
    
    /// 收藏Item
    lazy var collectionView: SettingView = {
        let result = SettingView()
        result.titleView.text = "收藏"
        
        return result
    }()
    
    @objc func onSettingClick(recognizer:UITapGestureRecognizer) {
        print("点击了设置界面的一个item")
    }
}

iOS-屏幕适配(SnapKit) https://juejin.cn/post/6979390190192164878

你可能感兴趣的:(Swift的一个简单布局Demo)