UIPageViewController使用 分享筆記

前言

由于公司要開發(fā)一款小說類閱讀APP肆捕,其中體驗上非常重要的一點便是翻頁效果。為了實現翻頁效果舵变,我查詢了很多資料后選擇使用了UIPageViewController芳杏。原因很簡單,使用方便抡柿,功能強大舔琅,開發(fā)速度快。首先洲劣,我們先看看翻頁效果圖:

翻頁效果展示圖

結構

在使用UIPageViewController前备蚓,我們應該先搞清楚它的層次結構。(這里是我在使用過程中的理解囱稽,如有不對郊尝,歡迎指出)。


pageviewcontroller層次展示圖

UIPageViewController作為子控制器加載在viewController上粗悯。作為文本控制器的容器虚循,且提供翻頁的動畫效果。

創(chuàng)建一個TextViewController样傍,用來顯示文本,裝入pageViewController中铺遂。

所以衫哥,pageViewController只是提供一個翻頁特效的容器,真正顯示在界面上的是里面的TextViewController襟锐。到這里是我對pageViewController有一個初步的理解撤逢。

使用

1.初始化

- (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary*)options

UIPageViewController 為我們提供了2種翻頁樣式,一種是擬真一種是滾動粮坞。只需要使用系統(tǒng)的構造方法返回一個UIPageViewController的對象蚊荣。并且設置它的代理和數據源并把它加入到控制器中就可以了

pageViewController.delegate = self;

pageViewController.dataSource = self;

[self addChildViewController:pageViewController];

[self.view addSubview:pageViewController.view];

通過提供的set方法將textController裝入pageViewController中,這個set方法提供了一種樣式莫杈,決定翻頁是縱向還是橫向互例。

typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationDirection) {

UIPageViewControllerNavigationDirectionForward,//橫向,像書一樣

UIPageViewControllerNavigationDirectionReverse//縱向筝闹,像日歷一樣
};
BookTextController *readerController = [BookTextController new];//展示文本的控制器
    [_pageViewController setViewControllers:@[ readerController ]
                                  direction:UIPageViewControllerNavigationDirectionForward
                                   animated:NO
                                 completion:nil];

2.delegate和dataSource

//向前翻頁
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController;

//向后翻頁
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController;

從聲明中我們不難發(fā)現返回的是一個UIViewController對象媳叨,這個對象將重新裝入pageViewController中腥光,從而顯示在界面上。其中參數中的viewController為當前顯示的控制器(這個參數在使用doubleSided屬性時非常重要糊秆,后面會講到)武福。知道這2個方法的作用后,pageViewController使用起來就非常簡單了痘番。

并且這個方法執(zhí)行以后捉片,之前pageViewController里的控制器將被釋放,所以pageViewController.viewControllers同樣只裝了1個viewController汞舱。

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
       viewControllerAfterViewController:(UIViewController *)viewController {
    //返回即將顯示的控制器
    BookTextController *vc = [BookTextController new];
    return vc;
}

還有一個非常有用的代理界睁,它在動畫執(zhí)行完畢后被調用,在controller切換完成后兵拢,我們可以在這個代理中進行一些后續(xù)操作翻斟。例如用UIPageViewController實現輪播分頁等功能。

- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray*)previousViewControllers transitionCompleted:(BOOL)completed;

到這里pageViewController的基本使用已經差不多了说铃。通過合理的設置访惜,我們很容易就可以實現一個翻頁效果。但是在開發(fā)閱讀軟件中我還遇到一個非常嚴重的體驗問題腻扇。在翻頁的時候债热,書頁背面的顏色默認為白色。在黑夜模式中非常“辣眼睛”幼苛!

黑夜模式書頁背面為白色 ![Uploading 1F5EC677-326D-4BAF-96D6-5A885FA07C9F_639563.png . . .]

窒篱。

3.解決翻頁模式書頁背面“辣眼睛”->doubleSided

顧名思義,doubleSided這個屬性開啟后舶沿,書頁的正反兩面都將顯示文本墙杯。

開啟這個屬性后,dataSource中的那兩個方法會執(zhí)行2次括荡。

- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController;
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController;

第一次執(zhí)行viewController和之前一樣是正在翻動的書頁的正面高镐,第二次執(zhí)行時viewController則是第一次return出去的ViewController,即翻動書頁的背面畸冲。這樣就會導致一個非常嚴重的問題嫉髓,書頁正面頁碼不連續(xù)!“消失”的那一頁顯示在了上一頁背面

1F5EC677-326D-4BAF-96D6-5A885FA07C9F.png

9B291FCF-5570-45F3-87DA-940FD207352F.png

那么邑闲,如何來優(yōu)化這個問題呢算行?方法非常簡單,我們再創(chuàng)建一個BackViewController(這里參考了github上一個demo:
https://github.com/mattabras/DoubleSidedPageViewController
BackViewController源碼可以直接去上面下載苫耸。)

BackViewController上只有一個大小為屏幕大小的UIImageView,在第一次進入時州邢,將參數viewController的view作為圖片設置到BackViewController的UIImageView里。返回給pageViewController鲸阔。第二次才返回要顯示的viewController偷霉。

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
      viewControllerBeforeViewController:(UIViewController *)viewController {
    /**
     *  backviewcontroller->截屏當前控制器view迄委,顯示在當前頁背面
     */
    if([viewController isKindOfClass:[BookTextController class]]) {
        self.currentViewController = viewController;
        
        LZBackViewController *backViewController = [LZBackViewController new];
        [backViewController updateWithViewController:viewController];
        return backViewController;
    }
    /**
     *  重新加載新的一章或一頁到lzbooktextcontroller上 并返回給pageviewcontroller
     */    
    LZBackViewController *showVc =  (LZBackViewController *)self.currentViewController;
    return showVc;
}

到這里我們解決了黑夜模式書頁背面辣眼睛的體驗問題了。

小結

使用UIPageViewController主要就是理解其層次結構和代理方法調用時機类少。作為容器加載各式各樣的顯示控制器叙身。在此特別感謝一起開發(fā)閱讀APP的戰(zhàn)友小明同學 @GeekDmm 提供的豐富資料。
希望這篇文章可以幫到你硫狞。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末信轿,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子残吩,更是在濱河造成了極大的恐慌财忽,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泣侮,死亡現場離奇詭異即彪,居然都是意外死亡,警方通過查閱死者的電腦和手機活尊,發(fā)現死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門隶校,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蛹锰,你說我怎么就攤上這事深胳。” “怎么了铜犬?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵舞终,是天一觀的道長。 經常有香客問我癣猾,道長敛劝,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任煎谍,我火速辦了婚禮攘蔽,結果婚禮上,老公的妹妹穿的比我還像新娘呐粘。我一直安慰自己,他們只是感情好转捕,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布作岖。 她就那樣靜靜地躺著,像睡著了一般五芝。 火紅的嫁衣襯著肌膚如雪痘儡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天枢步,我揣著相機與錄音沉删,去河邊找鬼渐尿。 笑死,一個胖子當著我的面吹牛矾瑰,可吹牛的內容都是我干的砖茸。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼殴穴,長吁一口氣:“原來是場噩夢啊……” “哼凉夯!你這毒婦竟也來了?” 一聲冷哼從身側響起采幌,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤劲够,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后休傍,有當地人在樹林里發(fā)現了一具尸體征绎,經...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年磨取,在試婚紗的時候發(fā)現自己被綠了人柿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡寝衫,死狀恐怖顷扩,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情慰毅,我是刑警寧澤隘截,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站汹胃,受9級特大地震影響婶芭,放射性物質發(fā)生泄漏。R本人自食惡果不足惜着饥,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一犀农、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宰掉,春花似錦呵哨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至挪拟,卻和暖如春挨务,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工谎柄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留丁侄,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓朝巫,卻偏偏與公主長得像鸿摇,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子捍歪,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內容