Swift 3.0 使用SnapKit添加约束

首先我们先来了解一下什么是SnapKit。在2016年的WWDC上苹果官方除了把整个生态系统做了一次全面升级之外,伴随而来还有同期发布的Swift 3.0。以前对Swift2.3心理还存在着疑虑。而现在用了一年Swift3.0之后觉得已经非常的严谨相信以后也不会有大太的版本改动。

为了适应各种屏幕尺寸,iOS 6后引入了自动布局(Auto Layout)的概念,通过使用各种 Constraint(约束)来实现页面自适应弹性布局。在oc时期一直用的是Masonry框架,本身就很优雅的框架积累了大量的粉丝来用这个东西,随着Swift3.0的横空出世和众多开发者的使用,单单的oc混编已经显得过于复杂。应广大开发者要求Masonry的作者推出了支持Swift版本的框架,SnapKit框架!!!SnaoKit是一个轻量级的布局框架,是采用链式语法封装的方式来写Constraints

安装

安装的时候要注意SnapKit的安装环境

   iOS 8.0+ / Mac OS X 10.11+ / tvOS 9.0+

   Xcode 8.0+

   Swift 3.0+

下面我要介绍三种安装SnapKit框架的方法:

一、CocoaPods导入SnapKit

 在Podfile文件中添加:

 platform :ios, ‘8.0’

 use_frameworks!

 target 'MyText1' do

 pod 'SnapKit', '~> 3.2.0'

 end

在这里一定要注意"use_frameworks!"一定要填上,不填上不行!!(我也不知道为什么,知道的告诉我!)。然后pod install就可以了!!
pod install

二,使用Carthage安装SnapKit

 github "SnapKit/SnapKit" ~> 3.2.0

然后在项目的根目录下生成

 Carthage -> Build -> iOS -> SnapKit.framework

最后在把文件集成

 Project -> General -> Embedded Binaries

三,手动导入SnaKit:

首先先将下载下来的SnapKit的SnapKit.xcodeproj放在项目中。

在 工程 -> General -> Embedded Binaries 中点击加号,添加SnapKit。framework库到项目中来

这样就可以了

四,如何使用

我们在工作中一般会遇见两种情况使用到SnapKit,第一种是页面的布局,例如注册,登录了,页面罗列了,会用到。还有一种就是自定制tableViewCell的时候会用到SnapKit。首先我们先来看一下在页面中如何使用SnapKit。

这里我创建了一个名为Myview的uiview使用Snapkit对他添加了距上(top)、距左(left)宽高为100的view。
看一下效果:

view

在使用的地方import SnapKit

import UIKit

import SnapKit

class ViewController: UIViewController {

          override func viewDidLoad() {

               super.viewDidLoad()

               let MyView = UIView()

               MyView.backgroundColor = UIColor.red

               self.view.addSubview(MyView)

               MyView.snp.makeConstraints { (make) in

                        make.top.equalTo(self.view).offset(100)

                        make.left.equalTo(self.view).offset(100)

                        make.width.equalTo(100);

                        make.height.equalTo(100);

               }

           }

    }

让我们在看一下在tableviewcell里面如何使用SnapKit自适应:
先看效果:

cell
  import UIKit
import SnapKit

class OneCell: UITableViewCell {
    
    
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        selectionStyle = .none
        awakeFromNib()
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        
        let icon = UIImageView()
        icon.image = #imageLiteral(resourceName: "icon.png")
        self.addSubview(icon)
        icon.snp.makeConstraints { (make) in
            make.top.equalTo(self).offset(10)
            make.left.equalTo(self).offset(10)
            make.width.equalTo(50)
            make.height.equalTo(50)
        }
        
        let oneLabel = UILabel()
        oneLabel.numberOfLines = 0
        oneLabel.textColor = UIColor.black
        oneLabel.text = "这里一般都是标题"
        self.addSubview(oneLabel)
        oneLabel.snp.makeConstraints { (make) in
            make.top.equalTo(self).offset(20)
            make.left.equalTo(icon.snp.right).offset(15)
            make.width.equalTo(200)
            make.height.equalTo(20)
        }
        
        let rightIcon = UIImageView()
        rightIcon.image = #imageLiteral(resourceName: "icon.png")
        self.addSubview(rightIcon)
        rightIcon.snp.makeConstraints { (make) in
            make.bottom.equalTo(self).offset(-10)
            make.right.equalTo(self).offset(-5)
            make.width.equalTo(20)
            make.height.equalTo(20)
        }
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

左侧的图片是对cell的上、左添加的约束,标题是对左侧图片添加的约束,右侧的小图片是对cell的底,右添加的约束.

cell的高度随着label的高度自适应

屏幕快照 2017-08-08 16.39.01.png

我们先声明一个数组来存储tableview要填充的数据,声明表格tableview集成协议方法把数组里的数据放到cell上

import UIKit
import SnapKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    var strarr:[String] = ["某年某月某日在宇宙的某个角落,张根生近一个月第一次走出房间。他的头发蓬松散","张根生一只脚伸到街道的阳光下,而后又缩了回来。一个大妈提着一篮子菜从他身边走过侧脸看了他一下,张根生躲闪着目光企图让自己躲避起来,不要让人注意到他。可是这样做却起到了反效果,每个路过的人","张根生犹豫了再三,鼓起勇气走上街道。他缩着头,大衣把他整个人都掩着严严实实。他的步伐快速。大衣把两边的视野挡住了,他又不敢抬头,只看到行人的腿脚无法十分准确判断他们位置,所以他不可避免地与好几个人相撞了。他恐惧在人群中,仿佛自己就是落入狼群的羊,觉得自己无法呼吸也没法思考,脑子里一直有个声音在呐喊:逃快点,再快点。他的步伐越来越来。撞到人了,他也没有停下来跟人家说"]

    override func viewDidLoad() {
        super.viewDidLoad()
        let tableview = UITableView()
        tableview.frame = CGRect(x: 0, y: 20, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
        tableview.delegate = self
        tableview.dataSource = self
        tableview.estimatedRowHeight = 44.0//添加这句话就不用实现tableview高度协议方法
        self.view.addSubview(tableview)
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return strarr.count;
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = OneCell(style: .default, reuseIdentifier: "OneCell")
        cell.oneLabel.text = strarr[indexPath.row]
        return cell
    }
}

重点是cell里面的label的约束,这个自适应的方法说白了就是根据cell里面的内容来填充cell的高度

import UIKit
import SnapKit

class OneCell: UITableViewCell {
    
    var oneLabel = UILabel()
    
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        selectionStyle = .none
        awakeFromNib()
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        
        oneLabel.numberOfLines = 0
        oneLabel.textColor = UIColor.black
        self.addSubview(oneLabel)
        oneLabel.snp.makeConstraints { (make) in
            make.top.equalTo(self).offset(10)
            make.left.equalTo(self).offset(10)
            make.right.equalTo(self).offset(-10)
            make.bottom.equalTo(self).offset(-10)
        }
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

不要设置label的高度,只设置label距下的距离,使label的内容来填充cell的高度。
最后注意,ViewController里面不用实现tableview height for row 的协议方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,094评论 4 62
  • 1. The sky is painted in Lunacia Florets slashed pen the ...
    小舟清江里阅读 290评论 0 1
  • 男人为什么抽烟 哈哈 有些人 一辈子都不会懂 就因为你不是男人 不要跟我说男女平等 如果平等 我们为什么不说 女人男人
    内蒙小朋友阅读 157评论 0 1
  • 【易经原文·履卦四爻爻辞及象传】 [爻辞]九四,履虎尾,愬愬[注释],终吉。[象传]《象》曰:“愬愬终吉。”志行也...
    大珊老师阅读 913评论 0 4