公司的app做交互的同學(xué)竟然做了一個(gè)和支付寶首頁類似的頁面渺氧，真是心累旨涝，本著追求技術(shù)的客觀態(tài)度，我便模仿下支付寶做一個(gè)頁面阶女。
個(gè)人博客 :https://www.linit.space
好多人求源碼颊糜，公司的源碼當(dāng)然不會(huì)給啦。但是你們把你們的demo發(fā)我郵箱秃踩，我可以幫忙修改下衬鱼。郵箱 001@linit.space 覺得我修改的辛苦記得給打賞啊T T
一. 支付寶頁面設(shè)計(jì)
zhifubaotujie2.jpeg
zhifubaotujie1.jpeg
==可以在圖中發(fā)現(xiàn)有以下的難點(diǎn)==
- 手勢(shì)需要傳遞，滑動(dòng)上半部分結(jié)果是滑動(dòng)下半部分憔杨。
- UI需要變動(dòng)鸟赫，向上滑動(dòng)的時(shí)候，頂部部分收縮。
==解決思路==
WechatIMG8.jpeg
- 接受手勢(shì)信息由一個(gè)屏幕大小的UIScrollView(A)接受抛蚤。響應(yīng)者為下半部分為一個(gè)UIScrollView（B）台谢。這樣即可實(shí)現(xiàn)點(diǎn)擊屏幕任何位置，滑動(dòng)的部分均為UIScrollView（B）岁经。
- 問題來了朋沮，既然只有下面的UIScrollView移動(dòng)，如何做到上面的也一起動(dòng)呢缀壤。這里用一個(gè)傻一點(diǎn)的辦法樊拓，就是監(jiān)聽下面UIScrollView（B）contentOffset的變化，然后控制上部分內(nèi)容的顯示塘慕。
- 這里有個(gè)坑筋夏，往上移動(dòng)UIScrollView（B）上半部分內(nèi)容逐漸變小，可是UIScrollView（B）的frame不變图呢，也就是說UIScrollView（B）還是在這個(gè)位置条篷，但是看起來明明像是UIScrollView（B）也移動(dòng)上去一樣。于是蛤织，可以將UIScrollView（B）的clipsToBounds設(shè)置為NO赴叹。這樣，超出frame 的部分仍然可以顯示指蚜。
- 現(xiàn)在看起來的效果是滿足了稚瘾，但是大家肯定都會(huì)發(fā)現(xiàn)挪出frame的部分不能響應(yīng)事件啊姚炕！這時(shí)候可以重寫系統(tǒng)自帶的
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event方法來解決這個(gè)問題摊欠。
==關(guān)鍵代碼==
- 解決手勢(shì)傳遞問題
//移除scrollViewA原有手勢(shì)操作
NSMutableArray *list = [NSMutableArray arrayWithArray:scrollViewA.gestureRecognizers];
for (UIGestureRecognizer *gestureRecognizer in list) {
[scrollViewA removeGestureRecognizer:gestureRecognizer];
}
//將scrollViewB的手勢(shì)操作加到scrollViewA中
for (UIGestureRecognizer *gestureRecognizer in scrollViewB.gestureRecognizers) {
[scrollViewA addGestureRecognizer:gestureRecognizer];
}
2.解決頭部view和下面的scrollViewB一起滾動(dòng)的問題，直接使用kvo 監(jiān)聽contentOffset變化就完事柱宦。
3.超出scrollViewB部分可以點(diǎn)擊
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
for (UIView *subview in [self.subviews reverseObjectEnumerator]) {
CGPoint convertedPoint = [subview convertPoint:point fromView:self];
UIView *hitTestView = [subview hitTest:convertedPoint withEvent:event];
if (hitTestView) {
return hitTestView;
}
}
return [super hitTest:point withEvent:event];
}
二. 咱公司的app 掌醫(yī)2.0的 掛號(hào)主頁
演示
2016-09-21 17_42_35.gif
==內(nèi)容更加復(fù)雜 因?yàn)橄虏糠植恢灰粋€(gè) scrollViewB 不過大同小異些椒，關(guān)鍵部分還是以上代碼，代碼就不貼了也不外傳掸刊，同事自行看svn==
