表的头视图下拉放大效果

ViewController.h

@interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>
{
    UIImageView *_imageView;
}

ViewController.m

<p>#import "ViewController.h"</p>
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //创建表视图
    UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];
    tableView.backgroundColor = [UIColor clearColor];
    tableView.delegate = self;
    tableView.dataSource = self;
    [self.view addSubview:tableView];

    //创建视图
    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 150)];
    _imageView.image = [UIImage imageNamed:@"image1.jpg"];
    [self.view insertSubview:_imageView belowSubview:tableView];

    UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 150)];
    headView.backgroundColor = [UIColor clearColor];
    tableView.tableHeaderView = headView;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return 40;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *iden = @"cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:iden];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:iden];
    }

    cell.textLabel.text = [NSString stringWithFormat:@"第%d行",indexPath.row];

    return cell;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    //获取到视图Y方向的偏移量
    CGFloat offsetY = scrollView.contentOffset.y;
    CGRect frame = _imageView.frame;
    //向上滑动
    if (offsetY > 0) {
        frame.origin.y = - offsetY;
        _imageView.frame = frame;
    }else {
        //向下滑动

        //1.获取拉伸后图片的高度
        CGFloat height = 150 + ABS(offsetY);

        //图片原来的高度/图片原来的宽度 = 图片放大后的高度/图片放大后的宽度
        //150/320 = height/x
        //2.获取图片放大后的宽度
        CGFloat width = 320 *height/150;

        //3.修改imageView的frame
        _imageView.frame = CGRectMake(-(width-320)/2, -(height-150)/2, width, height);

    }

}

@end
时间: 2024-10-12 10:51:44

表的头视图下拉放大效果的相关文章

动画特效十:下拉放大

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

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

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

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

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

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

点击弹出弹性下拉菜单效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="

三种方式实现下拉菜单效果

使用3种方式实现下拉菜单效果: html/css .js方法实现下拉菜单显示隐藏.jquery方法实现下拉菜单显示隐藏 先看效果图 第一种:html/css方式实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉菜单的实现</title> <style type="text/css"> *{margin

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

JQuery和ASP.NET分别实现级联下拉框效果

在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuery和select来实现汽车厂商和汽车类型的联动 效果图:       逻辑分析图: html代码: [html] view plain copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

下拉菜单效果

之前为大家介绍过有关HTML中的一些比较炫的效果,本篇为大家介绍一些,大家在网站中经常可以见到的一种下拉菜单效果,这种菜单效果一般分为两层,当我们的鼠标经过一级菜单时,隐藏的二级菜单就会显示出来,这样即保证了页面的美观,同时又不会使页面的模块减少,甚至可以增加模块数目. 一.废话不多说,下面我们来通过HTML+CSS为大家实现一下上面的效果,首先请大家先欣赏一下效果图: 1.界面布局代码: <body> <div id="var"> <ul> <