实现图片下拉放大和导航栏头像缩放效果

最新推荐文章于 2018-11-17 13:27:44 发布

转载最新推荐文章于 2018-11-17 13:27:44 发布 · 2.3k 阅读

iOS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在 iOS 应用中实现两种常见的下拉刷新效果：图片的下拉放大和导航栏头像的缩放。通过代码示例详细讲解了实现这两种效果的具体步骤。

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

常见效果如下：

一、图片的下拉放大

将图片添加到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

完整代码资源

点击下载