先上效果圖, 說明下:
這篇文章說的知識(shí)點(diǎn)是向下拉伸圖片, 與向上滑動(dòng)到一定程度后顯示導(dǎo)航欄.
#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;
// 數(shù)據(jù)部分
/**記錄最初的OffsetY-->-200. 用于與當(dāng)前滑動(dòng)的offsetY做差值比較*/
@property (nonatomic, assign) CGFloat oriOffsetY;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// -1.當(dāng)控制器的第一個(gè)控件為繼承自scrollview的控件時(shí), 系統(tǒng)會(huì)幫我們自動(dòng)設(shè)置64. 這里我不許要, 因此設(shè)置no
self.automaticallyAdjustsScrollViewInsets = NO;
// 0.先設(shè)置導(dǎo)航欄.
[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.初始化設(shè)置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;
}
-
實(shí)現(xiàn)效果代碼
#pragma mark - UITableViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// 0.獲取當(dāng)前offset.y(默認(rèn)開啟時(shí)處在-200處)
CGFloat curOffsetY = scrollView.contentOffset.y;
// 1.向下拉拽, 向上滑動(dòng)了多少. self.oriOffsetY為-200
CGFloat moveDetla = curOffsetY - self.oriOffsetY;
// 2.當(dāng)前圖片的高度.
CGFloat curIconHeight = kHeaderIconHeight - moveDetla;
if (curIconHeight <= kNavHeight) {
curIconHeight = kNavHeight;
}
// 計(jì)算透明程度
CGFloat alpha = moveDetla / (kHeaderIconHeight - kNavHeight);
if (alpha >= 1) {
alpha = 0.99;
}
// 設(shè)置導(dǎo)航欄
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 /** 繪制圖片,并設(shè)置圖片背景顏色 */ + (UIImage *)imageWithColor:(UIColor *)color { // 創(chuàng)建一個(gè)圖片類型的上下文 // 描述矩形 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(); // 結(jié)束上下文 UIGraphicsEndImageContext(); return theImage; }
