使用ScrollView实现上下联动(标题栏与内容)

写这篇文章就是给刚刚学习ScrollView的人一点点思路，我曾经在第一次做项目使用scrollview去尝试写过一个上下联动

的小功能，第一次尝试写的非常的乱，今天突然想起来就写了一个小Demo，给初学一点思路，废话不多说上代码。

以下代码使用的自定义View。

首先我们要先创建两个ScrollView，一个是上面的标题（titleScroll），一个是下面的内容（contentScroll）

创建titleScroll代码如下：

self.titleScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, self.frame.size.width, 40)];

self.titleScroll.backgroundColor = [UIColor orangeColor];

self.titleScroll.contentSize = CGSizeMake(self.titleArray.count * 60, 40); 

[self addSubview:self.titleScroll];

在写contentSize的时候有一个self.titleArray.count这个数组里存的是标题名

创建contentScroll代码如下：

self.contentScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 60, self.frame.size.width,self.frame.size.height

- 60)];

self.contentScroll.delegate = self;

    self.contentScroll.contentSize = CGSizeMake(self.titleArray.count * self.frame.size.width, self.frame.size.height - 60);

self.contentScroll.pagingEnabled = YES;  //按页滚动

[self addSubview:self.contentScroll];

这里的两个scroll都是属性，而且以后都要使用协议方法做点事情所以都签了协议。

创建完之后我们需要在titleScroll上创建UIButton或者UILabel，如果是Button添加点击方法，如果是Label添加手势

循环添加打上tag值就ok

代码如下：

for (int i = 0; i < self.titleArray.count; i++) {

        UIButton *titleBtn = [UIButton buttonWithType:UIButtonTypeCustom];

        [titleBtn setTitle:self.titleArray[i] forState:UIControlStateNormal];

        [titleBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

        titleBtn.frame = CGRectMake(i * 60, 5, 60, 30);

        [self.titleScroll addSubview:titleBtn];

        [titleBtn addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];

        titleBtn.tag = 1000 + i;

    }

基本的页面已经搭建完了就需要开始添加联动功能了

联动的功能需要使用到scrollView的协议方法ScrollViewDidScroll:(UIscrollView)scrollView，以及在点击方法中使用setContentOffset

在点击方法中传进来你所点击的Button，手势同理

- (void)buttonClick:(UIButton *)sender{

    这里的changeColorButtonId是一个属性记录上一个被选中的按钮的tag值，第一次默认是1000

    UIButton *tempBtn = [self viewWithTag:self.changeColorButtonId];

    

   将上一次选中的按钮颜色复原

    [tempBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    将本次选中的按钮颜色改变

    [sender setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];

   

    然后再将本次的tag值赋值给tag值记录属性使之在下次点击时间触发后还原本次按钮的颜色

    self.changeColorButtonId = sender.tag;

    点击后需要跳转到contentScroll的对应位置在这里计算

    NSInteger index = sender.tag - 1000;

    CGPoint offset = self.contentScroll.contentOffset;

    offset.x = index * self.contentScroll.frame.size.width;

    计算好偏移量后使用此方法

    [self.contentScroll setContentOffset:offset animated:YES];

}

然后是在滑动ContentScroll的时候使用的协议方法：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

    在此方法中先判断是谁滑动

    if (scrollView == self.contentScroll) {

        利用偏移量和屏幕宽计算出需要显示的ScrollView

        int index = scrollView.contentOffset.x / self.frame.size.width;

        根据下标取出对应的视图，在自定义视图中没有子控制器可以模仿系统写一个数组把子控制器添加到数组在按下标取出

        UIViewController *willView = self.childViewController[index];

        willView.view.frame = CGRectMake(self.frame.size.width * (int)index, 0, self.frame.size.width, self.frame.size.height - 30);

        [_contentScroll addSubview:willView.view];

       计算根据contentScroll的偏移去便宜上面titleScroll

        CGPoint offSet = self.titleScroll.contentOffset;

        offSet.x = index * 60 - self.frame.size.width / 2;

        [self.titleScroll setContentOffset:offSet animated:YES];

        

        根据下标改变按钮的颜色

        UIButton *tempBtnChange = [self viewWithTag:1000 + index];

        UIButton *restore = [self viewWithTag:self.changeColorButtonId];

        [restore setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

        [tempBtnChange setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];

        self.changeColorButtonId = 1000 + index;

    }

    判断当时titleScroll滑动的时候，不能滑动出界限

    if (scrollView == self.titleScroll) {

        if (self.titleScroll.contentOffset.x < 0) {

            self.titleScroll.contentOffset = CGPointMake(0, 0);

        }

        if (self.titleScroll.contentOffset.x > self.titleScroll.contentSize.width - self.frame.size.width) {

            self.titleScroll.contentOffset = CGPointMake(self.titleScroll.contentSize.width - self.frame.size.width, 0);

        }

    }

}