iOS實現頭部拉伸效果

2020-07-26 02:28:06

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了iOS實現頭部拉伸效果展示的具體代碼，供大家參考，具體內容如下

主要涉及到導航欄透明度、圖片拉伸、列表頭部等。

導航欄透明度的實現。
列表拖動距離的監聽，及圖片放大的實現。

導航透明度的設置

添加系統導航欄的Category實現

聲明部分：

@interface UINavigationBar (BackgroundColor)- (void)lt_setBackgroundColor:(UIColor *)color;@end

實現部分：

#import <objc/runtime.h>@implementation UINavigationBar (BackgroundColor)static char overlayKey;- (UIView *)overlay{  return objc_getAssociatedObject(self, &overlayKey);}- (void)setOverlay:(UIView *)overlay{  objc_setAssociatedObject(self, &overlayKey, overlay, OBJC_ASSOCIATION_RETAIN_NONATOMIC);}- (void)lt_setBackgroundColor:(UIColor *)color{  if (!self.overlay) {    [self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];    // insert an overlay into the view hierarchy    self.overlay = [[UIView alloc] initWithFrame:CGRectMake(0, -20, [UIScreen mainScreen].bounds.size.width, self.bounds.size.height + 20)];    self.overlay.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;    [self insertSubview:self.overlay atIndex:0];  }  self.overlay.backgroundColor = color;}@end

監聽列表拖動及實現圖片放大

主要是監聽滾動的距離（scrollViewDidScroll:方法）

#import "StretchViewController.h"#import "UINavigationBar+BackgroundColor.h"http:// 背景圖片的寬高比例#define ratio 0.8@interface StretchViewController () <UITableViewDelegate, UITableViewDataSource>// 可放大的背景圖片@property (nonatomic, strong) UIImageView *bgView;// 記錄原始大小@property (assign) CGRect originalFrame;@property (nonatomic, strong) UITableView *tableView;@end@implementation StretchViewController- (void)viewWillAppear:(BOOL)animated{  [super viewWillAppear:animated];  //[self.navigationController setNavigationBarHidden:YES animated:animated];  //self.navigationController.navigationBar.tintColor = [UIColor whiteColor];  //self.navigationController.navigationBar.barTintColor = [UIColor clearColor];  //self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];  // 設置導航欄底部分割線為透明  [self.navigationController.navigationBar setShadowImage:[UIImage new]];}- (void)viewDidLoad {  [super viewDidLoad];  // 設置全透明  [self.navigationController.navigationBar lt_setBackgroundColor:[[UIColor greenColor] colorWithAlphaComponent:0]];  // Do any additional setup after loading the view.  self.view.backgroundColor = [UIColor lightGrayColor];  self.bgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width*ratio)];  self.bgView.image = [UIImage imageNamed:@"bg-mine"];  self.originalFrame = self.bgView.frame;  [self.view addSubview:self.bgView];  self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, self.view.bounds.size.width, self.view.bounds.size.height-64) style:UITableViewStylePlain];  self.tableView.backgroundColor = [UIColor clearColor];  self.tableView.showsVerticalScrollIndicator = NO;  self.tableView.delegate = self;  self.tableView.dataSource = self;  // 1. contentInset  //table.contentInset = UIEdgeInsetsMake(160, 0, 0, 0);  // 2. heatView  UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 160)];  headView.backgroundColor = [UIColor clearColor];  self.tableView.tableHeaderView = headView;  [self.view addSubview:self.tableView];}- (nonnull UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath {  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellIdentifier"];  if (cell == nil) {    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"cellIdentifier"];  }  cell.textLabel.text = @"測試數據";  return cell;}- (NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section {  return 10;}- (void)scrollViewDidScroll:(UIScrollView *)scrollView{  CGFloat yOffset = scrollView.contentOffset.y; // 向上滑動，offset是增加的；向下滑動，是減少的  if (yOffset < 160) { // 當滑動到導航欄底部時    CGFloat colorAlpha = yOffset/160;//    self.navigationController.navigationBar.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:colorAlpha];    [self.navigationController.navigationBar lt_setBackgroundColor:[[UIColor whiteColor] colorWithAlphaComponent:colorAlpha]];  } else { // 超過導航欄底部了    [self.navigationController.navigationBar lt_setBackgroundColor:[UIColor whiteColor]];  }  // 往上滑動效果、處理放大效果  if (yOffset > 0) {    self.bgView.frame = ({      CGRect frame = self.bgView.frame;      frame.origin.y = self.originalFrame.origin.y - yOffset;      frame;    });  } else { // 往下移動，放大效果    self.bgView.frame = ({      CGRect frame = self.originalFrame;      frame.size.height = self.originalFrame.size.height - yOffset;      frame.size.width = frame.size.height/ratio;      //      frame.origin.x = self.originalFrame.origin.x - (frame.size.width - self.originalFrame.size.width)/2;      frame;    });  }}@end

以上是對系統原生的導航欄進行透明度設置。

也可進行自定義視圖設置為導航欄

效果如下：