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

关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollView的顶部图片也可以实现同样的效果,简单看一下实现的效果:

控制器中设置需要的属性变量:

@property  (strong,nonatomic)  UITableView  *tableView;
@property  (strong,nonatomic)  NSArray      *data;
@property   (strong,nonatomic) UIView       *tableHeaderView;
@property  (strong,nonatomic)  UIImageView  *imageView;

初始化属性:

-(UITableView *)tableView{
    if (!_tableView) {
        _tableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 0,SCREENWIDTH, SCREENHEIGHT)];
        _tableView.delegate=self;
        _tableView.dataSource=self;
        _tableView.showsVerticalScrollIndicator=NO;
         _tableView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
        [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:CellIdetifier];
    }
    return _tableView;
}

-(UIView *)tableHeaderView{
    if (!_tableHeaderView) {
        _tableHeaderView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0,SCREENWIDTH, 100)];
    }
    return _tableHeaderView;
}

-(UIImageView *)imageView{
    if (!_imageView) {
        _imageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SCREENWIDTH, 100)];
        _imageView.autoresizingMask=UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
        _imageView.clipsToBounds=YES;
        _imageView.contentMode=UIViewContentModeScaleAspectFill;
    }
    return _imageView;
}

UITableViewDelegate实现:

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
}

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

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell  *cell=[tableView dequeueReusableCellWithIdentifier:CellIdetifier];
    [cell.textLabel setText:self.data[indexPath.row]];
    return cell;
}

 ViewDidLoad中初始化imageView:

    [email protected][@"FlyElephant",@"博客园",@"UITableView图片放大",@"http://www.cnblogs.com/xiaofeixiang/"];
    self.imageView.image=[UIImage imageNamed:@"Girl"];
    self.imageView.contentMode=UIViewContentModeScaleAspectFill;
    [self.tableHeaderView addSubview:self.imageView];
    self.tableView.tableHeaderView=self.tableHeaderView;
    [self.view addSubview:self.tableView];

在UITableViewView向下拉动的过程中,改变imageView的位置:

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGPoint offset = scrollView.contentOffset;
    if (offset.y < 0) {
        CGRect rect =self.tableHeaderView.frame;
        rect.origin.y = offset.y;
        rect.size.height =CGRectGetHeight(rect)-offset.y;
        self.imageView.frame = rect;
        self.tableHeaderView.clipsToBounds=NO;
    }
}

 实现起来比较简单,希望对有需要的人有所帮助~

时间: 2024-10-26 09:30:15

iOS开发-UITableView顶部图片下拉放大的相关文章

iOS开发项目篇—30下拉刷新

iOS开发项目篇—30下拉刷新 一.网络监控 当应用所处的网络环境不好的时候,获取不到相应的网络数据,考虑到用户对应用的使用体验,有必要对网络的状况进行监听. 在程序启动完的时候,监控网络 YYAppDelegate.m文件代码: 1 // 2 // YYAppDelegate.m 3 // 4 5 #import "YYAppDelegate.h" 6 #import "YYOAuthViewController.h" 7 #import "YYCont

iOS开发——封装自己的下拉菜单

效果图 思路 1.图片的拉伸: UIImage *image = [UIImage imageNamed:@"popover_background"]; image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(24, 0, 24, 0) resizingMode:UIImageResizingModeStretch]; -resizableImageWithCapInsets:resizingMode 方法的第二个参数,调

图片下拉放大

// ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UITableViewController @end // ViewController.m #import "ViewController.h" const CGFloat HMTopViewH = 350; // 设置图片高度 @interface ViewController () @property (nonatomic,

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

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

新闻详情页顶部的下拉放大与上拉的层叠效果

条件一:  [self.view insertSubview:_imgView belowSubview:_tableView]; 条件二: static NSString *cellId = @"cell1"; cell = [tableView dequeueReusableCellWithIdentifier:cellId]; if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellSty

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

动画特效十:下拉放大

今天继续我们的动画之行.这一次讲解的动画效果,在很多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.访问 Web Service.使用下拉刷新控件

#import <UIKit/UIKit.h> #import "T20140628025702NSNumber+Message.h" #import "T20140628025702NSString+URLEncoding.h" @interface T20140628025702ViewController : UITableViewController @property (nonatomic,strong) NSMutableArray *lis