自己写一个滑动菜单栏（YWSlideMenu）

滑动导航菜单在现在的APP中很普遍，它不仅可以点击导航菜单选择某项，显示相应的内容。也可以左右滑动主屏幕切换导航菜单栏时，同时切换主屏幕内容。

这两天我自己也撸了一个简单易用的滑动菜单栏。
最终效果：

YWmenu.gif

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];