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

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

例：

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

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

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

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