iOS 如何更好的适配异形屏(刘海屏)

通常我们在适配异形屏的时候,我们可能会使用 safeAreaInsets。使用时机不对的话,safeAreaInsets 的值还会存在问题。或许你可以使用 key windowsafeAreaInsets ,亦或者你可以通过重写 func safeAreaInsetsDidChange() 方法,在合适的时候来修改布局,但这些操作总是比较麻烦,用起来并不舒服。

有没有更好的方式呢🤔?我们先来介绍两个属性。

layoutMargins

The default spacing to use when laying out content in the view.

iOS 8 新增,通过属性名,我们就了解他是什么了,简单来说就是布局中的边距。

A view's margins

layoutMarginsGuide

A layout guide representing the view’s margins.

iOS 9 新增,你可以通过链接查看更多相关信息。

如何使用

下面将用过三个用例来总结用法。

示例一

let pinkView = UIView()
pinkView.backgroundColor = .systemPink
pinkView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(pinkView)

view.addConstraints([
    NSLayoutConstraint(
        item: pinkView,
        attribute: .leftMargin,
        relatedBy: .equal,
        toItem: view,
        attribute: .leftMargin,
        multiplier: 1,
        constant: 0
    ),
    NSLayoutConstraint(
        item: pinkView,
        attribute: .rightMargin,
        relatedBy: .equal,
        toItem: view,
        attribute: .rightMargin,
        multiplier: 1,
        constant: 0
    ),
    NSLayoutConstraint(
        item: pinkView,
        attribute: .topMargin,
        relatedBy: .equal,
        toItem: view,
        attribute: .topMargin,
        multiplier: 1,
        constant: 0
    ),
    NSLayoutConstraint(
        item: pinkView,
        attribute: .bottomMargin,
        relatedBy: .equal,
        toItem: view,
        attribute: .bottomMargin,
        multiplier: 1,
        constant: 0
    )
])

view.layoutMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)

可以使用 SnapKit 来简化下代码:

let pinkView = UIView()
pinkView.backgroundColor = .systemBlue
pinkView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(pinkView)

pinkView.snp.makeConstraints {
    $0.edges.equalTo(self.view.layoutMarginsGuide)
}

layoutMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)

self.view.layoutMarginsGuide 还可以替换成 self.view.snp.margins ,两种方式等价。

同时,SnapKit 也可以单独控制四个边距,使用 leftMarginrightMargintopMarginbottomMargin 单独控制。

用例一-竖屏

用例一-横屏

可以从上面的图片中看到,虽然我们设置四个边距都是20pt。但是,实际在不同的机型上面的显示,我们肉眼可见的边距是不一样的,横竖屏也是不一样的。

这里就有必要提一下安全区域了,我们可以看到pinkView的视图完全显示在安全区域内。事实上我们在设置布局的代码时,并没有考虑各种情况的安全区域,但是系统就是为我们加上了。我想,到这里,这种布局的好用之处就不言而喻了。

用例二

我们经常会遇到在页面底部添加一个工具条的需求,这个工具条需要做异形屏的适配。也就是在异形屏上,将其底部增加留白,使操作相关元素处在安全区域内。

我们可以这样来布局,达到适配的目的:

class BottomBar: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
      
        backgroundColor = .white

        layoutMargins = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)

        addSubview(button)

        button.snp.makeConstraints {
        $0.width.equalTo(90)
            $0.height.equalTo(36)
            $0.right.equalTo(self.snp.rightMargin)
            $0.top.equalTo(self.snp.topMargin)          
            $0.bottom.equalTo(self.snp.bottomMargin)
        }
    }
  ...
}

class ViewController: UIViewController {

    let bottomView = BottomBar()
  
    override func viewDidLoad() {
        super.viewDidLoad()
      
        view.addSubview(bottomView)
        bottomView.snp.makeConstraints {
            $0.left.bottom.right.equalTo(0)
        }
    }
}
用例二-竖屏
用例二-横屏

可以看到底部工具条已经适配好了,不需要我们做其他的操作👏👏👏。

上面的代码,是通过一个尺寸固定的 button 将底部工具条撑满,我们将 button 的底部约束设置成 $0.bottom.equalTo(self.snp.bottomMargin) ,设置容器视图的 layoutMargins.bottom = 15 ,实际效果图上面,系统已经为我们自动加上了safeAreaInsets.bottom 。同时,横屏状态下,底部和右边都加上了安全距离🥳🥳🥳。

用例三

在用例二的基础上,我们再加上一个工具条。

view.addSubview(bottomView)
bottomView.snp.makeConstraints {
    $0.left.bottom.right.equalTo(0)
}

let bottomView = BottomBar()
view.addSubview(bottomView)
bottomView.snp.makeConstraints {
    $0.left.right.equalTo(0)
    $0.bottom.equalTo(self.bottomView.snp.top).offset(-1)
}
用例三

明显,我们看到上面那个工具条的底部没有加上 safeAreaInsets.bottom ,但是右边加上了 safeAreaInsets.right

到这里,我们可以得出总结:

当视图的任意边跟屏幕的边缘相交时,使用 layoutMarginsGuide 布局,系统会给相应的边的边距加上安全区域的边距

另外,我们可以在后续的使用中来动态调整 layoutMargins 的值,调整后,视图会实时刷新相应边距,甚至你可以给这个变化加上动画。

是不是很Nice?😎

总结

这种布局方式,还是非常推荐使用的,通过上面的例子,我们就可以体会到它的妙处。在这个过程中,我们不需要考虑 safeAreaInsets ,仅仅只需要理解 layoutMarginslayoutMarginsGuide,并正确的使用即可。

本文只是简单介绍了 layoutMarginslayoutMarginsGuide 的一部分使用,算是抛砖引玉。关于它的使用,我想只有你真正使用起来,你才会觉得这样的设计的好处。

值得注意的是,在 iOS 11 推出了 directionalLayoutMargins ,也就是 layoutMargins 的替代物,使用起来并没有大的差别,仅仅是换了个枚举而已,感兴趣的可以自己去试下。关于布局还有很多内容值得研究,正确的使用系统提供的方法,可以使我们写出更健壮的代码,同时可以让我们很好的适配不同的屏幕,和不同的设备。


如果这篇文章对你有帮助,不妨随手点个赞!谢谢❤️

⚠️原创,禁止未授权转载,只接收链接转载,不接受内容拷贝转载!

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

推荐阅读更多精彩内容