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;//将当前位移变成缓存位移
}
这样基本就完成了.
