IOS 类似网易新闻客户端内容滚动菜单跟随居中组件

需求分析：

　　1、类似网易新闻客户端页面滚动组件、菜单栏对应菜单项一直居中

　　2、点击菜单栏可以切换到对应的page

　　3、滑动页面可以自动切换相应的菜单、并且对应的菜单栏居中显示

　　4、初始化时可以自定义菜单项

　　5、菜单内容、页面内容自定义

 

设计实现：

　　1、菜单和页面内容分别设计为两个横向滚动的UITableView，将两个横向滚动的tableView 放置在一个UIView中

　　2、点击菜单栏时响应该事件，并将页面切换到响应页

　　3、内容页面滚动停止时，将对应菜单项滚动到中间

 

实现效果：

　　

 

四、关键代码

　　1、横向的tableview 如何实现

　　

- (UITableView *)topMenuTableView

{

    if(nil == _topMenuTableView)

    {

        CGFloat topMenuHeight = TopTabControl_Default_TopMenuHeight;

        if([self.datasource respondsToSelector:@selector(TopTabHeight:)])

        {

            topMenuHeight = [self.datasource TopTabHeight:self];

        }

        

        //before rotate bounds = (0, 0, width, height)  , rototate -90 bounds = (0, 0, height, width)

        CGFloat x = CGRectGetWidth(self.frame)/2 - topMenuHeight/2;

        CGFloat y = -CGRectGetWidth(self.frame)/2 + topMenuHeight/2;

        CGRect topMenuRect = CGRectMake(x, y, topMenuHeight, CGRectGetWidth(self.frame));

        _topMenuTableView = [[UITableView alloc] initWithFrame:topMenuRect

                                                         style:UITableViewStylePlain];

        [self addSubview:_topMenuTableView];

        _topMenuTableView.backgroundColor = [UIColor randomColor];

        _topMenuTableView.dataSource = self;

        _topMenuTableView.delegate = self;

        _topMenuTableView.showsVerticalScrollIndicator = NO;

        _topMenuTableView.transform = CGAffineTransformMakeRotation(-M_PI / 2);

        

    }

    return _topMenuTableView;

}





- (UITableView *)contentTableView

{

    if(nil == _contentTableView)

    {

        CGFloat contentHeight = CGRectGetWidth(self.frame);

        CGFloat contentWidth  = CGRectGetHeight(self.frame) - [self getMenuHeight];

        CGFloat x = CGRectGetWidth(self.frame)/2 - contentWidth/2;

        CGFloat y = (CGRectGetHeight(self.frame) - [self getMenuHeight])/2 - contentHeight/2 + ([self getMenuHeight]);

        CGRect contentRect = CGRectMake(x, y, contentWidth, contentHeight);

        _contentTableView = [[UITableView alloc] initWithFrame:contentRect

                                                         style:UITableViewStylePlain];

        [self addSubview:_contentTableView];

        

        _contentTableView.backgroundColor = [UIColor randomColor];

        _contentTableView.dataSource = self;

        _contentTableView.delegate = self;

        _contentTableView.showsVerticalScrollIndicator = NO;

        _contentTableView.pagingEnabled = YES;

        _contentTableView.transform = CGAffineTransformMakeRotation(-M_PI / 2);

    }

    

    return _contentTableView;

}

　　2、协议接口

/** @brief TopTabControl datasource 需要支持的协议 */

@protocol TopTabControlDataSource<NSObject>



@optional



/**

 *  得到顶部菜单栏的高度

 *

 *  @param tabCtrl tab控件

 *

 *  @return 高度（像素）

 */

- (CGFloat)TopTabHeight:(TopTabControl *)tabCtrl;



/**

 *  得到顶部菜单栏的宽度

 *

 *  @param tabCtrl tab控件

 *

 *  @return 高度（像素）

 */

- (CGFloat)TopTabWidth:(TopTabControl *)tabCtrl;





/**

 *  得到顶部菜单的个数

 *

 *  @param tabCtrl tab控件

 *

 *  @return 返回菜单的个数

 */

- (NSInteger)TopTabMenuCount:(TopTabControl *)tabCtrl;







/**

 *  得到第几个菜单的view

 *

 *  @param tabCtrl tab控件

 *  @param index   菜单的index，从0开始

 *

 *  @return 返回单个菜单项

 */

- (TopTabMenuItem *)TopTabControl:(TopTabControl *)tabCtrl

                      itemAtIndex:(NSUInteger)index;





/**

 *  得到第几个菜单对应的page内容

 *

 *  @param tabCtrl tab控件

 *  @param index   菜单的index，从0开始

 *

 *  @return 返回单个菜单页

 */

- (TopTabPage *)TopTabControl:(TopTabControl *)tabCtrl

                      pageAtIndex:(NSUInteger)index;



@end

五、完整代码

　https://github.com/liqiushui/TopTabControl