滑动导航菜单在现在的APP中很普遍，它不仅可以点击导航菜单选择某项，显示相应的内容。也可以左右滑动主屏幕切换导航菜单栏时，同时切换主屏幕内容。
这两天我自己也撸了一个简单易用的滑动菜单栏。
最终效果：
Demo完整代码在github：wang66/YWSlideMenuDemo
使用姿势：
YWSlideMenu *slideMenu = [[YWSlideMenu alloc] initWithFrame:self.contentView.bounds];
slideMenu.itemsTitle = @[@"头条", @"娱乐", @"体育", @"财经", @"科技", @"时尚", @"直播", @"热点", @"图片", @"新闻"];
slideMenu.itemBarSize = CGSizeMake(60, 35); //
slideMenu.ywSlideMenuDelegate = self;
[self.contentView addSubview:slideMenu];
思路：
首先，这种视图分为两部分，顶部的bar和占据剩余屏幕的内容视图。他俩都是可以滚动的，或者说他俩都是允许滚动的，因为内容所承载的内容超出了屏幕可视范围。那我们自然可以想到他俩应该是scrollView，但是用scrollView可能存在性能问题，因为下面内容视图往往比较庞大复杂，那我们自然想到了tableView和collectionView，他俩都是继承自scrollView的，允许滚动，而且有复用机制，解决了性能问题。tableView和collectionView都是可行的，我在YWSlideMenu中使用的是tableView。
那么，对于顶部的barTableView来说，每项选项其实就是每个cell。同样，对于下面的contentView来说，在屏幕可视范围内的内容也是其每个cell。
唯一的问题是这里的滚动都是横向水平的滚动，而tableView的滚动是纵向的，所以我们得做处理，将tableView和它的cell旋转90度。
self.slideBarTabelView.frame = CGRectMake(0, 0, _itemBarSize.height, CGRectGetWidth(self.frame));
self.slideBarTabelView.center = CGPointMake(CGRectGetWidth(self.frame)/2.f, _itemBarSize.height/2.f);
self.slideBarTabelView.transform = CGAffineTransformMakeRotation(-M_PI_2); //旋转形变一定要给frame和center赋值后面
注意，这俩设置tableView的frame时，width和height要颠倒。
cell.transform = CGAffineTransformMakeRotation(M_PI_2);
然后，在操作时，这俩tableView是联动的。当我点击顶部的barTableView时，下面的contentTableView会切换至相应的内容，即滚动到相应偏移量的位置。
我们点击了barTableView的某个cell后，我们可以在didSelectRowAtIndexPath:方法，获得该cell，有了cell后我们自然可以拿到它在tableView上的坐标y值，然后就可以算出它是第几行的cell，即它是第几项。假如它为第3项，那下面的contentTableView也要切换至第3项的内容视图，用代码表现就是偏移量为3*Width_MainScreen。
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
if(tableView==self.slideBarTabelView){
BasicCell *cell = [tableView cellForRowAtIndexPath:indexPath];
NSInteger count = cell.frame.origin.y/_itemBarSize.width;
self.slideContentTableView.contentOffset = CGPointMake(0, CGRectGetWidth(tableView.frame)*count);
[self.slideBarTabelView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionMiddle animated:YES]; // 滑动至选中的居中
[self selectedTableView:tableView indexPath:indexPath];
}
}
除此外，当我们滑动contentView时，也会联动barTableView。下面方法为scrollView的代理方法，当某次滑动减速时调用一次。我们可以在该方法里，拿到到contentTableView的偏移量，通过偏移量可以拿到其当前滚动到的indexPath，那么我们可以让顶部的barTableView同样滚动至该indexPath，完成联动。
// 当滑动减速时调用一次
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
NSIndexPath *indexPath = [self.slideContentTableView indexPathForRowAtPoint:scrollView.contentOffset];
[self.slideBarTabelView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionMiddle animated:YES];
[self selectedTableView:self.slideBarTabelView indexPath:indexPath];
}
最后还有个问题是，这样一来，内容视图是占据几乎整个屏幕的一个cell，而每项对应的内容视图是怎样的，对YWSlideMenu来说是未知的，它是由外部业务需求决定的，所以我们得想办法由外部来来创建cell的视图内容。我在YWSlideModel中使用的是delegate，这和UITableView的dataSource代理一样，由外部的控制器来实现代理方法，返回数据。
slideMenu.ywSlideMenuDelegate = self;
- (UIView *)ywSlideMenu:(YWSlideMenu *)slideMenu index:(NSInteger)index
{
if(index==0)
{
if(!_firstTableView){
_firstTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, Width_MainScreen, Height_MainScreen-Height_SlideMenu-64.f) style:UITableViewStylePlain];
_firstTableView.dataSource = self;
_firstTableView.delegate = self;
_firstTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
_firstTableView.tableFooterView = [[UIView alloc] init];
}
return _firstTableView;
}
else if(index==1)
{
if(!_secondTableView){
_secondTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, Width_MainScreen, Height_MainScreen-Height_SlideMenu-64.f) style:UITableViewStylePlain];
_secondTableView.dataSource = self;
_secondTableView.delegate = self;
_secondTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
_secondTableView.tableFooterView = [[UIView alloc] init];
}
return _secondTableView;
}
else{
UIView *emptyView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, Width_MainScreen, Height_MainScreen-Height_SlideMenu-64.f)];
emptyView.backgroundColor = Color_Random;
return emptyView;
}
return nil;
}
在YWSlideMenu内部生成UITableViewCell时调用代理方法，生成cell的视图。
if([self.ywSlideMenuDelegate respondsToSelector:@selector(ywSlideMenu:index:)]){
UIView *cellView = [self.ywSlideMenuDelegate ywSlideMenu:self index:indexPath.row];
for(UIView *subView in cell.subviews)
{
[subView removeFromSuperview];
}
[cell addSubview:cellView];
