markdown真的是很好用,因?yàn)槭菍?xiě)的第一篇文章,所以著重強(qiáng)調(diào)一下,讓人注重寫(xiě)作而不是注重排版.關(guān)于markdown的入門大家可以看這個(gè)文章-獻(xiàn)給寫(xiě)作者的 Markdown 新手指南
在項(xiàng)目中,分段控制器是個(gè)再常見(jiàn)不過(guò)的控件,但是官方自帶的分段控制器太過(guò)簡(jiǎn)單,已無(wú)法滿足需求.所以自己寫(xiě)了一個(gè)實(shí)時(shí)過(guò)度動(dòng)畫(huà)的分段控制器.
效果如下
2016-11-01 14_13_00.gif
下面說(shuō)實(shí)現(xiàn)的思路
- 實(shí)現(xiàn)segment上面的按鈕
QQ20161101-1@2x.png
簡(jiǎn)單的布局,如果按鈕很多的話,用個(gè)for循環(huán),很基礎(chǔ)的東西.我這里用的是view,用的點(diǎn)擊手勢(shì)做事件處理,用tag區(qū)分.用button也可,因?yàn)檫@里只需要展示沒(méi)有選中時(shí)的狀態(tài).所以用UIView也很簡(jiǎn)單,不需要用button,為什么只有一種未選中的狀態(tài),下面會(huì)說(shuō)到.
- 創(chuàng)建與上面按鈕相關(guān)聯(lián)的scrollView,就是下面的頁(yè)面.
Paste_Image.png
創(chuàng)建用來(lái)顯示各個(gè)頁(yè)面的scrollView,看需求,大多數(shù)直接用屏幕寬度xsegment的按鈕數(shù),計(jì)算總體的頁(yè)面的frame;
//大scrollView,用來(lái)展示各個(gè)controller的view
self.mainScrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, self.baseView.height, self.width, self.height-self.baseView.bottom)];
self.mainScrollView.delegate=self;
//整頁(yè)滾動(dòng)以及禁止反彈
self.mainScrollView.pagingEnabled=YES;
self.mainScrollView.bounces=NO;
[self addSubview:self.mainScrollView];
//設(shè)置contentsize大小
self.mainScrollView.contentSize=CGSizeMake(conArray.count*self.width, self.height-self.backview.bottom-7);
//controllerArray是傳過(guò)來(lái)controller數(shù)組,將每個(gè)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];
}
-
重點(diǎn)就是這個(gè)過(guò)度效果,我會(huì)主要說(shuō)明這個(gè)
上面創(chuàng)建分段控制器button的時(shí)候說(shuō)過(guò)只需要?jiǎng)?chuàng)建未選中時(shí)候的狀態(tài),現(xiàn)在要?jiǎng)?chuàng)建一個(gè)用來(lái)展示選中狀態(tài)的scrollView,為了方便我叫他遮罩視圖.
遮罩的frame就是一個(gè)按鈕的大小,contentsize是整個(gè)上面按鈕欄的大小.
將這個(gè)遮罩完全覆蓋第一個(gè)按鈕的位置.就形成了選中狀態(tài).
遮罩的frame.png
遮罩的contentsize
一句話說(shuō)明,在手指滑動(dòng)下面大的scrollView的同時(shí),讓遮罩視圖的frame與contentOffSet跟著下面的視圖同時(shí)更改
然后將遮罩的contentView設(shè)置成跟后面未選中狀態(tài)一樣的布局.將顏色字體更改成選中的狀態(tài).設(shè)置scrollView的代理,在滑動(dòng)頁(yè)面,更改遮罩的位置frame,并且同時(shí)更改遮罩的contentOffset,這里要加上uiview animation的動(dòng)畫(huà),這樣就實(shí)現(xiàn)了想要的效果.下面代碼并不是全部代碼,只是這一部分的代碼
//在左右滑動(dòng)頁(yè)面的時(shí)候,同時(shí)滑動(dòng)遮罩scrollView,并且設(shè)置contentoffset;一系列計(jì)算…俗稱好屌算啊握草
-(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)];
}
}
- 點(diǎn)擊事件的處理也這里就不細(xì)說(shuō)了,還有個(gè)重點(diǎn)上滑隱藏segment,下滑顯示
-(void)slideUpOrDown:(UIScrollView*)scrollView
{
if (scrollView.contentOffset.y > self.sonOldOffset) {//如果當(dāng)前位移大于緩存位移窗怒，說(shuō)明scrollView向上
POSTUP;
}else
{
POSTDOWN;
}
self.sonOldOffset = scrollView.contentOffset.y;//將當(dāng)前位移變成緩存位移
}
這樣基本就完成了.
