tableView向下拉拽, 拉伸图片, 向上活动渐变导航栏

先上效果图, 说明下:

这篇文章说的知识点是向下拉伸图片, 与向上滑动到一定程度后显示导航栏.

gif-1.gif

  #define RGB(r, g, b) [UIColor colorWithRed:r / 255.0 green:g / 255.0 blue:b / 255.0 alpha:1]
 #define kRandomColor  RGB(arc4random_uniform(255), arc4random_uniform(255), arc4random_uniform(255))

static CGFloat const kHeaderIconHeight = 200;
static CGFloat const kNavHeight = 64;
static NSString *const kCellidentifire = @"UITableViewCell";

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>
// UI部分
/**头部图片视图*/
@property (nonatomic, strong) UIImageView *icon;
/**tableview*/
@property (nonatomic, strong) UITableView *tableView;
// 数据部分
/**记录最初的OffsetY-->-200. 用于与当前滑动的offsetY做差值比较*/
@property (nonatomic, assign) CGFloat oriOffsetY;
@end

@implementation ViewController

- (void)viewDidLoad {
     [super viewDidLoad];
     // -1.当控制器的第一个控件为继承自scrollview的控件时, 系统会帮我们自动设置64. 这里我不许要, 因此设置no
     self.automaticallyAdjustsScrollViewInsets = NO;
     // 0.先设置导航栏.
     [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
     [self.navigationController.navigationBar setShadowImage:[UIImage new]];
         // 1.添加tableView
self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
     self.tableView.delegate = self;
     self.tableView.dataSource = self;
     [self.view addSubview:self.tableView];
     [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:kCellidentifire];
     // 2.添加头部图片(固定高度200)
     self.icon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pbg"]];
     self.icon.frame = CGRectMake(0, 0, self.view.bounds.size.width, kHeaderIconHeight);
     [self.view addSubview:self.icon];
      // 3.初始化设置tableView的contentInset
      self.oriOffsetY = -kHeaderIconHeight;
      self.tableView.contentInset = UIEdgeInsetsMake(kHeaderIconHeight, 0, 0, 0);
 }

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellidentifire];

    cell.textLabel.text = [NSString stringWithFormat:@"%zd", indexPath.item];
    cell.backgroundColor = kRandomColor;

    return cell;
}

• 实现效果代码
  #pragma mark - UITableViewDelegate
  - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
  // 0.获取当前offset.y(默认开启时处在-200处)
  CGFloat curOffsetY = scrollView.contentOffset.y;
  // 1.向下拉拽, 向上滑动了多少. self.oriOffsetY为-200
  CGFloat moveDetla = curOffsetY - self.oriOffsetY;
  // 2.当前图片的高度.
  CGFloat curIconHeight = kHeaderIconHeight - moveDetla;
  if (curIconHeight <= kNavHeight) {
  curIconHeight = kNavHeight;
  }
  // 计算透明程度
  CGFloat alpha = moveDetla / (kHeaderIconHeight - kNavHeight);
  if (alpha >= 1) {
  alpha = 0.99;
  }
  // 设置导航栏
  UIImage *image = [UIImage imageWithColor:[UIColor colorWithRed:15 / 255.0 green:177 / 255.0 blue:40 / 255.0 alpha:alpha]];
  [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
  // 刷新图片frame
  self.icon.frame = (CGRect){self.icon.frame.origin, {self.icon.bounds.size.width , curIconHeight}};
  }

  @end
  
  /**
  绘制图片,并设置图片背景颜色
  */
  + (UIImage *)imageWithColor:(UIColor *)color {
    // 创建一个图片类型的上下文
    // 描述矩形
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
  
    // 开启位图上下文
    UIGraphicsBeginImageContext(rect.size);
    // 获取位图上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 使用color演示填充上下文
    CGContextSetFillColorWithColor(context, [color CGColor]);
    // 渲染上下文
    CGContextFillRect(context, rect);
    // 从上下文中获取图片
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();
  
    return theImage;
  }