iOS 类似QQ空间表视图下拉头部视图放大效果实现

原创 2015年07月10日 09:54:49

UITableView 是 UIScrollView 的子类。
所以 UIScrollView 的代理方法,在UITableView 上同样能够得到适用。
既然如此那么我们就能够知道,在表格下拉的过程中,需要让头部的图片能够有稍微放大的效果出现,我们可以根据滚动视图滚动监听事件,通过获取表格下拉的拉伸量,从而去改变图片的大小即可!

所以:

     /**
     *  关键处理:通过滚动视图获取到滚动偏移量从而去改变图片的变化
     */

以下是效果实现的代码:

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>

@property(nonatomic,strong)UIImageView *headImageView;//头部图片
@property(nonatomic,strong)UITableView *tableView;//列表
@property(nonatomic,strong)NSMutableArray *infoArray;//数据源数组

@end
//屏幕宽、高 宏定义
#define IPHONE_W ([UIScreen mainScreen].bounds.size.width)
#define IPHONE_H ([UIScreen mainScreen].bounds.size.height)

@implementation ViewController

static CGFloat kImageOriginHight =300;

- (void)viewDidLoad
{

    [super viewDidLoad];

    //将视图添加到界面上
    [self.view addSubview:self.tableView];
    [self.tableView addSubview:self.headImageView];
}

#pragma mark -- 滚动视图的代理方法
- (void)scrollViewDidScroll:(UIScrollView*)scrollView{
    /**
     *  关键处理:通过滚动视图获取到滚动偏移量从而去改变图片的变化
     */
    //获取滚动视图y值的偏移量
    CGFloat yOffset  = scrollView.contentOffset.y;
    NSLog(@"yOffset===%f",yOffset);
    CGFloat xOffset = (yOffset +kImageOriginHight)/2;

    if(yOffset < -kImageOriginHight) {
        CGRect f =self.headImageView.frame;
        f.origin.y= yOffset ;
        f.size.height=  -yOffset;
        f.origin.x= xOffset;
        //int abs(int i); // 处理int类型的取绝对值
        //double fabs(double i); //处理double类型的取绝对值
        //float fabsf(float i); //处理float类型的取绝对值
        f.size.width=IPHONE_W + fabs(xOffset)*2;

        self.headImageView.frame= f;
    }
}
#pragma mark -- 表视图代理

-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath{
    return 44;
}

-(NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section{
    return self.infoArray.count;
}

-(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath{
    static NSString *identify =@"MyCellIndifer";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identify];
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identify];
    }
    cell.textLabel.text= [self.infoArray objectAtIndex:indexPath.row];
    return cell;
}

#pragma mark -- get 初始化操作

-(UITableView *)tableView
{
    if (_tableView == nil)
    {
        _tableView= [[UITableView alloc]initWithFrame:CGRectMake(0,0,IPHONE_W,IPHONE_H)];
        _tableView.delegate=self;
        _tableView.dataSource=self;
        _tableView.backgroundColor= [UIColor lightGrayColor];
        //内容由kImageOriginHight 处开始显示。
        _tableView.contentInset=UIEdgeInsetsMake(kImageOriginHight,0,0,0);
    }
    return _tableView;
}

-(NSMutableArray *)infoArray
{
    if (_infoArray == nil)
    {
        _infoArray = [[NSMutableArray alloc]init];
        for (int i=0; i<40; i++)
        {
            [_infoArray addObject:@"这是一个测试!"];
        }
    }
    return _infoArray;
}

-(UIImageView *)headImageView
{
    if (_headImageView == nil)
    {
        _headImageView= [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"111"]];
        _headImageView.frame=CGRectMake(0, -kImageOriginHight,IPHONE_W,kImageOriginHight);
    }
    return _headImageView;
}

效果图显示:
普通状态 下拉效果

关于:
iOS 关于滚动视图contentSize、contentOffset、contentInset 设定以及用法,可以到此查看 滚动视图contentSize、contentOffset、contentInset

Demo 下载:demo 点此下载

版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS个人页面图片下拉放大效果

在研究苹果原生UIImageView控件的时候,知道有一个属性叫contentMode.那这个属性是干嘛的呢?和下拉拖动图放大有什么关系呢?我们先来看一下效果图再说:(同时也欢迎大家来我的GitHub...
  • IM_Loser
  • IM_Loser
  • 2016年12月17日 16:34
  • 2941

iOS Scrollview 的头部view的拉伸伸缩效果

iOS Scrollview 的头部view的拉伸伸缩效果
  • huangyongf
  • huangyongf
  • 2016年07月09日 21:22
  • 2937

UIUITableView头部图片拉伸放大效果

实现如同“百度糯米”中“我的”界面头部图片拉伸效果: 原理很简单UITableView继承自UIScrollView,上下拉动时候,判断拉动然后根据拉动的距离改变UIImageView的frame即...
  • guobing19871024
  • guobing19871024
  • 2016年03月09日 19:52
  • 1016

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

这里我们主要是用一下,如何能保持原来的图片的宽高比来轻松的实现放大的效果,主要的是UIViewContentModeScaleAspectFill这个起的效果: 我们用tableView来展示这个效果...
  • yi_zz32
  • yi_zz32
  • 2015年12月22日 19:15
  • 10508

iOS 类似QQ空间表视图下拉头部视图放大效果实现

  • 2015年07月10日 09:49
  • 362KB
  • 下载

今天给大家分享ios中下拉图片变大效果

这个效果就是下面有一个tableView,tableView的子视图是一张图片(imageView),下拉的时候图片到一定的偏移量就会放大(改变frame)。 创建视图的的代码在这里就不写了相信大家...
  • zh9282
  • zh9282
  • 2015年02月22日 22:44
  • 1459

iOS图片拉伸技巧

纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能、极强的用户体验、华丽简洁的外观。华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设...
  • q199109106q
  • q199109106q
  • 2013年02月26日 21:40
  • 132067

iOS 如何实现顶部图片的在滑动时的伸缩

直接上图看效果,我工程里面有两个方法,推荐第一个加在tableview上面的方法,第二个方法有缺陷,在图片上不能进行滑动 github地址:https://github.com/l...
  • baidu_31326173
  • baidu_31326173
  • 2016年07月16日 23:50
  • 532

实现 iOS 头部拉伸效果

主要涉及到导航栏透明度、图片拉伸、列表头部等。导航栏透明度的实现。 列表拖动距离的监听,及图片放大的实现。 导航透明度的设置 添加系统导航栏的Category实现 声明部分:@interface ...
  • u010596262
  • u010596262
  • 2017年11月02日 09:14
  • 69

iOS:使头视图随表视图滚动

使tableVIew的头视图使表示图滚动,需要使用设置tableView的分组样式 _tableView = [[UITableView alloc] initWithFrame:self....
  • u013243469
  • u013243469
  • 2015年05月18日 10:56
  • 1175
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS 类似QQ空间表视图下拉头部视图放大效果实现
举报原因:
原因补充:

(最多只允许输入30个字)