实现的功能
- 上拉界面背景图片逐渐消失,下来界面背景图片放大(动态改变UIImageView的高度)
- 上拉导航条逐渐展示,下拉导航条逐渐隐藏(动态改变导航条的背景图片)
- 上拉导航条的标题逐渐显现,下拉导航条的标题逐渐隐藏(动态改变UILabel的textColor)
功能实现类似于QQ中的好友动态的顶部效果。
知识准备
导航条和导航条的子控件是不能直接通过alpha属性来隐藏的或者来改变透明度的,通常见到的透明有两种情况,一种是颜色,颜色是由RGB和alpha组成,另一种是图片,通过颜色也可以绘制一张图片,因颜色可以透明,所以图片也支持透明,例如png图片
界面搭建
使用Storyboard:
- self.view
- UITableView(全屏)
- UIView(容器View,用来作为背景图片、头像等控件的父控件, 高度固定,宽度=屏幕宽度)
- UIImageView(个人主页背景图片,frame = 容器view.frame)
- UIImageView(头像,宽度和高度固定)
- UIView(用于一组按钮的父控件,如相册、说说、个性化、消息等)
- UIButton(相册)
- UIButton (说说)
- UIButton (个性化)
- UIButton (消息)
#import "ProfileViewController.h"
#define TopViewHeight 220
@interface ProfileViewController () <UITableViewDelegate, UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topViewheightConstraint;
@end
@implementation ProfileViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:NSStringFromClass([self class])];
self.automaticallyAdjustsScrollViewInsets = NO;
self.tableView.contentInset = UIEdgeInsetsMake(TopViewHeight, 0, 0, 0);
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.text = @"个人主页";
titleLabel.textColor = [UIColor colorWithWhite:0 alpha:0];
[titleLabel sizeToFit];
self.navigationItem.titleView = titleLabel;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 1.动态的改变背景图片的高度(上拉(缩小)和下拉(放大)), 设置背景图片的内容模式为Aspect Fill, 设置父视图自动剪裁边框Clip To Bounds
CGFloat offsetY = scrollView.contentOffset.y + TopViewHeight;
CGFloat height = TopViewHeight - offsetY;
self.topViewheightConstraint.constant = height;
// 2.求透明度,根据透明颜色生成图片,设置导航条的透明背景图片
// 当前透明度 最大透明度
// -------- = ----------
// 当前偏移量 最大偏移量
CGFloat alpha = offsetY * 1 / (TopViewHeight - 64);
NSLog(@"%f", alpha);
UIColor *alphaColor = [UIColor colorWithWhite:1 alpha:alpha];
UIImage *alphaImage = [self imageWithColor:alphaColor];
[self.navigationController.navigationBar setBackgroundImage:alphaImage forBarMetrics:UIBarMetricsDefault];
// 3. 导航条标题:
UILabel *titleLabel = (UILabel *)self.navigationItem.titleView;
titleLabel.textColor = [UIColor colorWithWhite:0 alpha:alpha];
}
#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 40;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([self class]) forIndexPath:indexPath];
cell.textLabel.text = [NSString stringWithFormat:@"mengday-%ld", indexPath.row];
return cell;
}
// 最好放到分类中
- (UIImage *)imageWithColor:(UIColor *)color {
CGRect rect = CGRectMake(0, 0, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
@end
实现效果如下: