实现网易新闻界面分段滑动展示的设计

工作中经历的两个项目的界面设计都是类似于网易新闻的那种形式，本人也确实认为这种展示在特定情况下是一种非常直观的形式。

例：



所以在这里整体的分析一下实现思路。

首先对这种界面的逻辑进行分析：

1.界面上端有分段点击选择的视图，且可滑动。

2.由于上端的分段选择视图可点击范围较小，而且用户也习惯于用手势来滑动切转界面，所以展示界面是需要滑动的。

3.点击分段选择的Button和手势去滑动切转的界面要对应。

4.第一次切转到的界面需要创建，而之后再滑动到这个界面时，则不需要创建。也就是说：如果上端的分段选择控件上有7种分类的按钮，则分别点击则只需创建7次展示的界面，之后再切转到这个界面时如果需要刷新数据则只需上拉刷新即可。

5. 一般展示界面的风格设计都是一样的，可能要考虑到界面重复利用

大致就是这些。。。

下面开始进行界面的构建：

第一步是界面，因为下端是可以滑动的，所以展示界面肯定是放在一个scrollView上面的。所以先在viewcontroller里面创建一个UIScrollView属性， 然后对其进行初始化

- (UIScrollView*)scrollView
{
if (!_scrollView) {
self.scrollView = [[UIScrollView alloc] init];
self.scrollView.showsVerticalScrollIndicator = NO;
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.pagingEnabled = YES;
self.scrollView.directionalLockEnabled = YES;
self.scrollView.bounces = NO;
}
return _scrollView;
}

在viewDidLoad里调用创建scrollView的方法
//104 = 64导航栏高度+40分段选择视图的高度
//kSelectButtonNum是分段选择视图的button个数
- (void)layoutSctollView
{
self.scrollView.frame = CGRectMake(0, 104, kScreenW, kScreenH - 104);

//设置scrollView的容量
self.scrollView.contentSize = CGSizeMake(kScreenW * kSelectButtonNum, kScreenH - 104);

self.scrollView.delegate = self;

//将scrollView添加到view中
[self.view addSubview:self.scrollView];
}

第二步是上面的可滑动的选择控件，本来想自己封装一个这样的控件，但网上查到一个基本能够实现这种需求的类别，所以就直接拿来用了，封装的也可以，用起来也简单。 XWCatergoryView 就是这个

按照要求进行一些设置

//catergoryView
XWCatergoryView* catergoryView = [XWCatergoryView new];
//必须设置titles数据源
catergoryView.titles = @[ @"按钮1", @"按钮2", @"按钮3", @"按钮4", @"按钮5", @"按钮6", @"按钮7" ];
//必须设置关联的scrollview
catergoryView.scrollView = self.scrollView;

//代理监听点击;
catergoryView.delegate = self;
//当前选中的item是否缩放
catergoryView.scaleEnable = YES;
//设置文字左右渐变
catergoryView.titleColorChangeEable = YES;
//item的间距
catergoryView.itemSpacing = 30;
//开启底部线条
catergoryView.bottomLineEable = YES;
catergoryView.titleFont = [UIFont systemFontOfSize:12];
//设置底部线条距离item底部的距离
catergoryView.bottomLineSpacingFromTitleBottom = 10;
//禁用点击item滚动scrollView的动画
catergoryView.scrollWithAnimaitonWhenClicked = NO;
[catergoryView mas_makeConstraints:^(MASConstraintMaker* make) {
make.left.right.equalTo(self.view);
make.top.equalTo(self.view.mas_top).offset(64);
make.height.equalTo(@50);
make.bottom.equalTo(self.scrollView.mas_top);
}];
[self.view addSubview:catergoryView];
self.catergoryView = catergoryView;

第三步是分别实现 XWCatergoryView和UIScrollView的代理方法

XWCatergoryView的代理方法：

/**
*  监听item点击
*/
- (void)catergoryView:(XWCatergoryView*)catergoryView didSelectItemAtIndexPath:(NSIndexPath*)indexPath
{
//将scrollView展示对应的界面
[self.scrollView setContentOffset:CGPointMake(kScreenW * indexPath.row, 0) animated:NO];
//处理界面逻辑
[self scrollViewContrntOffSet:_scrollView];
}

UIScrollViewDelegate：

/**
*  当scrollView已经结束减速时调用(滑动时调用)
*/
- (void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView
{
[self scrollViewContrntOffSet:scrollView];
}

处理界面逻辑的方法

/**
*  当scrollView偏移到不同的位置时添加不同的tableview
*  无论点击button还是手势滑动都会调用这个方法
*/
- (void)scrollViewContrntOffSet:(UIScrollView*)scrollView
{
NSInteger count = scrollView.contentOffset.x / kScreenW;

//将scrollView停止滑动时, 判断其偏移量, 并将其存入数组, 之后每次与数组元素对比, 以确保每个偏移量上只创建一个tableview
NSString* tempStr = [NSString stringWithFormat:@"%ld", (long)count];
if (count) {
if (![self.mutableArr containsObject:tempStr]) {
[self.mutableArr addObject:tempStr];
ListController* TableVC = [[ListController alloc] initWithStyle:UITableViewStylePlain];
TableVC.indentState = count;
TableVC.tableView.frame = CGRectMake(kScreenW * count, 0, kScreenW, kScreenH - 104);

//将订单列表控制器受容器控制
[self addChildViewController:TableVC];
[self.scrollView addSubview:TableVC.tableView];

[self.ListArr addObject:TableVC];
}
}
}

***这里有一个值得提醒的地方，就是当界面第一次加载时，底层的scrollView既没有滑动，分段选择控件也没有点击， 也就是说当界面加载完后scrollView的偏移量为0时是没有创建展示界面的（也就是ListController）

所以我的处理方法是在viewcontroller的viewDidLoad里直接创建一个ListController，并将其放在scrollView偏移量为0时的位置。这里也是为什么上面要判断count是否为零

第四步：创建ListController放在scrollView偏移量为0的位置

- (void)layoutListView
{
ListController* TableVC = [[ListController alloc] initWithStyle:UITableViewStylePlain];
//默认显示全部数据（状态是：全部）
TableVC.indentState = 0;
TableVC.tableView.frame = CGRectMake(0, 0, kScreenW, kScreenH - 104);
[self.ListArr addObject:TableVC];
//将订单列表控制器受容器控制
[self addChildViewController:TableVC];

[self.scrollView addSubview:TableVC.tableView];
}

所以最后viewDidLoad的方法里是这样调用的

- (void)viewDidLoad
{
[super viewDidLoad];

//布局scrollView
[self layoutSctollView];

//布局顶端选择列表
[self layoutSelectView];

//布局列表视图
[self layoutListView];
}

上面用到得数组初始化

- (NSMutableArray *)ListArr
{
if (!_ListArr) {
self.ListArr = [NSMutableArray array];
}
return _ListArr;
}

- (NSMutableArray*)mutableArr
{
if (!_mutableArr) {
self.mutableArr = [NSMutableArray array];
//因为scrollView偏移量为0时，在界面viewDidLoad里面创建过了ListView，所以这个数组里面应该默认就有“0”
NSString* str = @"0";
[self.mutableArr addObject:str];
}
return _mutableArr;
}

就这样了 上面所有分析的界面逻辑都已实现。。。