ios基础UI

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

2021-10-29  本文已影响0人  前行哲

通常我们在适配异形屏的时候,我们可能会使用 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 的替代物,使用起来并没有大的差别,仅仅是换了个枚举而已,感兴趣的可以自己去试下。关于布局还有很多内容值得研究,正确的使用系统提供的方法,可以使我们写出更健壮的代码,同时可以让我们很好的适配不同的屏幕,和不同的设备。


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

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

上一篇下一篇

猜你喜欢

热点阅读