先上效果图, 说明下:
这篇文章说的知识点是向下拉伸图片, 与向上滑动到一定程度后显示导航栏.
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; }
网友评论