#import"ViewController.h"
#define Screen_W [[UIScreen mainScreen] bounds].size.width
#define Screen_H [[UIScreen mainScreen] bounds].size.height
#define kOriginalImageHeight 200
@interfaceViewController ()
@property (nonatomic,strong)UIImageView *imageView;
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
self.view.backgroundColor = [UIColorwhiteColor];
self.title =@"我的";
//添加表头视图
[selfaddTableHeadView];
//设置导航条透明化
[selfsetNavigationBarClear];
//设置为YES
self.automaticallyAdjustsScrollViewInsets =NO;
}
//设置导航条为透明色
-(void)setNavigationBarClear{
//给导航条设置一个空的背景图使其透明化
[self.navigationController .navigationBarsetBackgroundImage:[UIImagenew] forBarMetrics:UIBarMetricsDefault];
//去除导航条透明后导航条下的黑线
[self.navigationController.navigationBarsetShadowImage:[UIImagenew]];
}
-(void)addTableHeadView{
// 初始化表头视图
self.imageView = [[UIImageViewalloc] initWithFrame:CGRectMake(0,-kOriginalImageHeight,Screen_W, kOriginalImageHeight)];
self.imageView.image = [UIImageimageNamed:@"b"];
//将表头视图添加到tablView
[self.tableViewaddSubview: self.imageView ];
//设置imageView的内容填充模式为ScaleAspectFill
self.imageView.contentMode =UIViewContentModeScaleAspectFill;
self.imageView.clipsToBounds =YES;
//设置tableView的初始位置距离顶部200 即image的原始高度kOriginalImageHeight
self.tableView.contentInset =UIEdgeInsetsMake(kOriginalImageHeight,0, 0,0);
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSLog(@"%f",self.tableView.contentOffset.y);
//获取tableView的Y方向偏移量
CGFloat offSet_Y = self.tableView.contentOffset.y;
//向下拖动图片时
if (offSet_Y < - kOriginalImageHeight) {
//获取imageView的原始frame
CGRect frame = self.imageView.frame;
//修改imageView的Y值等于offSet_Y
frame.origin.y = offSet_Y;
//修改imageView的height 等于offSet_Y 的绝对值此时偏移量为负数
frame.size.height = - offSet_Y;
//重新赋值
self.imageView.frame = frame;
}
//tableView相对于图片的偏移量
CGFloat reOffset = offSet_Y + kOriginalImageHeight ;
// (kOriginalImageHeight - 64)这个数值决定了导航条在图片上滑时开始出现 alpha从 0 ~ 0.99 变化
// 当图片底部到达导航条底部时导航条 aphla 变为1导航条完全出现
CGFloat alpha = reOffset/(kOriginalImageHeight -64);
if (alpha>=1) alpha =0.99;
// 设置导航条的背景图片其透明度随 alpha 值 而改变
UIImage *image = [selfimageWithColor:[UIColorcolorWithRed:0.227green:0.753blue:0.757alpha:alpha]];
[self.navigationController.navigationBarsetBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}
//使用颜色填充图片
- (UIImage *)imageWithColor:(UIColor *)color
{
// 描述矩形
CGRect rect=CGRectMake(0.0f,0.0f, 1.0f,1.0f);
// 开启位图上下文
UIGraphicsBeginImageContext(rect.size);
// 获取位图上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 使用color演示填充上下文
CGContextSetFillColorWithColor(context, [colorCGColor]);
// 渲染上下文
CGContextFillRect(context, rect);
// 从上下文中获取图片
UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
// 结束上下文
UIGraphicsEndImageContext();
return theImage;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 50;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (cell == nil) {
cell = [[UITableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:@"cell"];
}
cell.textLabel.text = [NSStringstringWithFormat:@"%d",indexPath.row];
return cell;
}
本文介绍如何在iOS应用中实现带有透明导航栏及滚动视图头部图片缩放的效果。通过修改导航栏背景和利用scrollViewDidScroll方法调整图片大小,达到平滑过渡的视觉体验。
465

被折叠的 条评论
为什么被折叠?



