ios自定义带过渡效果的segment分段控制器

markdown真的是很好用,因为是写的第一篇文章,所以着重强调一下,让人注重写作而不是注重排版.关于markdown的入门大家可以看这个文章-献给写作者的 Markdown 新手指南

在项目中,分段控制器是个再常见不过的控件,但是官方自带的分段控制器太过简单,已无法满足需求.所以自己写了一个实时过度动画的分段控制器.

效果如下

2016-11-01 14_13_00.gif

下面说实现的思路

• 实现segment上面的按钮

QQ20161101-1@2x.png

简单的布局,如果按钮很多的话,用个for循环,很基础的东西.我这里用的是view,用的点击手势做事件处理,用tag区分.用button也可,因为这里只需要展示没有选中时的状态.所以用UIView也很简单,不需要用button,为什么只有一种未选中的状态,下面会说到.

• 创建与上面按钮相关联的scrollView,就是下面的页面.

Paste_Image.png

创建用来显示各个页面的scrollView,看需求,大多数直接用屏幕宽度xsegment的按钮数,计算总体的页面的frame;

 //大scrollView,用来展示各个controller的view
    self.mainScrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, self.baseView.height, self.width, self.height-self.baseView.bottom)];
    self.mainScrollView.delegate=self;
    //整页滚动以及禁止反弹
    self.mainScrollView.pagingEnabled=YES;
    self.mainScrollView.bounces=NO;
    [self addSubview:self.mainScrollView];
    //设置contentsize大小
    self.mainScrollView.contentSize=CGSizeMake(conArray.count*self.width, self.height-self.backview.bottom-7);
    
//controllerArray是传过来controller数组,将每个controller的view添加到scrollView上面
    for (int i=0; i<conArray.count; i++) {
        
        UIViewController*VC=conArray[i];
        VC.view.frame=CGRectMake(i*self.mainScrollView.width, 0, self.mainScrollView.width, self.mainScrollView.height);
        [self.mainScrollView addSubview:VC.view];
    }

• 重点就是这个过度效果,我会主要说明这个
  上面创建分段控制器button的时候说过只需要创建未选中时候的状态,现在要创建一个用来展示选中状态的scrollView,为了方便我叫他遮罩视图.
  遮罩的frame就是一个按钮的大小,contentsize是整个上面按钮栏的大小.
  将这个遮罩完全覆盖第一个按钮的位置.就形成了选中状态.

遮罩的frame.png 遮罩的contentsize
一句话说明,在手指滑动下面大的scrollView的同时,让遮罩视图的frame与contentOffSet跟着下面的视图同时更改
然后将遮罩的contentView设置成跟后面未选中状态一样的布局.将颜色字体更改成选中的状态.设置scrollView的代理,在滑动页面,更改遮罩的位置frame,并且同时更改遮罩的contentOffset,这里要加上uiview animation的动画,这样就实现了想要的效果.下面代码并不是全部代码,只是这一部分的代码

//在左右滑动页面的时候,同时滑动遮罩scrollView,并且设置contentoffset;一系列计算…俗称好屌算啊握草
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if(scrollView == self.mainScrollView){
        [self.zheZhaoScroll setFrame:CGRectMake(scrollView.contentOffset.x*(self.zheZhaoScroll.width/SWIDTH), self.zheZhaoScroll.top, self.zheZhaoScroll.width,self.zheZhaoScroll.height)];
        [self.zheZhaoScroll setContentOffset:CGPointMake(scrollView.contentOffset.x*(self.zheZhaoScroll.width/SWIDTH), 0)];
    }
}

• 点击事件的处理也这里就不细说了,还有个重点上滑隐藏segment,下滑显示

-(void)slideUpOrDown:(UIScrollView*)scrollView
{
    if (scrollView.contentOffset.y > self.sonOldOffset) {//如果当前位移大于缓存位移，说明scrollView向上
        POSTUP;
    }else
    {
        POSTDOWN;
        
    }
    self.sonOldOffset = scrollView.contentOffset.y;//将当前位移变成缓存位移
}

这样基本就完成了.