个人主页中的背景图片和导航条透明度渐变实现

实现的功能

1. 上拉界面背景图片逐渐消失，下来界面背景图片放大（动态改变UIImageView的高度）
2. 上拉导航条逐渐展示，下拉导航条逐渐隐藏（动态改变导航条的背景图片）
3. 上拉导航条的标题逐渐显现，下拉导航条的标题逐渐隐藏（动态改变UILabel的textColor）

功能实现类似于QQ中的好友动态的顶部效果。

---

知识准备

导航条和导航条的子控件是不能直接通过alpha属性来隐藏的或者来改变透明度的，通常见到的透明有两种情况，一种是颜色，颜色是由RGB和alpha组成，另一种是图片，通过颜色也可以绘制一张图片，因颜色可以透明，所以图片也支持透明，例如png图片

界面搭建

使用Storyboard：

• self.view
  
  • UITableView(全屏)
  • UIView（容器View，用来作为背景图片、头像等控件的父控件， 高度固定，宽度=屏幕宽度）
    
    • UIImageView（个人主页背景图片，frame = 容器view.frame）
    • UIImageView（头像，宽度和高度固定）
    • UIView（用于一组按钮的父控件，如相册、说说、个性化、消息等）
      
      • UIButton（相册）
      • UIButton （说说）
      • UIButton （个性化）
      • UIButton （消息）

---

#import "ProfileViewController.h"

#define TopViewHeight 220

@interface ProfileViewController () <UITableViewDelegate,  UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topViewheightConstraint;

@end

@implementation ProfileViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:NSStringFromClass([self class])];
    self.automaticallyAdjustsScrollViewInsets = NO;
    self.tableView.contentInset = UIEdgeInsetsMake(TopViewHeight, 0, 0, 0);

    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

    UILabel *titleLabel = [[UILabel alloc] init];
    titleLabel.text = @"个人主页";
    titleLabel.textColor = [UIColor colorWithWhite:0 alpha:0];
    [titleLabel sizeToFit];
    self.navigationItem.titleView = titleLabel;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 1.动态的改变背景图片的高度(上拉(缩小)和下拉（放大）), 设置背景图片的内容模式为Aspect Fill, 设置父视图自动剪裁边框Clip To Bounds
    CGFloat offsetY = scrollView.contentOffset.y + TopViewHeight;
    CGFloat height = TopViewHeight - offsetY;
    self.topViewheightConstraint.constant = height;

    // 2.求透明度，根据透明颜色生成图片，设置导航条的透明背景图片
    // 当前透明度    最大透明度
    // -------- = ----------
    // 当前偏移量    最大偏移量
    CGFloat alpha = offsetY * 1 / (TopViewHeight - 64);
    NSLog(@"%f", alpha);
    UIColor *alphaColor = [UIColor colorWithWhite:1 alpha:alpha];
    UIImage *alphaImage = [self imageWithColor:alphaColor];
    [self.navigationController.navigationBar setBackgroundImage:alphaImage forBarMetrics:UIBarMetricsDefault];


    // 3. 导航条标题：
    UILabel *titleLabel = (UILabel *)self.navigationItem.titleView;
    titleLabel.textColor = [UIColor colorWithWhite:0 alpha:alpha];
}

#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 40;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([self class]) forIndexPath:indexPath];
    cell.textLabel.text = [NSString stringWithFormat:@"mengday-%ld", indexPath.row];

    return cell;
}

// 最好放到分类中
- (UIImage *)imageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0, 0, 1.0f, 1.0f);

    UIGraphicsBeginImageContext(rect.size);

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, rect);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}
@end

实现效果如下：

---

示例Demo下载链接