常见效果如下:
一、图片的下拉放大
将图片添加到UITableView上,然后设置UITableView的contentInset的值,使UITableView初始的时候就向下移动一定距离,以便显示图片。
代码如下
#import "ViewController_1.h"
@interface ViewController_1 ()<UITableViewDelegate,UITableViewDataSource>
{
UIImageView *_headImgeView;
}
/** tableview */
@property (nonatomic, strong) UITableView *tableView;
@end
#define k_imageViewHeight [UIScreen mainScreen].bounds.size.width
const CGFloat NavHeight = 64;
@implementation ViewController_1
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor yellowColor];
self.navigationItem.title = @"下拉列表";
[self.view addSubview:self.tableView];
//初始化顶部图片
if (!_headImgeView) {
_headImgeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - k_imageViewHeight, k_imageViewHeight, k_imageViewHeight)];
_headImgeView.image = [UIImage imageNamed:@"demo.jpeg"];
//设置图片的填充方式
_headImgeView.contentMode = UIViewContentModeScaleAspectFill;
//添加图片到tableView顶部(直接addSubView,当下拉的时候会覆盖cell)
[self.tableView insertSubview:_headImgeView atIndex:0];
}
}
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.contentInset = UIEdgeInsetsMake(k_imageViewHeight * 0.5 - NavHeight, 0, 0, 0);
}
return _tableView;
}
#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *reuseIdentifier = @"cellID";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
}
cell.textLabel.text = @"test1";
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 50;
}
#pragma mark - UIScrollView代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//计算往下拖拽的高度
CGFloat down = -(k_imageViewHeight * 0.5) - scrollView.contentOffset.y;
//小于0直接返回
if(down < 0) return;
CGRect frame = _headImgeView.frame;
frame.size.height = k_imageViewHeight + down * 1;
_headImgeView.frame = frame;
}
@end
二、导航栏头像的缩放
- 1.分析
需要将图片添加到导航栏上,可以自定义图片View,也可以利用导航栏的TitleView。 - 2.结论
和图片的下拉放大效果实现几乎一样,唯一不同的是这里需要用到CGAffineTransformMakeScale去缩放图片。
#import "ViewController_2.h"
#define k_iconHeight 88
@interface ViewController_2 ()<UITableViewDelegate, UITableViewDataSource>
{
UIImageView *_iconImageView;
}
/** tableview */
@property (nonatomic, strong) UITableView *tableView;
@end
@implementation ViewController_2
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationController.title = nil;
[self.view addSubview:self.tableView];
if (_iconImageView == nil) {
_iconImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, k_iconHeight, k_iconHeight)];
_iconImageView.center = CGPointMake([UIScreen mainScreen].bounds.size.width * 0.5, self.navigationController.navigationBar.frame.size.height);
_iconImageView.image = [UIImage imageNamed:@"demo.jpeg"];
CGFloat corner = 5;
_iconImageView.layer.cornerRadius = corner;
_iconImageView.layer.masksToBounds = YES;
self.tableView.contentInset = UIEdgeInsetsMake(k_iconHeight, 0, 0, 0);
[self.navigationController.navigationBar addSubview:_iconImageView];
}
}
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
}
return _tableView;
}
#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"iconList"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"iconList"];
}
cell.textLabel.text = @"test2";
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 50;
}
#pragma mark - UIScrollView代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//计算往下拖拽的高度
CGFloat down = scrollView.contentOffset.y + scrollView.contentInset.top;
CGFloat scale = 1.0;
// 放大
if (down < 0) {
scale = MIN(1.0, 1 - down / k_iconHeight);
} else if (down > 0) { // 缩小
scale = MAX(0.45, 1 - down / k_iconHeight);
}
_iconImageView.transform = CGAffineTransformMakeScale(scale, scale);
// 保证缩放后y坐标不变
CGRect frame = _iconImageView.frame;
frame.origin.y = -_iconImageView.layer.cornerRadius / 2;
_iconImageView.frame = frame;
}
@end
完整代码资源