iOS 自动收起展开组件

自动收起展开组件

前情

当我们页面中或者一个cell中有多个或一个View需要灵活展示,且我们用的是AutoLayout布局(包括Snapkit 和Masonry),我们隐藏或者展示一个View会很麻烦,如以下布局:

369746247-0de187f5-68b8-4ae2-b99d-b083d46b3545.png

我们有这样一个cell布局,其中tag行中的tag Label是灵活展示的,也就是说根据服务返回各种标签判断标签是否展示,有可能只展示tag1 和 tag4, 也有可能全部展示,也有可能一个都不展示。

如果按照常规思路,比如tag2和tag3不展示,我们需要将tag2宽度设置为0, 并且需要将左边距重置为0, tag3亦是如此。

如果tag1 不展示,我们需要将其宽度设置为0, 且右边距也设置为0。多种情况都有可能存在,可想代码多复杂且非常难维护。

有没有一种方式能简化代码、且易懂、代码更好维护,成为开发此库的目标。

思路

早之前还在使用XIB布局的时候,曾经使用过一个三方库叫做FDCollapsibleConstraints, 它思路为 将 NSLayoutConstaints 加入到一个Array中,记录每个Constaints的原始值, 如果fd_collapsed设置为YES, 则就会将所有加入到Array中的约束设置为 0, 否则则还原至之前的关联的原始值,并且作者将fd_collapsibleConstraints声明为IBOutletCollection 也就是XIB中可直接进行连线约束的,对于XIB约束或者系统约束确实很方便。

但是由于XIB占用内存大、冲突难解决的问题,一般项目中已经禁止使用了。所以我们的项目亦是如此,那么我们通过Snapkit或者Masonry布局者因无法直接获取到NSLayoutConstraints,也就无法直接加入到自动折叠约束Array中,如果变换思路取,也会很麻烦。

所以我们也需要遗弃FDCollapsibleConstraints 以及它的思路。

我们实现的思路为:

  1. 当给UIView调用一个实例方法时候,传入显示且需要恢复的边距 或者 隐藏且需要隐藏的边距 或者 只需要隐藏

  2. 根据UIView的constraints 遍历寻找到需要隐藏或者显示的约束

  3. 重置约束

实现

import Foundation
extension NSLayoutConstraint {
 private struct AssociationKey {
 static var key = 0
 }
 func clear() {
 if constant != 0 {
 objc_setAssociatedObject(self, &AssociationKey.key, NSNumber(floatLiteral: self.constant), .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
 self.constant = 0
 }
 }

 func restore() {
 guard let oldConstraint = objc_getAssociatedObject(self, &AssociationKey.key) as? NSNumber else {
 return
 }
 self.constant = oldConstraint.doubleValue
 objc_setAssociatedObject(self, &AssociationKey.key, nil, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
 }
}

首先给NSLayoutConstraints 增加两个方法(不管是Snapkit还是Masonry 其实最后都是NSLayoutConstraints):

1、clear() 清除约束 && 保留原始约束值

2、restore 恢复约束(恢复clear存储下来的原始值)

public extension UIView {
 struct Direction: OptionSet {
 public var rawValue: Int

 public static let left = Direction(rawValue: 1 << 0)
 public static let right = Direction(rawValue: 1 << 1)
 public static let top = Direction(rawValue: 1 << 2)
 public static let bottom = Direction(rawValue: 1 << 3)
 public static let all: Direction = [.left, .right, .top, .bottom]

 public init(rawValue: Int) {
 self.rawValue = rawValue
 }
 }

 enum VisibleType {
 case visible(direction: Direction)
 case invisible
 case gone(direction: Direction)
 }

 func setVisible(_ visible: VisibleType) {
 switch visible {
 case .visible(let direction):
 guard let superview = self.superview else {
 return
 }
 if direction.contains(.left) {
 restoreConstraint(with: .left, on: superview)
 restoreConstraint(with: .leading, on: superview)
 }
 if direction.contains(.right) {
 restoreConstraint(with: .right, on: superview)
 restoreConstraint(with: .trailing, on: superview)
 }
 if direction.contains(.top) {
 restoreConstraint(with: .top, on: superview)
 }
 if direction.contains(.bottom) {
 restoreConstraint(with: .bottom, on: superview)
 }
 restoreConstraint(with: .width, on: self)
 restoreConstraint(with: .height, on: self)
 case .gone(let direction):
 guard let superview = self.superview else {
 return
 }
 if direction.contains(.left) || direction.contains(.right) {
 clearConstraint(with: .width, on: self)
 if direction.contains(.left) {
 clearConstraint(with: .leading, on: superview)
 clearConstraint(with: .left, on: superview)
 }
 if direction.contains(.right) {
 clearConstraint(with: .right, on: superview)
 clearConstraint(with: .trailing, on: superview)
 }
 }
 if direction.contains(.top) || direction.contains(.bottom) {
 clearConstraint(with: .height, on: self)
 if direction.contains(.top) {
 clearConstraint(with: .top, on: superview)
 }
 if direction.contains(.bottom) {
 clearConstraint(with: .bottom, on: superview)
 }
 }
 case .invisible:
 self.isHidden = true
 }
 }

 private func clearConstraint(with attribute: NSLayoutAttribute, on view: UIView) {
 guard let constraints = findConstraints(in: view, attribute: attribute) else {
 return
 }

 constraints.forEach { constraint in
 constraint.clear()
 }
 }

 private func restoreConstraint(with attribute: NSLayoutAttribute, on view: UIView) {
 guard let constraints = findConstraints(in: view, attribute: attribute) else {
 return
 }

 constraints.forEach { constraint in
 constraint.restore()
 }
 }

 private func findConstraints(in view: UIView, attribute: NSLayoutAttribute) -> [NSLayoutConstraint]? {
 return view.constraints.filter { constraint in
 guard let firstItem = constraint.firstItem as? NSObject else {
 return false
 }

 if firstItem == self && constraint.firstAttribute == attribute {
 return true
 }

 guard let secondItem = constraint.secondItem as? NSObject else {
 return false
 }

 return secondItem == self && constraint.secondAttribute == attribute
 }
 }
}
  1. 设置一个UIView的分类,方便调用

  2. 声明边距类型:Direction, 分别为上、下、左、右、 全部

  3. 声明显示隐藏类型:visible(direction: Direction) 显示 && 显示的边距, invisible 只隐藏, gone(direction: Direction) 隐藏且隐藏边距

  4. 声明方法 func setVisible(_ visible: VisibleType), 内部根据visible类型,进行filter约束 且 重置为0或者恢复

  5. 为什么private func findConstraints(in view: UIView, attribute: NSLayoutAttribute) -> [NSLayoutConstraint]? 返回的是约束数组, 因为以下两种情况:

    1. 当一个带有intrinsicContentSize UIView或者子类,比如Label、 Button, 系统会自动增加NSLayoutConstraintsIntrinsicWidth 和 NSLayoutConstraintsIntrinsicHeight, 如果你还增加了高度宽度约束,这时候其实宽度高度各两个。

    2. 相关联的约束可能有多个

总结

感谢开源库https://github.com/MotokiMiyagi/UIViewVisibility/tree/master 提供的思路。

当前实现的为swift版本,如果需要使用Objective-c的可以使用以上库,但是需要注意实现中的第5点,此库是有问题的。

需要使用三方库的童鞋,可以直接到https://github.com/HaoXianSen/HRViewVisible 集成使用

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

推荐阅读更多精彩内容