在实际业务中，我们经常遇到一个业务控件，由几个小控件组合完成。比如用户头像组件：有头像图片、等级图片、红点提示视图等。为了提高封装性和重用性，一般都会自定义一个视图控件来添加这些小控件。这样有一个副作用就是增加了一层视图层级，如下图所示：

如何优雅地减少视图层级？ - 图1

视图层级多了一层，在布局计算时会更加耗时。视图对象多了一个，内存消耗会更多。那有没有办法即保证了控件的封装性，又可以减少一层视图的包裹呢？答案就是它：UILayoutGuide，用了它之后的效果如下图：

如何优雅地减少视图层级？ - 图2

减少了一层视图，但是显示效果和封装效果一样。

重要的事情讲三遍：
本方案仅提供一个有趣的思路，并不保证其性能！
本方案仅提供一个有趣的思路，并不保证其性能！
本方案仅提供一个有趣的思路，并不保证其性能！

LayoutContainer

LayoutContainerGithub地址

UILayoutGuide是iOS9引入的，就是为了解决需要有占位视图的场景。它不会出现在视图层级里面，也不会有视图对象，只会在布局引擎起作用。下面是官方注释可以细细品味：

UILayoutGuides will not show up in the view hierarchy, but may be used as items in an NSLayoutConstraint and represent a rectangle in the layout engine.

所以，创建继承UILayoutGuide的LayoutContainer类，当做子控件的布局容器。子控件只需要相对LayoutContainer布局，就可以实现布局独立，达到其封装性。

LayoutContainer使用示例

LayoutContainer子类化示例

UserAvatarContainer就是用户头像的封装控件。内部的子控件，只需要相对self布局即可。

  1. class UserAvatarContainer: LayoutContainer {
  2.     lazy var avatarImageView: UIImageView = {
  3.         let imageView = UIImageView()
  4.         imageView.image = UIImage(named: "lufei.jpg")
  5.         imageView.contentMode = UIView.ContentMode.scaleAspectFill
  6.         return imageView
  7.     }()
  8.     lazy var vipImageView: UIImageView = {
  9.         let imageView = UIImageView()
  10.         imageView.image = UIImage(named: "VIP")
  11.         return imageView
  12.     }()
  14.     override func initializeViews() {
  15.         super.initializeViews()
  17.         avatarImageView.translatesAutoresizingMaskIntoConstraints = false
  18.         avatarImageView.layer.masksToBounds = true
  19.         //需要用owningView当做父视图
  20.         owningView?.addSubview(avatarImageView)
  21.         avatarImageView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
  22.         avatarImageView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
  23.         avatarImageView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
  24.         avatarImageView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
  26.         vipImageView.translatesAutoresizingMaskIntoConstraints = false
  27.         owningView?.addSubview(vipImageView)
  28.         vipImageView.widthAnchor.constraint(equalToConstant: 30).isActive = true
  29.         vipImageView.heightAnchor.constraint(equalToConstant: 30).isActive = true
  30.         vipImageView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
  31.         vipImageView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
  32.     }
  34.     override func layoutSubviews() {
  35.         super.layoutSubviews()
  37.         //如果是通过约束布局，这里可以根据layoutFrame(不能使用frame、bounds、center)进行布局调整
  38.         avatarImageView.layer.cornerRadius = layoutFrame.size.height/2
  39.     }
  40. }

添加LayoutContainer

  1. class ListCell: UITableViewCell {
  2.     lazy var avatarContainer: UserAvatarContainer = {
  3.         UserAvatarContainer()
  4.     }()
  6.     override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
  7.         super.init(style: style, reuseIdentifier: reuseIdentifier)
  9.         contentView.addLayoutGuide(avatarContainer)
  10.         avatarContainer.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 12).isActive = true
  11.         avatarContainer.heightAnchor.constraint(equalToConstant: 100).isActive = true
  12.         avatarContainer.widthAnchor.constraint(equalToConstant: 100).isActive = true
  13.         avatarContainer.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
  14.     }
  15. }

注意事项

  • LayoutContainer的子视图需要在initializeViews方法里面进行初始化
  • LayoutContainer的子视图的布局在layoutSubviews进行调整
  • LayoutContainer仅能被addLayoutGuide一次，不允许被removeLayoutGuide。不然initializeViews会被调用多次，导致重复创建视图！

iOS学习栈（将持续更新）上

**

结交人脉

最后推荐个我的iOS交流群：789143298 ‘有一个共同的圈子很重要，结识人脉！里面都是iOS开发，全栈发展，欢迎入驻，共同进步！（群内会免费提供一些群主收藏的免费学习书籍资料以及整理好的几百道面试题和答案文档！） 如何优雅地减少视图层级？ - 图3

收录：原文地址