iOS UITableView拉伸图片,悬停控件和渐变导航栏效果

一、实现效果:

• 1.表单下拉放大顶部图片,弹簧效果
• 2.表单上拉逐渐显示导航栏
• 3.悬停视图停止在导航栏底部

二、效果图

三.建立工程实现

• 建立视图

  • 1.新建工程
  • 2.移除原控制器,拖入一个NavigationController ,并勾上Is Initial View Controller
  • 3.拖入一个ViewController,绑定class为ViewController,并从NavigationController 上拖线到ViewController选择Show
  • 4.向ViewController中拖入一个TableView,约束四边距离View都为0
  • 5.向ViewController中拖入一个View(注意父视图为控制器的View),命名为HeaderView,约束距离上,左,右为0,高度为200
  • 6.向ViewController中拖入一个View(注意父视图为控制器的View),命名为,命名为SuspensionView, 约束上方距离HeadView为0, 左右距离父视图为0, 高度为44.
  • 7.向SuspensionView中拖入2个按钮,命名为SelectBtn1和SelectBtn2,设置约束为2个按钮等宽等高并水平居中,按钮间距为20, 左边按钮距离父视图左边距为20,右边按钮距离父视图右边距为20
  • 8.向HeadView中拖入一个imageView,命名为backImage,约束为四边距离父视图为0, 并设置image为资源文件中的图片,设置图片的填充Mode为Aspect Fill, 勾上Clip Subviews
  • 9.再向HeadView中拖入一个imageView,命名为userIcon,约束为距离父视图下边距为64,高度和宽度为100,竖直居中.并设置image
  • 10.最终Main.storyboard层级如下图:
    

• 代码

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end

ViewController.m

//
//  ViewController.m
//  TableViewStretchImage
//
//  Created by dengweihao on 16/5/20.
//  Copyright © 2016年 dengweihao. All rights reserved.
//

#import "ViewController.h"

#import "UIImage+Color.h"

#define USER @"踏歌长行"

#define HeadViewHeight 200 // 头视图高度
#define SuspensionViewHeight 44 // 悬浮视图高度
#define HeadViewMinHeight 64 // HeadView最小高度

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

/** HeadView高度约束 */
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *headHeightCons;
/** 导航栏标题 */
@property (nonatomic, weak) UILabel *userNameLabel;
/** 记录滚动视图最开始偏移量y值 */
@property (nonatomic, assign) CGFloat oriOffsetY;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 设置tableView数据源和代理
    self.tableView.dataSource = self;
    self.tableView.delegate = self;

    // 设置导航条
    [self setUpNavigationBar];

    // 不需要自动调节滚动区域
    self.automaticallyAdjustsScrollViewInsets = NO;

    // 记录最开始偏移量y值
    _oriOffsetY = -(HeadViewHeight + SuspensionViewHeight);

    // 设置tableView顶部额外滚动区域
    self.tableView.contentInset = UIEdgeInsetsMake(-_oriOffsetY, 0, 0, 0);

    // Do any additional setup after loading the view, typically from a nib.
}

/** 设置导航栏 */
- (void)setUpNavigationBar {
    // 传递一个空的UIImage,选择模式为UIBarMetricsDefault来设置导航栏背景为透明, 注意UIImage不能传nil, 如果传nil, 苹果会为你加载一张默认的不透明背景图片
    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];

    // 清空导航条的阴影的线
    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

    // 设置导航条标题为透明
    UILabel *usernameLabel = [[UILabel alloc] init];
    usernameLabel.text = USER;
    // 设置文字的颜色
    usernameLabel.textColor = [UIColor colorWithWhite:1 alpha:0];
    // 根据文字大小自适应尺寸
    [usernameLabel sizeToFit];
    _userNameLabel = usernameLabel;

    [self.navigationItem setTitleView:_userNameLabel];
}

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    // 获取当前偏移量y值
    CGFloat curOffsetY = scrollView.contentOffset.y;

    // 计算偏移量的差值
    CGFloat delta = curOffsetY - _oriOffsetY;

    // 计算头部视图的高度
    CGFloat h = HeadViewHeight - delta;
    if (h < HeadViewMinHeight) {
        h = HeadViewMinHeight;
    }

    // 修改HeadView高度
    _headHeightCons.constant = h;

    // 处理导航条业务逻辑

    // 计算透明度
    CGFloat alpha = delta / (HeadViewHeight - HeadViewMinHeight);

    if (alpha > 1) {
        alpha = 0.99;
    }

    // 设置导航条背景图片
    // 根据当前alpha值生成图片
    UIImage *image = [UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];

    [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
    // 设置导航条标题颜色
    _userNameLabel.textColor = [UIColor colorWithWhite:0 alpha:alpha];    
}

#pragma mark - UITableViewDataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *ident = @"detailCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ident];

    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ident];
        cell.backgroundColor = [UIColor greenColor];
    }

    cell.textLabel.text = [NSString stringWithFormat:@"%d", (int)indexPath.row];

    return cell;
}

@end

UIImage+Color.h

#import <UIKit/UIKit.h>

@interface UIImage (Color)

// 根据颜色生成一张尺寸为1*1的相同颜色图片
+ (UIImage *)imageWithColor:(UIColor *)color;

@end

UIImage+Color.m

#import "UIImage+Color.h"

@implementation UIImage (Color)

+ (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 *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();

    return coloredImage;
}

@end