AppStore這個(gè)軟件是我們蘋果用戶經(jīng)常用到的，我在demo中對(duì)它進(jìn)行了模仿，項(xiàng)目的地址是這里。

本文是想講解一下項(xiàng)目中我覺得不錯(cuò)的效果，主要包括下面三部分：

一.Today中的應(yīng)用卡片，打開和關(guān)閉的效果。

Overview1.gif

二.游戲App的詳情中，上下滑動(dòng)中漸變的導(dǎo)航欄和頂部視圖,橫滑展示的列表

Overview2.gif

三.更新列表中，點(diǎn)擊某一項(xiàng)的更多，cell刷新

Overview3.gif

具體實(shí)現(xiàn)：

一、卡片打開和收起：

• 打開：從Today的列表中點(diǎn)擊某一個(gè)cell，然后present出詳情頁面。

• 關(guān)閉：從詳情頁面點(diǎn)擊關(guān)閉按鈕，或者按住屏幕下滑，關(guān)閉詳情頁面。

整個(gè)動(dòng)畫過程是在TodayViewController到CardDetailViewController中完成的。

這里的打開和關(guān)閉都屬于自定義轉(zhuǎn)場(chǎng)動(dòng)畫，因此首頁的一點(diǎn)是詳情頁面要遵循代理UIViewControllerTransitioningDelegate

picture1.png

這里TodayAnimationTransition是定義轉(zhuǎn)場(chǎng)動(dòng)畫的效果具體是如何實(shí)現(xiàn)的，CardPresentationController是轉(zhuǎn)場(chǎng)發(fā)生時(shí)的背景，也就是在詳情頁面下拉時(shí)，看到的高斯模糊效果。

下面來看看其中的具體是如何present的。這一部分實(shí)現(xiàn)是在TodayAnimationTransition.swift中。

picture2.png

這里分為3個(gè)部分：

• 先通過transitionContext獲得轉(zhuǎn)場(chǎng)動(dòng)畫的中需要的元素

• 設(shè)置動(dòng)畫開始時(shí)，控制器的size,也就是列表中卡片的大小

• 動(dòng)畫結(jié)束時(shí)，控制器的size撐滿屏幕，卡片的size也隨之變大

dismiss的部分原理類似，不過多了一個(gè)下拉關(guān)閉的手勢(shì)。

這個(gè)動(dòng)畫里還包含了很多細(xì)節(jié)，包括：

• 狀態(tài)欄和底部導(dǎo)航欄的隱藏和顯示。

• 按住卡片時(shí)，卡片縮小，松開時(shí)，跳轉(zhuǎn)到詳情頁面

具體細(xì)節(jié)可以到代碼中查看。

二、游戲詳情中的動(dòng)畫

1.上下滑動(dòng)漸變的導(dǎo)航欄和頂部視圖,對(duì)應(yīng)的控制器是DetailViewController。

• 首先自定義navigationBar。對(duì)應(yīng)的類是DetailNavigationView

• 然后基于全屏的滑動(dòng)效果，我們將所有內(nèi)容都放到一個(gè)tableView里。

• 設(shè)置頂部圖片為tableView的tableHeaderView。

• 最后在tableView滑動(dòng)時(shí)，按比例改變navigationBar的透明度，返回按鈕的顏色，以及tableHeaderView的大小。

因?yàn)橥瑫r(shí)涉及到大小，透明度，顏色的變化，這里的運(yùn)算會(huì)稍微復(fù)雜點(diǎn)：

picture4.png

如上，3個(gè)注釋對(duì)應(yīng)著

• 頂部圖片的大小變化

• navigationBar的透明度變化

• 返回按鈕的顏色變化

具體實(shí)現(xiàn)請(qǐng)到代碼中看。

三、更新列表中，點(diǎn)擊更多，cell的刷新。

對(duì)應(yīng)的實(shí)現(xiàn)在UpdateTableViewController和UpdateTableViewCell

這里其實(shí)主要想說的是使用UITableViewCell的自適應(yīng)高度，有些時(shí)候非常管用。

例如在更新列表中，本來每一個(gè)cell的等高的，但點(diǎn)擊更多按鈕后，cell的高度會(huì)變化。使用自適應(yīng)高度后，我們并不關(guān)心實(shí)際每一個(gè)cell的高度，一切都交給系統(tǒng)自己去適配。

這里cell的布局我是用xib實(shí)現(xiàn)的，關(guān)鍵點(diǎn)在于xib由顯示文字的控件和其他控件撐滿，當(dāng)文字越多時(shí)，顯示文字的label越大，系統(tǒng)計(jì)算出cell的高度也會(huì)越大。

picture5.png

如圖，ContentLabel是顯示主要文字的Label,它的上下左右的約束，使得cell高度會(huì)隨它的高度變化而變化。

在UpdateTableViewController中的代碼也非常少，

picture6.png

只需要設(shè)置cell的預(yù)估高度，并將實(shí)際高度設(shè)為自適應(yīng)，最后注冊(cè)這個(gè)cell就行了

其他部分

項(xiàng)目中還包括了我的詳情頁面，搜索頁面等，有興趣的朋友也可以看看。

結(jié)尾：

• 出于想練練英文的目的，項(xiàng)目顯示的內(nèi)容以及代碼中的注釋，都是用的英文。

• 本項(xiàng)目只做了一部分，還有很多內(nèi)容可以繼續(xù)做，有興趣的朋友，也可以提交你們想補(bǔ)充的地方，讓我們一起把這個(gè)項(xiàng)目完善吧。

最后，項(xiàng)目地址是這里,覺得還不錯(cuò)的朋友請(qǐng)點(diǎn)個(gè)Star吧~