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