起始
做開發(fā)也有一段時間了,經(jīng)歷了第一次完成項目的激動弟灼,也經(jīng)歷了天天調(diào)用系統(tǒng)的API的枯燥邑飒,于是就有了探索底層實現(xiàn)的想法喊暖。
關(guān)于scrollView的思考
在iOS開發(fā)中我們會大量用到scrollView這個控件辜王,我們使用的tableView/collectionview/textView都繼承自它劈狐。scrollView的頻繁使用讓我對它的底層實現(xiàn)產(chǎn)生了興趣,它到底是如何工作的誓禁?如何實現(xiàn)一個scrollView懈息?讀完本篇博客,相信你一定也可以自己實現(xiàn)一個簡易的scrollView摹恰。
我們首先來思考以下幾個問題:
scrollView繼承自誰辫继,它如何檢測到手指滑動?
scrollView如何實現(xiàn)滾動俗慈?
scrollView里的各種屬性是如何實現(xiàn)的姑宽?如contentSize/contentOffSet......
通過一步步解決上邊的問題,我們就能實現(xiàn)一個自己的scrollView闺阱。
一步一步實現(xiàn)scrollView
1.毫無疑問我們都知道scrollView繼承自UIView炮车,檢測手指滑動應(yīng)該是在view上放置了一個手勢識別,實現(xiàn)代碼如下:
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] init];
[panGesture addTarget:self action:@selector(panGestureAction:)];
[self addGestureRecognizer:panGesture];
}
return self;
}
2.要搞清楚第二個問題酣溃,首先我們必須理解frame和bounds的概念瘦穆。
提到它們,大家都知道frame是相對于父視圖坐標系來說自己的位置和尺寸赊豌,bounds相對于自身坐標系來說的位置和尺寸扛或,并且origin一般為(0,0)碘饼。但是bounds的origin有什么用處熙兔?改變它會出現(xiàn)什么效果呢?
當我們嘗試改變bounds的origin時艾恼,我們就會發(fā)現(xiàn)視圖本身沒有發(fā)生變化住涉,但是它的子視圖的位置卻發(fā)生了變化,why钠绍?舆声??其實當我們改變bounds的origin的時候柳爽,視圖本身位置沒有變化媳握,但是由于origin的值是基于自身的坐標系,所以自身坐標系的位置被我們改變了泻拦。而子視圖的frame正是基于父視圖的坐標系毙芜,當我們更改父視圖bounds中origin的時候子視圖的位置就發(fā)生了變化,這就是實現(xiàn)scrollView的關(guān)鍵點U铡R钢唷晦雨!
是不是很好理解?
基于這點我們很容易實現(xiàn)一個簡單的最初級版本的scrollView隘冲,代碼如下:
- (void)panGestureAction:(UIPanGestureRecognizer *)pan {
// 記錄每次滑動開始時的初始位置
if (pan.state == UIGestureRecognizerStateBegan) {
self.startLocation = self.bounds.origin;
NSLog(@"%@", NSStringFromCGPoint(self.startLocation));
}
// 相對于初始觸摸點的偏移量
if (pan.state == UIGestureRecognizerStateChanged) {
CGPoint point = [pan translationInView:self];
NSLog(@"%@", NSStringFromCGPoint(point));
CGFloat newOriginalX = self.startLocation.x - point.x;
CGFloat newOriginalY = self.startLocation.y - point.y;
CGRect bounds = self.bounds;
bounds.origin = CGPointMake(newOriginalX, newOriginalY);
self.bounds = bounds;
}
}
3.理解了上邊內(nèi)容的關(guān)鍵點闹瞧,下邊我們將對我們實現(xiàn)的scrollView做一個簡單的優(yōu)化。
通過contentSize限制scrollView的內(nèi)部空間展辞,實現(xiàn)代碼如下
if (newOriginalX < 0) {
newOriginalX = 0;
} else {
CGFloat maxMoveWidth = self.contentSize.width - self.bounds.size.width;
if (newOriginalX > maxMoveWidth) {
newOriginalX = maxMoveWidth;
}
}
if (newOriginalY < 0) {
newOriginalY = 0;
} else {
CGFloat maxMoveHeight = self.contentSize.height - self.bounds.size.height;
if (newOriginalY > maxMoveHeight) {
newOriginalY = maxMoveHeight;
}
}
通過contentOffset設(shè)置scrollView的初始偏移量奥邮,相信大家已經(jīng)懂了如何設(shè)置偏移量了吧?沒錯我們只需設(shè)置view自身bounds的origin是實現(xiàn)代碼如下:
- (void)setContentOffset:(CGPoint)contentOffset {
_contentOffset = contentOffset;
CGRect newBounds = self.bounds;
newBounds.origin = contentOffset;
self.bounds = newBounds;
}
防止scrollView的子視圖超出scrollView
self.layer.masksToBounds = YES;
總結(jié)
UIScrollView還有很多其它強大的功能罗珍,以上我們只是完成了一個特別簡單的scrollView洽腺,以后如果有時間我會對它進行完善。當然如果你有興趣覆旱,你完全可以對它進行擴展,下載地址放在這里蘸朋。同時我也會繼續(xù)研究UIKit中其它控件的底層實現(xiàn),歡迎您的持續(xù)關(guān)注扣唱!