效果圖不是很明顯,有興趣的同學(xué)可以自行到UC首頁查看scrollView的效果,實(shí)際效果未必是我這樣實(shí)現(xiàn)的~先說明一下UC的效果和一般的有何不同.一般的效果是當(dāng)向左滑或者向右滑的時(shí)候,下一個(gè)視圖會(huì)顯示最開始的畫面或者最后的后面,UC的效果是從中間開始.
一般的pageScrollView的層級(jí)是一個(gè)接著一個(gè),屬于平行關(guān)系.UC首頁的層級(jí)稍顯不同,第二個(gè)視圖X坐標(biāo)開始比普通的要小半個(gè)屏幕.所以當(dāng)最初開始向左滑的時(shí)候,第二個(gè)視圖顯示的是剛好一半的界面.可能很多人一開始都覺得只有改變當(dāng)前視圖的X位置就可以了,這里值得注意的是,偏移量達(dá)到一個(gè)屏幕的寬度才變換一整個(gè)界面,如果只改變當(dāng)前視圖的X位置和偏移量相同的話,會(huì)導(dǎo)致只需要滑動(dòng)半個(gè)屏幕的寬度的時(shí)候,下一個(gè)視圖就已經(jīng)換完整個(gè)視圖了.
這個(gè)是一般情況下scrollView的層級(jí)關(guān)系,和偏移量達(dá)到一個(gè)屏幕寬度時(shí)候的層級(jí)關(guān)系,綠色代表scrollView,藍(lán)色,橙色和紅色代表三個(gè)視圖,灰色代表的window.
要解決滑動(dòng)一個(gè)屏幕的寬度,視圖才偏移半個(gè)屏幕,所以X的改變量是偏移量的1/2,同時(shí)也要改變下一個(gè)視圖的X的值.假設(shè)scrollView向左滑動(dòng),那么當(dāng)前視圖的X就應(yīng)該加偏移量的1/2,同時(shí)下一個(gè)視圖的X就應(yīng)該減偏移量的1/2.
最重要的一步解決了,下面的問題也就迎刃而解了,當(dāng)滑動(dòng)的時(shí)候,到底哪個(gè)視圖的層級(jí)在上面呢,如果當(dāng)前視圖層級(jí)一直在上面,那怎么讓下一個(gè)視圖的層級(jí)慢慢顯現(xiàn)出來呢,我是把當(dāng)前視圖的layer的width慢慢變小,同時(shí)把多出來給裁剪掉,相當(dāng)于達(dá)到一個(gè)遮罩的效果,為什么是選擇layer和不是直接把視圖frame的width變小呢.因?yàn)橹苯影岩晥D的frame變小,會(huì)導(dǎo)致自動(dòng)布局的視圖也跟著改變,所以選擇的是layer層.
CGFloat offsetX = scrollView.contentOffset.x;
NSInteger curretnPage = offsetX/WIDTH;
UIView *currentView = self.controllers[curretnPage].view;
currentView.layer.masksToBounds = YES;
currentView.layer.frame = CGRectMake(curretnPage *WIDTH/2 + offsetX/2, 0, WIDTH - (offsetX - curretnPage*WIDTH)/2, HEIGHT);
[currentView layoutSubviews];
if (curretnPage < self.controllers.count - 1 ) {
UIView *nextView = self.controllers[curretnPage + 1].view;
nextView.layer.masksToBounds = YES;
nextView.layer.frame = CGRectMake((curretnPage +1) * WIDTH/2 +offsetX/2, 0, WIDTH, HEIGHT);
[nextView layoutSubviews];
}
主要代碼就這些,當(dāng)然,還有其他的小坑,有興趣的可以嘗試一下~
