SnapKit使用详解

来源：互联网发布：淘宝账号怎么注册不了编辑：程序博客网时间：2024/06/10 07:39

SnapKit（自动布局）的作用同SDAutoLayout、Masonry（前身），通过约束实现控件的自动布局；比StoryBoard的优点是代码实现，维护起来比较方便（复杂界面多个人协作）。我觉得iOS的自动布局很像是Android里的RelativeLayout，通过跟父控件、子控件、兄弟控件的相对关系确定最终的大小和位置。

GtiHub地址：https://github.com/SnapKit/SnapKit

使用Cocoapod引用到工程里：

# Uncomment the next line to define a global platform for your project# platform :ios, '9.0'target 'SnapkitTest' do  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks  use_frameworks!  pod ’SnapKit’, ‘~> 3.2.0’  # Pods for SnapkitTest  target 'SnapkitTestTests' do    inherit! :search_paths    # Pods for testing  end  target 'SnapkitTestUITests' do    inherit! :search_paths    # Pods for testing  endend

在Swift文件头添加import SnapKit即可。

SnapKit的使用方法：使用snp.makeConstraint方法添加约束，包括：边距、宽、高、上下左右距离； SnapKit还支持删除约束、更新约束等，以及相对位置（inset,offset）和倍率修正（multipleBy和divideBy）。

SnapKit支持如下属性：

视图属性（ViewAttribute）布局属性（NSLayoutAttribute）view.snp.leftNSLayoutAttribute.Leftview.snp.rightNSLayoutAttribute.Rightview.snp.topNSLayoutAttribute.Topview.snp.bottomNSLayoutAttribute.Bottomview.snp.leadingNSLayoutAttribute.Leadingview.snp.trailingNSLayoutAttribute.Trailingview.snp.widthNSLayoutAttribute.Widthview.snp.heightNSLayoutAttribute.Heightview.snp.centerXNSLayoutAttribute.CenterXview.snp.centerYNSLayoutAttribute.CenterYview.snp.baselineNSLayoutAttribute.Baseline

首页2个按钮：

        button1?.snp.makeConstraints{ make in            make.width.equalTo(140)            make.height.equalTo((button1?.snp.width)!).multipliedBy(0.3)   //通过宽高比例得出值，类似于Android的layout_weight            make.centerX.equalTo(self.view.center.x)   //横向居中            make.top.equalTo(100)        }                button2?.snp.makeConstraints({ make in            make.width.equalTo(140)            make.height.equalTo((button2?.snp.width)!).multipliedBy(0.3)            make.centerX.equalTo(self.view.center.x)            make.top.equalTo(button1!.snp.bottom).offset(20)   //相对位置，纵向按钮间距        })

先调用addSubView方法后才能设置约束！通过上面示例看出Snapkit的使用方法很简单，就是实现一个闭包。

点击按钮切换到下一个界面时，也可以通过代码方式实现（另一种是在StoryBorad里设置）。

self.navigationController?.pushViewController(SimpleUseViewController(), animated: false)

点击“按钮1”显示1个红块和5个按钮，点击5个按钮可以看出添加、删除、更新约束，还可以添加切换时的动画效果。

注意：变更约束条件时必须用layoutIfNeede函数，强制刷新界面。

      UIView.animate(withDuration: 1, animations: {                self.view.layoutIfNeeded()    //强制刷新布局                            })

“按钮2”用代码实现了一个tableView及item布局，可以使用代码实现Cell布局（包括UICollectionViewCell）。必须在init函数里实例化view控件。

class LineTableViewCell: UITableViewCell {    var icon: UIView?     //圆圈图标    var name: UILabel?    var mobile: UILabel?    var desc: UILabel?    var container: UIView?    var comment: UILabel?        let gapHori: CGFloat = 20   //横向间距    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {        super.init(style: style, reuseIdentifier: reuseIdentifier)                initViews()    }        required init?(coder aDecoder: NSCoder) {        fatalError("init(coder:) has not been implemented")    }        override func awakeFromNib() {        super.awakeFromNib()        // Initialization code            }    override func setSelected(_ selected: Bool, animated: Bool) {        super.setSelected(selected, animated: animated)        // Configure the view for the selected state    }    func initViews() {        name = UILabel()        name?.font = UIFont.systemFont(ofSize: 20)        name?.textColor = UIColor.black        name?.text = "姓名"        name?.sizeToFit()  //填充文本，不用宽高。等同于Android的wrap_content        self.contentView.addSubview(name!)        name?.snp.makeConstraints{ make in            make.top.equalTo(contentView).offset(15)            make.left.equalTo(contentView).offset(40)        }                icon = UIView()        icon?.backgroundColor = UIColor.orange        icon?.layer.cornerRadius = 5        icon?.layer.masksToBounds  = true        self.contentView.addSubview(icon!)        icon?.snp.makeConstraints{ make in            make.top.equalTo(contentView).offset(15)            make.left.equalTo(contentView).offset(gapHori)            make.width.height.equalTo(10)            make.centerY.equalTo((name?.snp.centerY)!)        }                mobile = UILabel()        mobile?.font = UIFont.systemFont(ofSize: 14)        mobile?.textColor = UIColor.black        mobile?.text = "手机号码"        mobile?.sizeToFit()        self.contentView.addSubview(mobile!)        mobile?.snp.makeConstraints{ make in            make.top.equalTo(self.contentView).offset(15)            make.left.equalTo(name!.snp.right).offset(gapHori)            make.centerY.equalTo((name?.snp.centerY)!)        }            desc = UILabel()        desc?.font = UIFont.systemFont(ofSize: 12)        desc?.textColor = UIColor.black        desc?.numberOfLines = 1   //最多1行        desc?.lineBreakMode = .byTruncatingTail   //超过边界时显示...        desc?.sizeToFit()        desc?.text = "描述"        self.contentView.addSubview(desc!)        desc?.snp.makeConstraints{ make in            make.top.equalTo((name?.snp.bottom)!).offset(10)            make.left.equalTo((name?.snp.left)!)            make.right.equalTo(contentView).offset(-10)        }                //类似在Android ViewGroup里添加一个TextView        container = UIView()        container?.backgroundColor = UIColor.lightGray        container?.layer.cornerRadius = 5        self.contentView.addSubview(container!)        container?.snp.makeConstraints{ make in            make.top.equalTo((desc?.snp.bottom)!).offset(10)            make.left.equalTo((desc?.snp.left)!)            make.right.equalTo(contentView).offset(-10)            make.bottom.equalTo(contentView).offset(-10)        }                comment = UILabel()        comment?.lineBreakMode = .byWordWrapping        comment?.font = UIFont.boldSystemFont(ofSize: 10)        comment?.textColor = UIColor.red        comment?.numberOfLines = 0   //0表示不限制行数        comment?.sizeToFit()        container?.addSubview(comment!)        comment?.snp.makeConstraints{ make in            make.edges.equalTo(container!).inset(UIEdgeInsetsMake(5, 5, 5, 5))   //跟父布局的边界，inset类似于android的padding        }                    }}

Demo代码： http://download.csdn.net/detail/brycegao321/9855762

阅读全文

0 0