微博個(gè)人主頁(yè)下拉時(shí)圖片產(chǎn)生放大/位移效果
文章同步在個(gè)人主頁(yè)~
一直以來(lái)都發(fā)現(xiàn)很多App的信息展示頁(yè)中,上部分是圖片的話,都會(huì)帶有這樣的一個(gè)效果:
新浪微博個(gè)人頁(yè)gif
所以自己也寫(xiě)了個(gè)Demo,分別用手寫(xiě)代碼和xib兩種方式實(shí)現(xiàn)了這個(gè)效果,供大家參考,寫(xiě)的不好的地方還望大家指正.
關(guān)于這個(gè)效果,其實(shí)只要了解了原理,實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單:
1.上部分的圖片,在下拉的時(shí)候沒(méi)有跟隨TableView一起往下走,所以這個(gè)頭部不是TableView.tableHeaderView,而是TableView的contentInset.top=X,即內(nèi)容往下偏移了頭部視圖的高度;
2.這個(gè)HeaderView視圖要添加到tableView上,并且放在下面[tableView insertSubview:headerView atIndex:0];
3.headerView中ImageView的contentMode要設(shè)置成UIViewContentModeScaleAspectFill,這樣在下拉上啦的時(shí)候,只要?jiǎng)討B(tài)改變?nèi)萜鞯膶捀?那里面的視圖就會(huì)隨之產(chǎn)生形變;
知道了原理,實(shí)現(xiàn)起來(lái)就比較方便了,新浪微博這個(gè)我使用的xib實(shí)現(xiàn)的,建議這樣比較簡(jiǎn)單;
