實現(xiàn)結(jié)果
先給大家看下效果圖。
實現(xiàn)原理
實現(xiàn)支付寶首頁刷新滑動效果用一個tableView。用一個tableView比較簡單巧还,需要考慮三個問題:
1.下拉滑動深灰色view的時候需要深灰色的view不動柴灯;
2.刷新的位置在深灰色view下面位置悍汛;
3.tableView滾動條的位置是在深灰色view下面;
解決這三個問題在张,問題也就迎刃而解了用含。
下拉深灰色view保持不動
這里用了一個fakeTableHeaderView作為tableView的子view,用一個透明的view作為tableView的TableHeaderView帮匾,當(dāng)tableView下拉的contentOffset.y<0時啄骇,我們改變對應(yīng)fakeTableHeaderView的y坐標(biāo),使其一直在頂部瘟斜。代碼如下:
- (void)scrollViewDidScroll:(UIScrollView*)scrollView{
? ? CGFloattableViewoffsetY = scrollView.contentOffset.y;
? ? if( tableViewoffsetY <=0){
? ? ? ? self.fakeTableHeaderView.frame = CGRectMake(0, tableViewoffsetY, kScreenWidth, TableHeaderViewHeight);
? ? }
}
刷新的位置在深灰色view下面位置
刷新基于MJRefreash缸夹,寫了一個笑臉的layer動畫痪寻,有提供一個參數(shù)ignoredScrollViewContentInsetTop可以直接設(shè)置其刷新的偏移量,所以我們可以設(shè)置這個參數(shù)虽惭,讓刷新的位置在tableHeaderView的下面橡类。
//TableHeaderViewHeight為tableHeaderView高度
self.tableView.mj_header.ignoredScrollViewContentInsetTop = -TableHeaderViewHeight;
tableView滾動條的位置是在深灰色view下面
這個可以用scrollIndicatorInsets來偽裝 這個偽造思路來源于kirito_song?很感謝,一直糾結(jié)于這個滾動條怎么實現(xiàn)芽唇,看到他寫的支付寶首頁效果可以通過設(shè)置這個顾画。我們實現(xiàn)思路一樣,有興趣的同學(xué)可以去看看披摄。
?/* 修改scrollIndicatorInsets亲雪。仿造出tableView從下方開始的效果 */
? ? _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(TableHeaderViewHeight, 0, 0, 0);
總結(jié)
這種實現(xiàn)方式相對來說比較簡單,也好理解疚膊,就是多了一個透明的TableHeaderView义辕。有試過直接把fakeTableHeaderView作為tableHeaderView 但是在scrollViewDidScroll方法里面并不能改變坐標(biāo)的y值,如果有其他好的方式歡迎在下方評論留言寓盗。另外有同學(xué)用scrollView里面鑲嵌了一個tableView的實現(xiàn)方式灌砖,這種要注意cell復(fù)用問題。有時間再想下這種實現(xiàn)方式傀蚌。