zoukankan      html  css  js  c++  java
  • iOS UITableView ExpandableHeader(可形变的Header)

    最常见的header就是在tableView下拉时header里的图片会放大的那种,

    最近研究了一下,自己实现了这种header。

    1.设置TableView的contentInset(为header预留空间)和contentOffset(使tableView加载完成后显示最顶部)

    tableView.contentInset = UIEdgeInsetsMake(headerHeight, 0, 0, 0)
    tableView.setContentOffset(CGPoint.init(x: 0, y: -headerHeight), animated: true)

    2.为header添加约束(SnapKit)

    var headerHeightConstraint:Constraint?
    var headerTopConstraint:Constraint?
    tableView.addSubview(header)
    header.snp.makeConstraints { (m) in
        headerTopConstraint = m.top.equalTo(tableView.snp.top).offset(-headerHeight).constraint
        m.leading.equalTo(tableView.snp.leading)
        m.width.equalTo(SCREEN_WIDTH)
        headerHeightConstraint = m.height.equalTo(headerHeight).constraint
    }

    3.监测TableView的contentOffset,并改变header的约束

    let yOffset = -scrollView.contentOffset.y
    if yOffset >  headerHeight {
        headerTopConstraint?.layoutConstraints.first?.constant = -yOffset
        headerHeightConstraint?.layoutConstraints.first?.constant = yOffset
    }

    4.设置header部分的contentMode(模式如果不对,内容缩放的方式就会不同)

    header.contentMode = .scaleAspectFit //模式请根据实际情况自选

    Ficow原创,转载请注明出处:http://www.cnblogs.com/ficow/p/7301110.html

  • 相关阅读:
    Mysql 交集、并集、差集、行转列、列转行
    Scala隐式转换
    ES添加elasticsearch-sql插件
    ES添加elasticsearch-analysis-ik分词器
    ES添加Head插件
    ES操作详解
    ES集群安装
    Scala上下界以及比较器Ordered
    Java对象比较
    解方程(来自学长的“遗产”)
  • 原文地址:https://www.cnblogs.com/ficow/p/7301110.html
Copyright © 2011-2022 走看看