實(shí)現(xiàn)結(jié)果
先給大家看下效果圖。
實(shí)現(xiàn)原理
實(shí)現(xiàn)支付寶首頁(yè)刷新滑動(dòng)效果用一個(gè)tableView。用一個(gè)tableView比較簡(jiǎn)單，需要考慮三個(gè)問(wèn)題：
1.下拉滑動(dòng)深灰色view的時(shí)候需要深灰色的view不動(dòng)；
2.刷新的位置在深灰色view下面位置；
3.tableView滾動(dòng)條的位置是在深灰色view下面；
解決這三個(gè)問(wèn)題，問(wèn)題也就迎刃而解了。
下拉深灰色view保持不動(dòng)
這里用了一個(gè)fakeTableHeaderView作為tableView的子view，用一個(gè)透明的view作為tableView的TableHeaderView，當(dāng)tableView下拉的contentOffset.y<0時(shí)，我們改變對(duì)應(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，寫(xiě)了一個(gè)笑臉的layer動(dòng)畫(huà)，有提供一個(gè)參數(shù)ignoredScrollViewContentInsetTop可以直接設(shè)置其刷新的偏移量，所以我們可以設(shè)置這個(gè)參數(shù)，讓刷新的位置在tableHeaderView的下面。
//TableHeaderViewHeight為tableHeaderView高度
self.tableView.mj_header.ignoredScrollViewContentInsetTop = -TableHeaderViewHeight;
tableView滾動(dòng)條的位置是在深灰色view下面
這個(gè)可以用scrollIndicatorInsets來(lái)偽裝 這個(gè)偽造思路來(lái)源于kirito_song?很感謝，一直糾結(jié)于這個(gè)滾動(dòng)條怎么實(shí)現(xiàn)，看到他寫(xiě)的支付寶首頁(yè)效果可以通過(guò)設(shè)置這個(gè)。我們實(shí)現(xiàn)思路一樣，有興趣的同學(xué)可以去看看。
?/* 修改scrollIndicatorInsets。仿造出tableView從下方開(kāi)始的效果 */
? ? _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(TableHeaderViewHeight, 0, 0, 0);
總結(jié)
這種實(shí)現(xiàn)方式相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，也好理解，就是多了一個(gè)透明的TableHeaderView。有試過(guò)直接把fakeTableHeaderView作為tableHeaderView 但是在scrollViewDidScroll方法里面并不能改變坐標(biāo)的y值，如果有其他好的方式歡迎在下方評(píng)論留言。另外有同學(xué)用scrollView里面鑲嵌了一個(gè)tableView的實(shí)現(xiàn)方式，這種要注意cell復(fù)用問(wèn)題。有時(shí)間再想下這種實(shí)現(xiàn)方式。
