关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置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,如需转载请自行联系原作者