看到不少人看了我的上一篇《iOS 仿滴滴出行界面UI（1）》的，看来还是有不少人有这个需求的，一直想再写一篇补充完善，一直懒得去写...
我更新了一下滴滴出行的APP，看到UI部分已经有了一点变化，但是变化不是很大。
好吧，我现在把做的一些仿的滴滴的UI发上来，顺便说一下是怎么实现的。
先说一下有哪些知识点会用到：UIScrollView、UITableView、KVO、响应链，总体来说就这些，还有一些琐碎的东西（例如UIView的动画的简单使用），下面边说边看吧。
我已经把Demo发到了GitHub——链接。
Demo演示
GIF有4M，加载可能会慢：
1.视图的层级
先看一下视图的层级：
——（1级）UIViewController的UIView，也就是主视图；
————（2级）mapView，这一层是加在UIView上的，没什么疑问；
————（2级）headerView，头部视图，加在UIView上的；
————（2级）UIScrollView，加在UIView上的；
——————（3级）UITableView，加在UIScrollView上的；
——————（3级）和UITableView同级的其它视图，也加在UIScrollView上。
2. ViewController里要加载的视图
- (void)viewDidLoad {
[super viewDidLoad];
[self setupMapView]; //地图视图
[self setupHeaderView]; //HeaderView
[self setupScrollView]; //ScrollView
[self setupTableView]; //TableView
[self setupTaxiView]; //TaxiView
}
2. 说一下scrollView
将headerView和MapView加到UIView上之后，将ScrollView放到UIView上。
首先创建一个UIScrollView的子类，我这里取名叫XDSScrollView，然后重写它的
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event方法（响应链的相关方法），重写后如下：
@implementation XDSScrollView
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
//注意，这里是判断现在操作的界面是在ScrollView的哪一个部分上（快车还是出租车）
int count = self.contentOffset.x / [UIScreen mainScreen].bounds.size.width;
UIView *view = self.subviews[count];
//手指点击的坐标本来是以主视图为基准的，现在我们以快车（XDSTbaleView）或出租车界面（XDSTaxiView）为基准。
CGPoint viewPoint = [self convertPoint:point toView:view];
//如果在快车（XDSTableView）或出租车界面（XDSTaxiView）外面，则操作地图
if (viewPoint.y<0) {
return nil;
}
//在快车（XDSTableView）或出租车界面（XDSTaxiView）里面，则正常调用此方法。
return [super hitTest:point withEvent:event];
}
@end
然后在ViewController.m中设置ScrollView，注意颜色为透明的，contentSize为(0,0)。
#pragma mark - ScrollView视图
- (void)setupScrollView{
XDSScrollView *scrollView = [[XDSScrollView alloc] init];
scrollView.frame = self.view.bounds;
scrollView.contentSize = CGSizeMake(0, 0);
scrollView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0];
scrollView.pagingEnabled = YES;
scrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:scrollView];
self.scrollView = scrollView;
}
然后将快车（XDSTableView）和出租车界面（XDSTaxiView）外面分别添加到scrollView的第一页和第二页上。
3. 如何上滑tableView伸缩headerView
利用KVO监听XDSTableView的contentOffset。下面代码中self.tableView是目标对象，也就是被监听的对象，监听的属性是contentOffset；Observer是self，即ViewController。
//添加KVO监听
[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
KVO的回调方法如下。在里面判断tableView滑到屏幕的一半时，headerView就会收缩，使用了animateWithDuration...方法做平滑动画效果。
#pragma mark - KVO 监听tableView（收缩头部视图）
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
if ([keyPath isEqualToString:@"contentOffset"]) {
CGPoint tableContenOffset = [change[NSKeyValueChangeNewKey] CGPointValue];
if (tableContenOffset.y > -ScreenH*0.5) {
if (self.headerView.xds_y == 0) {
[UIView animateWithDuration:0.15 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ //0.15秒内做完改变frame的动画，动画效果匀速
self.headerView.xds_y = -headerH;
} completion:nil];
}
}
if (tableContenOffset.y < -ScreenH*0.5) {
if (self.headerView.xds_y == -headerH) {
[UIView animateWithDuration:0.15 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ //0.15秒内做完改变frame的动画，动画效果匀速
self.headerView.xds_y = 0;;
} completion:nil];
}
}
}
}
4. 快车（XDSTableView）和出租车界面（XDSTaxiView）
将XDSTableView添加到XDSScrollView作为第一个子视图，设置contentInset将其下移；将XDSTaxiView作为XDSScrollView的第二个子视图添加上去。
然后headerView上的两个按钮的点击事件设置一下。
先说到这里吧，后面有空的话会在完善。
对你有帮助的话可以点个喜欢，谢谢~~
如有错误或改进，烦请指出，感谢！
