AppStore這個(gè)軟件是我們蘋果用戶經(jīng)常用到的康二,我在demo中對(duì)它進(jìn)行了模仿楣导,項(xiàng)目的地址是這里蝌衔。
本文是想講解一下項(xiàng)目中我覺(jué)得不錯(cuò)的效果闰歪,主要包括下面三部分:
一.Today中的應(yīng)用卡片嚎研,打開(kāi)和關(guān)閉的效果。
二.游戲App的詳情中库倘,上下滑動(dòng)中漸變的導(dǎo)航欄和頂部視圖,橫滑展示的列表
三.更新列表中临扮,點(diǎn)擊某一項(xiàng)的更多论矾,cell刷新
具體實(shí)現(xiàn):
一、卡片打開(kāi)和收起:
打開(kāi):從Today的列表中點(diǎn)擊某一個(gè)cell杆勇,然后present出詳情頁(yè)面贪壳。
關(guān)閉:從詳情頁(yè)面點(diǎn)擊關(guān)閉按鈕,或者按住屏幕下滑蚜退,關(guān)閉詳情頁(yè)面闰靴。
整個(gè)動(dòng)畫過(guò)程是在TodayViewController到CardDetailViewController中完成的。
這里的打開(kāi)和關(guān)閉都屬于自定義轉(zhuǎn)場(chǎng)動(dòng)畫钻注,因此首頁(yè)的一點(diǎn)是詳情頁(yè)面要遵循代理UIViewControllerTransitioningDelegate
這里TodayAnimationTransition
是定義轉(zhuǎn)場(chǎng)動(dòng)畫的效果具體是如何實(shí)現(xiàn)的传黄,CardPresentationController
是轉(zhuǎn)場(chǎng)發(fā)生時(shí)的背景,也就是在詳情頁(yè)面下拉時(shí)队寇,看到的高斯模糊效果膘掰。
下面來(lái)看看其中的具體是如何present的。這一部分實(shí)現(xiàn)是在TodayAnimationTransition.swift
中佳遣。
這里分為3個(gè)部分:
先通過(guò)
transitionContext
獲得轉(zhuǎn)場(chǎng)動(dòng)畫的中需要的元素設(shè)置動(dòng)畫開(kāi)始時(shí)识埋,控制器的size,也就是列表中卡片的大小
動(dòng)畫結(jié)束時(shí),控制器的size撐滿屏幕零渐,卡片的size也隨之變大
dismiss的部分原理類似窒舟,不過(guò)多了一個(gè)下拉關(guān)閉的手勢(shì)。
這個(gè)動(dòng)畫里還包含了很多細(xì)節(jié)诵盼,包括:
狀態(tài)欄和底部導(dǎo)航欄的隱藏和顯示惠豺。
按住卡片時(shí),卡片縮小风宁,松開(kāi)時(shí)洁墙,跳轉(zhuǎn)到詳情頁(yè)面
具體細(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):
如上柠贤,3個(gè)注釋對(duì)應(yīng)著
頂部圖片的大小變化
navigationBar的透明度變化
返回按鈕的顏色變化
具體實(shí)現(xiàn)請(qǐng)到代碼中看香浩。
三、更新列表中臼勉,點(diǎn)擊更多邻吭,cell的刷新。
對(duì)應(yīng)的實(shí)現(xiàn)在UpdateTableViewController和UpdateTableViewCell
這里其實(shí)主要想說(shuō)的是使用UITableViewCell的自適應(yīng)高度宴霸,有些時(shí)候非常管用囱晴。
例如在更新列表中,本來(lái)每一個(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ì)越大淫痰。
如圖,ContentLabel是顯示主要文字的Label,它的上下左右的約束整份,使得cell高度會(huì)隨它的高度變化而變化待错。
在UpdateTableViewController中的代碼也非常少,
只需要設(shè)置cell的預(yù)估高度烈评,并將實(shí)際高度設(shè)為自適應(yīng)火俄,最后注冊(cè)這個(gè)cell就行了
其他部分
項(xiàng)目中還包括了我的詳情頁(yè)面,搜索頁(yè)面等础倍,有興趣的朋友也可以看看烛占。
結(jié)尾:
-
出于想練練英文的目的,項(xiàng)目顯示的內(nèi)容以及代碼中的注釋沟启,都是用的英文。
-
本項(xiàng)目只做了一部分犹菇,還有很多內(nèi)容可以繼續(xù)做德迹,有興趣的朋友,也可以提交你們想補(bǔ)充的地方揭芍,讓我們一起把這個(gè)項(xiàng)目完善吧胳搞。