在上一篇文章有介绍 导航控制器的组成,是有3部分,这里不再重复
可以点击这里查看
今天主要说的是 在个人信息页,常用的一个小例子,其中用的 导航条透明
,黑线的处理
效果图:
从效果图中,我们知道,tableView ,UIimageView是同层级的
注意:其中的
tableView,imageView(钢铁侠)
都是以superView
的top部,并不是安全区域,不然的话 看不到效果,而且导航条是半透明的状态,这是因为安全区域
的作用影响
1 - 基础设置布局
- (void)viewDidLoad {
[super viewDidLoad];
//导航条透明,设置一个透明的背景图片或者一个nil image
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
//去除黑线
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
//去除黑线
//self.navigationController.navigationBar.clipsToBounds = YES;
self.automaticallyAdjustsScrollViewInsets = NO;
//
self.tableView.contentInset = UIEdgeInsetsMake(244, 0, 0, 0);
}
2 - tableView的代理方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *ID = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:ID];
}
cell.textLabel.text = [NSString stringWithFormat:@"%zd",indexPath.row];
return cell;
}
3- 核心代码 监听 UIScrollView的代理方法
UIImageView(钢铁侠 200的高度),View(粉色 44的高度)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//计算便宜量(向上滑动的距离) (-244 是 imageview 和 View的高度)
//当你使用 self.tableView.contentInset 会调用一次这个方法
CGFloat offset = scrollView.contentOffset.y - (-244);
//计算 图片向上移动的H(image的高度 减去 偏移量 )
CGFloat h = 200 - offset;
if (h < 64) {
h = 64;
}
//g赋值
self.imageViewConstrain.constant = h;
//比例计算
CGFloat alpha = offset/(200.0 - 64.0);
if (alpha >= 1) {
alpha = 0.99;
}
UIColor *navColor = [UIColor colorWithWhite:1 alpha:alpha];
UIImage *navImage = [self imageWithColor:navColor];
[self.navigationController.navigationBar setBackgroundImage:navImage forBarMetrics:UIBarMetricsDefault];
}
//绘制一张图片
- (UIImage *)imageWithColor:(UIColor *)color{
//描述一个矩形
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
//开启上下文
UIGraphicsBeginImageContext(rect.size);
//获取到上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//渲染颜色
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
//获取到图片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
//关闭
UIGraphicsEndImageContext();
return image;
}