02-个人详情页效果

249008C5-48BE-4763-B96B-E9EFA6669EE8.jpeg

方案分析:

组悬停功能分析

分析:因为我们的⽰列程序头部视在滚动的时候一直是在在上部0的位置, ⽽且往下滚动时,会⽤放大的效果

但是这在个地⽅,如果我们使用的是TablView的的头部视图,tableView的头部视图默认是跟着一起滚动的.

⽽且我们⼿动去设置HeaderView的y值是没有效果的,所以在这里不能使用这种方案的.

代码如下:

#import <UIKit/UIKit.h>

@interface PersonDetailVC : UIViewController

@end

#import "XMGPersionDetailViewController.h" 
#import "UIImage+Image.h"
// 头部View的高度
#define XMGHeaderH 200  // 悬浮条的高度
#define XMGTarBarH 44   // 原始的便宜量.(tabbar的高度)
#define XMGOriOffsetY -244

@interface XMGPersionDetailViewController () <UITableViewDataSource,UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView; 
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *headerTopCons;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *headerHeightConts;
// 标题
@property(nonatomic, strong)UILabel *titleL;

@end

@implementation XMGPersionDetailViewController

static NSString *ID = @"CELLID"; 
- (void)viewDidLoad {
  [super viewDidLoad];
  [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:ID];

// 凡是在导航条下面的scrollView.默认会设置偏移量.UIEdgeInsetsMake(64, 0, 0, 0)
// 设置当前控制器不要调整ScrollView的contentInsets 
   self.automaticallyAdjustsScrollViewInsets = NO;

// 我们这⾥里导航条隐藏不是直接隐藏的,⽽是有一个透明度, 根据滚到的位置,设置透明度的.

// 设置导航条透明度为0
// 设置导航条透明度为0,没有效果,还是原来的样子. 
// 原因是因为导航条上面那一块并不直接是导航条,它是导航条里⾯的一个子控件.
// 所以在这里设置它没有效果,因为系统会生成一个半透明的图⽚.
// self.navigationController.navigationBar.alpha = 0; 

// 所以在这里我们可以考虑给它设置一个半透明的图片. 
// 在这⾥,有一个模式,必须要传默认UIBarMetricsDefault模式. 
// 在这⾥发现设为nil的时候,也没有效果,那是因为系统它做了一层判断,它会判断如果传入的系统图片为空的话,它就会帮你生成一个半透明的图片,设置导航条的背景图片.  
// [self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];

// 那在这里传入一张空的图片,然后就有效果了. 
   [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault]; 

// 但是设置完后,发现有一根线,这根线其实是导航条的一个阴影.直接把它清空就行了.
   [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

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

// 设置UITableView的默认额外顶部滚动区域244. 
// tableView只要设置额外的滚动区域,就会把内容往下面挤. 
// 当调用contentInset会自动调用scrollViewDidScroll
    self.tableView.contentInset = UIEdgeInsetsMake(XMGHeaderH+XMGTarBarH, 0, 0, 0);

// 导航条上面的子控件设置透明是没有效果的.
    UILabel *titleL = [[UILabel alloc] init]; 
    titleL.text = @"微博详情⻚页";
// 让⽂字大小自适应
    [titleL sizeToFit]; 
    self.titleL = titleL;
//  设置⽂字背景颜色透明.
    titleL.textColor = [UIColor colorWithWhite:0 alpha:0]; 
// 设置标题是⼀个Label
    self.navigationItem.titleView = titleL; 
}


//只要tableView滚动时,就会调用这个方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {

// 计算滚动的偏移量 = 当前点 - 最原始的点
  NSLog(@"%f",scrollView.contentOffset.y); //查看y值变动
  CGFloat offSetY = scrollView.contentOffset.y - XMGOriOffsetY; 
  NSLog(@"%f",offSetY);

// 在这里不能使用距离上面的约束,因为这个地方我们是想要有一个视觉差的效果,还有就是要保证一直距离顶部为0的大小.
// self.headerTopCons.constant = - offSetY;
  CGFloat h = XMGHeaderH - offSetY; 
  if(h < 64) {
      h = 64;
  }

// 设置⽂字透明度比例
  CGFloat alpha = 1 * offSetY / 136.0; 
  if (alpha >= 1) {
        alpha = 0.99; 
  }

// 设置文字颜色透明度
  self.titleL.textColor = [UIColor colorWithWhite:0 alpha:alpha]; 
// 把一个颜色生成一张图片.
  UIImage* image =[UIImageimageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];

// 设置导航条背景图片为一张半透明的图片. 
  [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
   
   self.headerHeightConts.constant = h;
 }

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

#pragma mark - 数据源
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    UITableViewCell *cell =  [tableView dequeueReusableCellWithIdentifier:ID forIndexPath:indexPath]; 
    cell.textLabel.text = @"xmg";  
    return cell;
}

@end