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

本文介绍如何在UITableView中实现顶部图片下拉放大效果,通过设置UITableView的headerView并结合UIScrollView的滚动事件调整UIImageView的位置和大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

初始化属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
-(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实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
-(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:

1
2
3
4
5
6
self.data=@[@"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的位置:

1
2
3
4
5
6
7
8
9
10
-(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;
    }
}

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

本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/5129073.html,如需转载请自行联系原作者


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值