iOS:tableView表头下拉放大的效果

现在很多app设置了这样的效果,如何实现这一效果呢,其实只需要简单的两个方法,那么我们直接上代码

首先我们在storyBoard里拖一个tableView并设置Navigation,接下来我们在tableView中设置图片
我是自己写了个方法然后在viewDidLoad中调用,也可以直接在viewDidLoad中设置

 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 200)];
 [imageView sd_setImageWithURL:[NSURL URLWithString:self.goods.image_default] placeholderImage:[UIImage imageNamed:@"crazy"]];
 self.tableView.tableHeaderView =  imageView;

方法一:

//scrollView的方法视图滑动时 实时调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat width = self.view.frame.size.width;
    // 图片宽度
    CGFloat yOffset = scrollView.contentOffset.y;
    // 偏移的y值
    if(yOffset < 0)
    {CGFloat totalOffset = 200 + ABS(yOffset);
        CGFloat f = totalOffset / 200;
        //拉伸后的图片的frame应该是同比例缩放。
        self.tableView.tableHeaderView.frame =  CGRectMake(- (width *f-width) / 2, yOffset, width * f, totalOffset);
    }
}

方法二:

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //获取偏移量
    CGPoint offset = scrollView.contentOffset;
    //判断是否改变
    if (offset.y < 0) {
        CGRect rect = self.tableView.tableHeaderView.frame;
        //我们只需要改变图片的y值和高度即可
        rect.origin.y = offset.y;
        rect.size.height = 200 - offset.y;
        self.tableView.tableHeaderView.frame = rect;
    }
}

效果如下:

 

时间: 2024-10-13 05:10:09

iOS:tableView表头下拉放大的效果的相关文章

iOS 使用TableView实现下拉放大

第一步: 布置需要放大的TopView: 1. 创建TopView UIImageView *topView = [[UIImageView alloc] init]; 2. 设置图片 UIImage *image = [UIImage imageNamed:@"Big.jpg"]; topView.image = image; 3. 设置TopView的初始位置及内容模式 // 初始位置 topView.frame = CGRectMake(0, -TopViewH, ScreenW

猫猫学iOS之tableView的下拉放大图片的方法

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:效果 tableview下拉的时候上部分图片放大会 二:代码 直接上代码,自己研究吧 #import "NYViewController.h" //图片的高度 const CGFloat NYTopViewH = 350; @interface NYViewController () @property (nonatomic, weak) UIIm

iOS UI开发--下拉放大

1. 要实现的效果,左图为下拉前,右图为下拉后   2.首先最容易想到的是往tableHeaderView上,放一张图片. 但是tableHeaderView的宽度是固定的,这就意味着不容易做缩放效果; 顶部的上边界始终和tableView的上边界挨着,这就意味着下拉前只显示部分图片的效果,不容易实现. 3.最终方案:给tableView添加一张图片作为子视图, 并且图片应该在cell的下面,一开始图片只显示一部分 4. 示例代码 4.1 在ViewDidload方法中: UIImage *a

经验之谈—实现图片下拉放大的效果

这里我们主要是用一下,如何能保持原来的图片的宽高比来轻松的实现放大的效果,主要的是UIViewContentModeScaleAspectFill这个起的效果: 我们用tableView来展示这个效果吧 我们这里并没有计算图片的宽高比,直接用UIViewContentModeScaleAspectFill来实现 #import "ViewController.h" const CGFloat ZYTopViewH = 350; @interface ViewController ()

iOS下拉放大的效果

一,code // 创建UIImageView UIImageView* topView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"IMG_1483"]]; topView.frame = CGRectMake(0, -HGTopViewH, self.tableView.frame.size.width, HGTopViewH); // 设置模式,自动伸缩,全拼显示 topView.contentMode =

iOS TableView实现下拉刷新数据

1. 创建刷新控件, 可通过xib或代码方式创建控件: - (void)setupDownRefresh { /* 添加刷新控件 */ UIRefreshControl *control = [[UIRefreshControl alloc] init]; // 监听事件 [control addTarget:self action:@selector(loadNewDatas:) forControlEvents:UIControlEventValueChanged]; [self.table

动画特效十:下拉放大

今天继续我们的动画之行.这一次讲解的动画效果,在很多app中都能见到,就是下拉放大图片的效果.先看看效果图. 注:UITableView中内容的展示,不是本节的重点,所以忽略不计. 一.动画分析: 1. 默认情况下,图片正常显示(没有被拉大),并且导航条是隐藏的. 2. 当往下拉动的时候,图片等比例放大,并且选项卡(Tab1 和 Tab2)的View也会跟着下来. 3. 当往上推的时候,当选项卡推到导航栏正下方的时候,图片完全消失,导航栏也完全出现,并且不允许再往上推. 二.方案设计: 1. 头

表格的下拉放大 ----------王朋

表格下拉放大的效果是: 创建TableView和ImageView,分别设置相关属性: _tableView=[[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain]; _tableView.delegate=self; _tableView.dataSource=self; [_tableView registerClass:[UITableViewCell class] forCellReu

iOS开发-UITableView顶部图片下拉放大

关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollView的顶部图片也可以实现同样的效果,简单看一下实现的效果: 控制器中设置需要的属性变量: @property (strong,nonatomic) UITableView *tableView; @property (strong,nonatomic) NSArray *data; @proper