iOS模仿印象笔记主界面心得

是的，就是那头绿底白象 ;)

其主界面的特点在于：

1. 使用了多段列表
2. 使用了自定义Section头
3. 使用了树形显示结果
4. 在显示树中子节点时来了些活泼的动画效果

大家估计都会装印象笔记，所以这里不演示效果了 ；）

我这里简单说说如何尽可能的“像”印象的主界面，这里所说的“像”并不力求完全一致，而是吸取和参考其优秀的UI布局框架，在灵活的加入一些自己的想法 ;)

因为是模仿，所以没有特别精调，所以只能算是“简装房”

1.快速插入测试静态数据

对于其大多数的显示，我们只需要显示静态的“fake”数据,所以速度可以很快:

form +++ Section() <<< LabelRow(){row in row.title = "? 全部习惯 (199)" } +++ Section("最近习惯目录") <<< LabelRow(){row in row.title = "? kt2018(14)" } <<< LabelRow(){row in row.title = "? kd2018(6)" } <<< LabelRow(){row in row.title = "? kg_big(3)" } +++ Section("习惯组"){section in //自定义Section头，后面有叙。
    section.header = GroupSectionHeader()
} <<< TreeTVRow(){row in //init Row ...
    row.cell.delegate = self
} <<< LabelRow(){row in row.title = "⭐️ 收藏夹" } <<< ButtonRow(){row in row.title = "update table height" }.onCellSelection {cell,row in self.updateTableHeight()
}

2.自定义Section头

我们需要在Section头部的靠右位置添加一个增加按钮，用来添加新的项目；这就涉及到布局：

let btn = UIButton(type: .contactAdd)

btn.addTarget(self, action: #selector(self.tapHandler(sender:)), for: .touchUpInside) btn.tintColor = .green view.addSubview(btn)

btn.snp.makeConstraints {make in make.left.equalTo(label.snp.right).offset(10)
    make.right.equalTo(view)
    make.height.equalTo(view).offset(-5)
    make.centerY.equalTo(label)
}

3.树级结构视图

我是用了第三方的TreeTableView，貌似作者是也国人，写的非常简洁，非常棒！但加入我的项目需要对应略微做些适应性的修改！比如：

• 如果节点下面没有子节点就不用显示下拉箭头
• 节点对象做了进一步的包装以方便调用

所以如果可以我会用Swift扩展原有类（TreeTableView是用Objc写的），如果实在不行，就在原有Objc代码上增加功能。

4.动画翻转箭头

这是一个非常小的动画效果，但画龙点睛，有了它当点击节点时就会生动许多，所以你值得拥有 ;)

我们所做的很简单，就是根据节点是否展开选择怎么旋转箭头图片:

///根据节点是否展开选择如何旋转箭头 func updateArrowView(){ if node.isExpaned{
        arrowView.transform = .identity
    }else{
        arrowView.transform = CGAffineTransform(rotationAngle: .pi)
    }
}

5.结尾

以上就是几个关键点，运行App看下效果:

That’s All!!! 谢谢观赏 :)