很多APP都会有下拉顶部视图放大的效果，然后尝试实现了一下具体效果，下面我把我实现这个小功能的思路分享一下。
首先说下这个功能的实现原理，其实很简单，就是根据TableView滑动时候的偏移量来改变要放大视图的frame。
实现效果图下：
实现思路：设置TableView为2个section，第一个section设置为透明色，同时创建要放大的UIImageView在section1位置，之后根据TableView滑动时候偏移量来改变要放大的UIImageView。
接下来直接贴代码：
#import "ViewController.h"#define ImageHeight 180.0#define ImageWidth self.view.frame.size.width@interface ViewController (){
}
@property (nonatomic,strong) UIImageView *orderImageView; /*要放大的ImageView*/
@property (nonatomic,strong) UITableView *tableView;
@end
@implementation ViewController
#pragma mark - viewDidLoad生命周期
- (void)viewDidLoad {
[super viewDidLoad];
[self createTableView];
}
- (void)createTableView{
_orderImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, ImageWidth, ImageHeight)];
_orderImageView.image = [UIImage imageNamed:@"123.jpg"];
_orderImageView.contentMode = UIViewContentModeScaleAspectFill;
[self.view addSubview:_orderImageView];
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.backgroundColor = [UIColor clearColor];
[self.view addSubview:_tableView];
}
#pragma mark - UITableViewDelegate | UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 2;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
if (section == 0) {
return 1;
}
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *CellIdentifier = @"identifier";
UITableViewCell *cell = nil;
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
if (indexPath.section == 0) {
cell.backgroundColor = [UIColor clearColor];
}else{
cell.textLabel.text = @"cell";
}
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.section == 0) {
return ImageHeight;
}else{
return 50;
}
}
#pragma mark - 滑动表放大顶部图片操作
- (void)updateImg {
CGFloat yOffset = _tableView.contentOffset.y;
if (yOffset < 0) {
CGFloat factor = ((ABS(yOffset)+ImageHeight)*ImageWidth)/ImageHeight;
CGRect frame = CGRectMake(-(factor-ImageWidth)/2, 0, factor, ImageHeight+ABS(yOffset));
self.orderImageView.frame = frame;
} else {
CGRect frame = self.orderImageView.frame;
frame.origin.y = -yOffset;
self.orderImageView.frame = frame;
}
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
/*随着表的偏移放大顶部图片*/
[self updateImg];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
当然这只是实现改小功能的方法之一，方法很多，关键看大家怎么实现。
如有不合理的地方还请大家指出 ^_^，共同进步~~~
网友评论