iOS-仿QQ下拉效果
2017-07-25 本文已影响96人
charleswang
现在在很多的App中都可以看见类似这样的效果：
g.gif
分析：
-
实现这样的效果我们需要考虑如下几个问题：
-
1.用什么控件实现这样效果？
-
2.怎么样实现导航栏的颜色的变化
-
3.上下滑动的时候，怎么实现图片的尺寸的变化
-
a.对于第一点，我们可以看见下面是用UITableView来实现的，首先会想到上面的图片放到cell中，但拖动cell的时候上面的图片很难保持在顶部
-
b.导航栏用原生的导航栏，很难控制，因为原生的导航栏里包含了许多的控件，所以这里我们用自定义导航栏来实现
-
c.上下滑动的时候通过其偏移量，来计算图片的尺寸的变化
下面我们来实现：
- 第一步：
- 创建自定的导航栏，这里我自定义了一个类来实现：
- 初始状态下的导航栏是透明的
BPCustomNavBar *nav = [[BPCustomNavBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
nav.title = @"风景如画";
nav.titleColor = [UIColor whiteColor];
nav.leftImage = @"back_icon";
nav.rightImage = @"share_icon";
nav.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.f];
[self.view addSubview:nav];
self.navBar = nav;
- 第二步：
- 创建图片：
//创建背景图片
self.bgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2"]];
self.bgView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width*0.8);
self.originalFrame = self.bgView.frame;
[self.view addSubview:self.bgView];
- 第三步：
- 创建下面部分的UITableView
- 因tableView也可以滑动到上面，所有其y值，应该是导航栏的高度，但这样就挡住了背景的图片，所以我们需要创建tableView的头部是视图，将其背景色clear这样就可以达到要求：
//新建UItableView
UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
table.backgroundColor = [UIColor clearColor];
table.delegate = self;
table.dataSource = self;
[self.view addSubview:table];
self.tableView = table;
//添加头部
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, headHeight)];
headerView.backgroundColor = [UIColor clearColor];
self.tableView.tableHeaderView = headerView;
- 第四步：
- 实现滑动tableView改变背景图片的尺寸，监听其scrollView的方法- (void)scrollViewDidScroll：(UIScrollView *)scrollView ，监听其偏移量：
CGFloat yoffset = scrollView.contentOffset.y;
NSLog(@"===========%f",yoffset);
//当其偏移量在headView的范围内的时候，navBar颜色的改变
if (yoffset < headHeight) {
self.navBar.titleColor = [UIColor whiteColor];
self.navBar.leftImage = @"back_icon";
self.navBar.rightImage = @"share_icon";
self.navBar.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:yoffset/headHeight];
}else {
self.navBar.titleColor = [UIColor whiteColor];
self.navBar.backgroundColor = [UIColor redColor];
self.navBar.leftImage = @"back_icon";
self.navBar.rightImage = @"share_icon";
}
//上下滑动的时候的背景图片的放大
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.bgView.frame;
frame.size.height = self.originalFrame.size.height -yoffset;
frame.size.width = self.originalFrame.size.width * frame.size.height /self.originalFrame.size.height;
frame.origin.x = -(frame.size.width - self.originalFrame.size.width)/2;
frame.origin.y = 0;
frame;
});
// self.bgView.frame = ({//高度变化的快
// CGRect frame = self.bgView.frame;
// frame.size.width = self.originalFrame.size.width -yoffset;
// frame.size.height = self.originalFrame.size.height * frame.size.width /self.originalFrame.size.width;
// frame.origin.x = -(frame.size.width - self.originalFrame.size.width)/2;
// frame.origin.y = 0;
// frame;
// });
}
