ios实现tableView顶部弹簧图片效果

大家可能注意到有些tableView的顶部图片,会随着你拉伸而跟着拉伸变大。本文实例为大家分享了ios实现tableView顶部“弹簧”图片,供大家参考,具体内容如下

一种思路是将图片放置tableView的tableHeaderView上当tablview下移改变图片的frame达到效果。当然这个效果特别简单,高手可以略过。

代码如下

import UIKit

class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

 lazy var myTableView : UITableView! = {
  var tableView = UITableView.init(frame: self.view.frame,style:UITableViewStyle.plain)
  tableView.delegate = self
  tableView.dataSource = self
  tableView.register(UITableViewCell.classForCoder(), forCellReuseIdentifier: "mycell")
  return tableView
 }()

 var headerImageView:UIImageView?
 var headerView:UIView?
 var headerViewHeight:CGFloat = 0.0

 override func viewDidLoad() {
  super.viewDidLoad()
  // Do any additional setup after loading the view, typically from a nib.
  setupUI()
 }

 func setupUI(){
  headerView = UIView.init(frame: CGRect(x:0,y:0,width:self.view.frame.width,height:300))
  headerViewHeight = headerView!.frame.height;
  self.view.addSubview(headerView!)
  headerImageView = UIImageView.init(frame: headerView!.frame)
  headerImageView?.image = UIImage.init(named: "bg-mine")
  headerView?.addSubview(headerImageView!)
  myTableView.tableHeaderView = headerView
  self.view.addSubview(myTableView)

 }

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return 2
 }
 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell:UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "mycell", for: indexPath)
  cell.textLabel?.text = "测试"
  return cell
 }
 func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
  return 50
 }

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
  let contentOffSetY = scrollView.contentOffset.y
  if contentOffSetY < 0 {
   var rect = headerView?.frame
   rect?.size.height = headerViewHeight - contentOffSetY
   let headerViewWidth = headerView?.frame.size.width
   rect?.size.width = headerViewWidth!*(headerViewHeight-contentOffSetY)/headerViewHeight
   rect?.origin.x = -((rect?.size.width)! - headerViewWidth!)/2
   rect?.origin.y = contentOffSetY
   headerView?.frame = rect!
   headerImageView?.frame = rect!
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 改变iOS应用中UITableView的背景颜色与背景图片的方法

    改变UITableView的header.footer背景颜色 改变UITableView的header.footer背景颜色,这是个很常见的问题.之前知道的一般做法是,通过实现tableView: viewForHeaderInSection:返回一个自定义的View,里面什么都不填,只设背景颜色.但是今天发现一个更简洁的做法: 对于iOS 6及以后的系统,实现这个新的delegate函数即可: 复制代码 代码如下: - (void)tableView:(UITableView *)table

  • ios UITableView实现无数据加载占位图片

    本文介绍了ios UITableView实现无数据占位图片,分享给大家,具体如下: 国际惯例,上效果图 该效果的实现主要是使用runtime的交叉方法实现,将tableView的reloadData与自定义的kk_reloadData交换.新建tableView的Category. 交换方法主要代码 + (void)swizzleInstanceSelector:(SEL)originalSel WithSwizzledSelector:(SEL)swizzledSel { Method ori

  • iOS开发之tableView点击下拉扩展与内嵌collectionView上传图片效果

    废话不多说了,直奔主题. //需要的效果 1.设置window的根视图控制器为一个UITableViewController #import "AppDelegate.h" #import "YCTableViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFin

  • ios实现tableView顶部弹簧图片效果

    大家可能注意到有些tableView的顶部图片,会随着你拉伸而跟着拉伸变大.本文实例为大家分享了ios实现tableView顶部"弹簧"图片,供大家参考,具体内容如下 一种思路是将图片放置tableView的tableHeaderView上当tablview下移改变图片的frame达到效果.当然这个效果特别简单,高手可以略过. 代码如下 import UIKit class ViewController: UIViewController,UITableViewDataSource,U

  • Android模仿实现微博详情页滑动固定顶部栏的效果实例

    前言 最近项目中遇到一个需求,类似微博详情页的效果,通过查找相关的资料终于找了对应的解决方案,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下我们今天要实现的效果: 滑动固定顶部栏效果图 这段时间公司准备重构一个项目,刚好用到这个效果,我就顺带写了篇文章,关于这个效果网上可以找到一些相关资料的,昨晚看了一些,感觉都不是很好,有点模棱两可的样子,也没提到需要注意的一些关键点,这里来做下整理,由于涉及到公司的代码,这里我就写个简单的Demo来讲解. 简单Demo 传统套路:

  • iOS仿高德首页推拉效果实例代码

    目录 1.滑动view的调用 2.为视图添加滑动手势和tableview相关配置 3.设置允许同时响应多个手势 4.滑动相关逻辑处理 4.注意点 总结 上面是实现的效果,滑动的视图是新建的一个UIView子类 1.滑动view的调用 SlideView * slideView = [[SlideView alloc] initWithFrame:CGRectMake(0, kScreenHeight-140, kScreenWidth, kScreenHeight-100)]; slideVie

  • JS点击缩略图整屏居中放大图片效果

    需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候,才发现实现起来有难度. 1 第一张点击图片将图片放大 下面将这种方式也贴出来,供自己参考(万一有需要的小伙伴正好需要这样的功能呢): <div> <img class="dialog" src="xxx.j

  • jQuery实现网页顶部固定导航效果代码

    本文实例讲述了jQuery实现网页顶部固定导航效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • iOS使用xib手动实现动画效果的方法

    今天在做项目的时候,项目使用的是xib做的,页面中需要有个动画效果,使用UIView动画如下图: 想要改变视图的宽度来实现动画效果,将这条约束拖到ViewController成为属性 使用如下方法,发现不能进行动画效果: 但是发现没有相关的动画效果.最后发现使用xib动画和普通的动画不太一样,需要如下操作才能成功实现动画: 两个重要的注意事项: 您需要调用 layoutIfNeeded 动画块内.苹果公司其实建议你称之为一次之前要确保所有挂起的布局操作已完成的动画块 您需要调用它专门在父视图上

  • vue+jquery+lodash实现滑动时顶部悬浮固定效果

    本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码,供大家参考,具体内容如下 这个效果是一个项目中抽出来的一个demo效果. 前期准备: 1. 引入jQ <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 引入lodash.js npm install lodash -D fixTop.vue组件的 <template> <div class=

  • iOS模拟中奖名单循环滚动效果

    本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下 1.动态效果图: 2.思路: (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等于所有cell的总高度,且加载相同的的数据,父视图的clipsToBounds属性一定要设置为true (2)滚动:使用计时器,调整时间及滚动大小,使展示平滑 (3)循环算法:当A列表滚动出界面时,就把它添加在B列表的下面,B列表滚动出界面时,就把它添加在A列表的下面,形成循环效果 3.Swift版

  • Android仿ios加载loading菊花图效果

    项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况的显示,还有显示文字.   使用ProgressBar 来加载动画转圈,这里使用drawable文件 定义转圈动画, indeterminateDrawable 属性进行加载. <?xml version="1.0" encoding="utf-8"?> &

  • iOS实现音乐播放器图片旋转

    本文实例为大家分享了iOS实现音乐播放器图片旋转的具体代码,供大家参考,具体内容如下 通过给继承与 UIImageView 的类 CXGImageView 添加 CABasicAnimation 转动动画,实现播放器图片转动效果. 主要提供三个方法: startRotating, stopRotating,resumeRotate startRotating /// 开始动画 func startRotating() { let rotateAnimation = CABasicAnimatio

随机推荐