微博個人主頁下拉時圖片產生放大/位移效果

微博個人主頁下拉時圖片產生放大/位移效果

文章同步在個人主頁~
一直以來都發現很多App的信息展示頁中,上部分是圖片的話,都會帶有這樣的一個效果:

新浪微博個人頁gif

所以自己也寫了個Demo,分別用手寫代碼和xib兩種方式實現了這個效果,供大家參考,寫的不好的地方還望大家指正.
關于這個效果,其實只要了解了原理,實現起來非常簡單:
1.上部分的圖片,在下拉的時候沒有跟隨TableView一起往下走,所以這個頭部不是TableView.tableHeaderView,而是TableView的contentInset.top=X,即內容往下偏移了頭部視圖的高度;
2.這個HeaderView視圖要添加到tableView上,并且放在下面[tableView insertSubview:headerView atIndex:0];
3.headerView中ImageView的contentMode要設置成UIViewContentModeScaleAspectFill,這樣在下拉上啦的時候,只要動態改變容器的寬高,那里面的視圖就會隨之產生形變;

知道了原理,實現起來就比較方便了,新浪微博這個我使用的xib實現的,建議這樣比較簡單;

代碼在這里:TableViewHeaderImageEffect

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容