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

实现的功能

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下载链接