简易自定义seg与tableview联动布局

//第一步：首先我们需要一个自定义的UISegmentControl,通过一个view上添加一排自定义的UILabel来实

现

a.自定义的label，具有缩放功能，点击效果是变色并且字体颜色改变

@interface hglable : UILabel

@property (nonatomic,assign)CGFloat scale;

- (instancetype)initWithFrame:(CGRect)frame

{

    self = [superinitWithFrame:frame];

    if (self) {

        self.textAlignment =NSTextAlignmentCenter;

        self.font = [UIFontsystemFontOfSize:18];

        self.scale =0.0;

        self.layer.cornerRadius =8;

        

    }

    return self;

}

- (void)setScale:(CGFloat)scale{

    _scale = scale;

    self.textColor = [UIColorcolorWithRed:scalegreen:0.0blue:0.0alpha:1];

    CGFloat minScale = 0.9;

    CGFloat trueScale = minScale + (1-minScale)*scale;

    self.transform =CGAffineTransformMakeScale(trueScale, trueScale);

}

//b.用for循环创建label,并且添加手势

  for (int i =0 ; i <5; i ++) {

        CGFloat labW = 100;

        CGFloat labH = 40;

        CGFloat labY = 0;

        CGFloat labX = i * labW;

        Hglable *lab1 = [[Hglablealloc]init];

        lab1.text = self.titleArr[i];

        lab1.frame = CGRectMake(labX, labY, labW, labH);

        lab1.font = [UIFontfontWithName:@"HYQHei"size:19];

        [self.smallScolleraddSubview:lab1];

//这里就是将创建好的label添加到小scrollerview上

        lab1.tag = i+1000;

        lab1.userInteractionEnabled =YES;

        [lab1 addGestureRecognizer:[[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(labClick:)]];

c.手势的点击方法就是控制tableview的ContentOffset

e来实现点击label对tableview的控制

- (void)labClick:(UITapGestureRecognizer *)recogenizer{

    

    Hglable *titleLab = (Hglable *)recogenizer.view;

    CGFloat offsetX = (titleLab.tag-1000) *sc.frame.size.width;

    CGFloat offsetY =sc.contentOffset.y;

    CGPoint offset = CGPointMake(offsetX, offsetY);

    [scsetContentOffset:offsetanimated:YES];

    

}

//第二步：我们需要写一个大scrollerview，他的contentSize

足以容纳我们需要添加的几个tableview

 a.创建ScrollerView,添加一张默认的tableview

    sc = [[UIScrollViewalloc]initWithFrame:CGRectMake(kWidth,50, [UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height)];

 

    sc.backgroundColor = [UIColoryellowColor];

    sc.delegate =self;

    sc.contentSize =CGSizeMake(self.view.frame.size.width*5,0);

//创建几张tableview用来放到大scrollerview上

 one = [[FirstTableViewControlleralloc]init];

    one.view.backgroundColor = [UIColorredColor];

    two = [[FirstTableViewControlleralloc]init];

     two.view.backgroundColor = [UIColorgreenColor];

    three = [[FirstTableViewControlleralloc]init];

     three.view.backgroundColor = [UIColorblueColor];

    four = [[FirstTableViewControlleralloc]init];

     four.view.backgroundColor = [UIColorcyanColor];

  [scaddSubview:one.tableView];

b.实现拖动tableView来自动跳转对应的自定义label上

1）这个函数实现了scrollerview触发停止减速的代理方法的时候会自定调用另一个代理方法，实现简化代码作用

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{   

    [selfscrollViewDidEndScrollingAnimation:scrollView];

}

2）滑动tableview的时候，对应的label跟着位置相应变动，并且添加上一张新的tableview

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView

{

    

    NSUInteger index = scrollView.contentOffset.x/sc.frame.size.width;

    switch (index) {

        case 0:

           one.tableView.frame = scrollView.bounds;

                       [sc addSubview:one.tableView];

            break;

        case 1:

            

            two.tableView.frame = scrollView.bounds;

            two.arr =@[@"two"];

            [sc addSubview:two.tableView];

            

            break;

        case 2:

            

            three.tableView.frame = scrollView.bounds;

            three.arr =@[@"three"];

            [sc addSubview:three.tableView];

            break;

        case 3:

            

            four.tableView.frame = scrollView.bounds;

            four.arr =@[@"four"];

            [sc addSubview:four.tableView];

            break;

        case 4:

            

            five.tableView.frame =scrollView.bounds;

            five.arr =@[@"five"];

            [sc addSubview:five.tableView];

            break;

            

        default:

            break;

    }

//下面代码实现滑动tableview的时候，对应的label跟着位置相应变动，并且有放大效果，而且出现黑色边框效果

       [self.smallScollersetContentOffset:CGPointMake(index*25,0)animated:YES]  ;

    

    for (int i=0; i<5; i++) {

        Hglable *titlelab = (Hglable *)[self.smallScollerviewWithTag:i+1000];

        titlelab.scale = 0;

        titlelab.layer.borderWidth =5;

        titlelab.layer.borderColor = [[UIColorclearColor]CGColor];

        if (i == index) {

            titlelab.scale = 1.0;

         

            titlelab.layer.borderColor = [[UIColorblackColor]CGColor];

        }

}

//第三步：我们在label下写一个绿色细长UIView，实现点击自定义label的时候自动平移到对应的label下面

a.创建细长条UIView

 UIView *line = [[UIViewalloc]initWithFrame:CGRectMake(0,45,100, 5)];

    line.tag = 100;

    [self.smallScolleraddSubview:line];

    line.backgroundColor = [UIColorgreenColor];

b.用小scrollerview的代理方法实现细长条的平移动画

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

  

    if (scrollView.tag !=300 ) {

        

 float index = (float)scrollView.contentOffset.x/(float)sc.frame.size.width;

    

    UIView *lab = (UIView *)[self.viewviewWithTag:100];

        lab.x = index *100;}

}

//总结一下：大家发现是如何实现上下联动的么，自定义lable的点击方法实现了大Scrollerview的contentOffset改变并且触发了代理方法添加新的tableview。

而拖动tableview也会使得对应的label移动并且使得他进行缩放。