下拉时图片拉伸效果经常会遇到,这次项目中用到,思考了下写了两种思路的实现:
- 利用[tableview insertSubview:imageView atIndex:0],将UIImageView加到tableview上;但是需要考虑到滚动时,UIImageView也会进行滚动,此时在滚动时需要改变UIImageView的origin.y。贴一下主要代码如下:
- (void)dropDownImage {
//0.56是图片的比例
tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)) style:UITableViewStylePlain];
tableview.dataSource = self;
tableview.delegate = self;
tableview.contentInset = UIEdgeInsetsMake(0.56*CGRectGetWidth(self.view.frame), 0, 0, 0 );
//适配ios11的安全区域偏移量,用UIScrollView的contentInsetAdjustmentBehavior属性或者用UIViewController的additionalSafeAreaInsets属性来解决
tableview.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
// self.additionalSafeAreaInsets = UIEdgeInsetsMake(-44, 0, 0, 0);
tableview.backgroundColor = [UIColor clearColor];
UIImage *image = [UIImage imageNamed:@"1212"];
imageViewFrame = CGRectMake(0, -0.56*CGRectGetWidth(self.view.frame), CGRectGetWidth(self.view.frame), 0.56*CGRectGetWidth(self.view.frame));
imageView = [[UIImageView alloc] initWithFrame:imageViewFrame];
imageView.image = image;
[tableview insertSubview:imageView atIndex:0];
[self.view addSubview:tableview];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
float y = scrollView.contentOffset.y;
float height = imageViewFrame.size.height;
if (y < -height) {
CGFloat Ky = -scrollView.contentOffset.y-height;
//除以2是x轴在拉伸的过程也需要位伸,需要居中拉伸,故/2
CGFloat Kx = (Ky/height)*CGRectGetWidth(imageViewFrame)/2;
imageView.frame = CGRectMake(0-Kx, 0-Ky-height,
CGRectGetWidth(imageViewFrame)+2*Kx, height+Ky);
}
}
- 利用[self.view addSubview:imageView],将UIImageView加到viewController上,再加tableview。那么UIImageView将在tableview的下层。但是这里tableview会挡住下层的UIImageView,考虑用tableHeaderView预留出跟UIImageView同样高度的视图出来,并将背景色置为透明,这样将会显示下层的UIImageView。
UIImage *image = [UIImage imageNamed:@"1212"];
imageViewFrame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 0.56*CGRectGetWidth(self.view.frame));
imageView = [[UIImageView alloc] initWithFrame:imageViewFrame];
imageView.image = image;
[self.view addSubview:imageView];
tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)) style:UITableViewStylePlain];
tableview.dataSource = self;
tableview.delegate = self;
//适配ios11的安全区域偏移量,用uiscrollview的contentInsetAdjustmentBehavior属性或者用uiviewcontroller的additionalSafeAreaInsets属性来解决
tableview.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
// self.additionalSafeAreaInsets = UIEdgeInsetsMake(-44, 0, 0, 0);
tableview.backgroundColor = [UIColor clearColor];
headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), imageViewFrame.size.height)];
headerView.backgroundColor = [UIColor colorWithWhite:1 alpha:0];
tableview.tableHeaderView = headerView;
[self.view addSubview:tableview];
我们debug一下view Hierarchy,如下:
后面代码就是往下滚动时,UIImageView的拉伸效果了;往上滚动时做了个透明度变化的效果。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
float y = scrollView.contentOffset.y;
float height = imageViewFrame.size.height;
if (y < 0) {
float nx = ((-y + height) / 0.56 - imageViewFrame.size.width)/ 2;
float nh = -y + height;
NSLog(@"aa:%.f",nx);
imageView.frame = CGRectMake(-nx, 0, CGRectGetWidth(imageViewFrame)+nx*2, nh);
}else {
float al = y / height;
headerView.backgroundColor = [UIColor colorWithWhite:1 alpha:al];
imageView.frame = CGRectMake(0, -y, CGRectGetWidth(self.view.frame), 0.56*CGRectGetWidth(self.view.frame));
}
}