UIScrollView實現(xiàn)原理

在iOS開發(fā)中我們會大量用到UIScrollView這個控件篓吁,我們使用的UITableView/UICollectionView/UITextView都繼承自它。UIScrollView的頻繁使用讓我對它的底層實現(xiàn)產(chǎn)生了興趣氓癌,它到底是如何工作的坠狡?如何實現(xiàn)一個UIScrollView泵三?讀完本篇文章,相信你一定也可以自己實現(xiàn)一個簡易的UIScrollView伴网。源代碼

1.frame與bounds

這部分請參考我之前的文章——iOS frame與bounds的區(qū)別詳解

2.UIScrollView實現(xiàn)

UIScrollView其實就是bounds.origin != (0,0)的特殊情況蓬推。而ContentOffset、ContentSize和ContentInset作為UIScrollView三個基本的屬性是偷,其實都是跟origin相關(guān)拳氢,下面詳細(xì)討論。

2.1 ContentOffset

ContentOffset是UIScrollView當(dāng)前顯示區(qū)域頂點相對于frame頂點的偏移量蛋铆,比如你把視圖上拉了100個點馋评,也就是y偏移了100,ContentOffset就是(0,100)刺啦。

前文可以得知留特,當(dāng)修改SuperView.bounds.origin時,會變相的修改SubView的實際坐標(biāo),從而影響SubView在SuperView中的位置蜕青。如果我們修改SuperView.bounds.origin從(0,0)變?yōu)?0,100)苟蹈,SubViews的frame并不會產(chǎn)生變化,產(chǎn)生變化的實際是SubViews的真實坐標(biāo)點右核。SubViews的真實坐標(biāo)點會減小100點慧脱,也就是上移100點,而對應(yīng)到SubView在視圖的效果就是上移了100個點贺喝,也就是ContentOffset為(0,100)菱鸥。所以如下:

ContentOffset = bounds.origin;
復(fù)制代碼

這樣,理解了ContentOffset之后我們就可以實現(xiàn)一個簡單的UIScrollView躏鱼,代碼如下:

- (void)addGestureAndViews {
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePanGesture:)];
    [self.view addGestureRecognizer:pan];

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 20, 100, 100)];
    [view1 setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:view1];

    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH - 100, SCREEN_HEIGHT - 100, 100, 100)];
    [view2 setBackgroundColor:[UIColor brownColor]];
    [self.view addSubview:view2];
}

- (void)handlePanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {

    //ContentOffset
    CGPoint touchPoint = [panGestureRecognizer translationInView:self.view];//獲取手勢位置
    CGFloat newOriginY = self.view.bounds.origin.y - touchPoint.y;//根據(jù)手勢位置計算新的origin值
    CGFloat newOriginX = self.view.bounds.origin.x - touchPoint.x;
    CGRect viewBounds = self.view.bounds;
    viewBounds.origin.y = newOriginY;//賦值
    viewBounds.origin.x = newOriginX;
    self.view.bounds = viewBounds;
    [panGestureRecognizer setTranslation:CGPointZero inView:self.view];

}
復(fù)制代碼
自定義簡單UIScrollView

每當(dāng)我們拖動SuperView的時候:

  • SuperView.bounds.origin會根據(jù)我們拖動的坐標(biāo)氮采,生成新的origin。
  • SuperView發(fā)現(xiàn)自己bounds被修改染苛,會調(diào)用layoutSubviews方法鹊漠,此方法會使Subviews根據(jù)SuperView.bounds.origin和自身的Frame.origin重新計算出自身的實際坐標(biāo)。
  • 重新計算位置的SubViews顯示在SuperView中茶行。

其實躯概,從上面可以看出來,當(dāng)我們拖動的時候畔师,動的并不是ScrollView楞陷,而是SubViews。

2.2 ContentSize

ContentSize其實就是UIScrollView可以滾動的區(qū)域茉唉,比如frame = (0,0,320,480) ,contentSize = (320,960)结执,代表你的scrollview可以上下滾動度陆,滾動區(qū)域為frame大小的兩倍。這個東西其實是抽象的献幔。抽象的目的是為了讓大家更好地運(yùn)用UIScrollView懂傀,而不用去理解其背后的實現(xiàn)原理(其實就是修改bounds.origin這一點而已)。

看上面的運(yùn)行圖蜡感,小伙伴們會發(fā)現(xiàn)蹬蚁,拖動起來無邊無界啊,于是ContentSize橫空出世郑兴,其本質(zhì)就是對bounds.origin的變化約束一個范圍犀斋,使其在規(guī)定的范圍內(nèi)拖動。

我們修改代碼如下:

- (void)handlePanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {

    //ContentSize
    CGPoint touchPoint = [panGestureRecognizer translationInView:self.view];
    CGFloat newOriginY = self.view.bounds.origin.y - touchPoint.y;
    CGFloat newOriginX = self.view.bounds.origin.x - touchPoint.x;

    CGFloat minOriginY = 0.0;
    CGFloat minOriginX = 0.0;
    CGFloat maxOriginY = 20.0;
    CGFloat maxOriginX = 20.0;

    CGRect viewBounds = self.view.bounds;
    viewBounds.origin.y = fmax(minOriginY, fmin(newOriginY, maxOriginY));//比最大值小的同時比最小值大:min<=newOriginY<=maxOriginY
    viewBounds.origin.x = fmax(minOriginX, fmin(newOriginX, maxOriginX));
    self.view.bounds = viewBounds;
    [panGestureRecognizer setTranslation:CGPointZero inView:self.view];

}
復(fù)制代碼
設(shè)置origin范圍之后

這樣情连,只要修改minOriginY叽粹、minOriginX、maxOriginY、maxOriginX四個值就能確定UIScrollView的滾動范圍虫几,由此锤灿,ContentSize也能推到得出,如下:

ContentSize.height = view.bounds.size.height + maxOriginY辆脸;
ContentSize.width = view.bounds.size.width + maxOriginX但校;
復(fù)制代碼

2.3 ContentInset

ContentInset是UIScrollView的contentView的頂點相對于UIScrollView的位置,例如你的ContentInset = (0,100)啡氢,那么你的contentView就是從UIScrollView的(0,100)開始顯示状囱。

這個屬性能夠在UIScrollView的4周增加額外的滾動區(qū)域,以此可以實現(xiàn)下拉刷新空执,鍵盤彈出的同時抬高View等等浪箭。

修改代碼如下:

- (void)handlePanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {

    //ContentInset
    CGPoint touchPoint = [panGestureRecognizer translationInView:self.view];//獲取手勢位置
    CGFloat newOriginY = self.view.bounds.origin.y - touchPoint.y;//根據(jù)手勢位置計算新的origin值
    CGFloat newOriginX = self.view.bounds.origin.x - touchPoint.x;

    CGFloat min = 0.0;
    CGFloat maxOriginY = 600.0;
    CGFloat maxOriginX = 0;

    if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
            min = 0.0;
            maxOriginY = 600.0;
    } else {
            min = -50.0;
            maxOriginY = 650.0;
    }

    CGRect viewBounds = self.view.bounds;
    viewBounds.origin.y = fmax(min, fmin(newOriginY, maxOriginY));//比最大值小的同時比最小值大:min<=newOriginY<=maxOriginY
    viewBounds.origin.x = fmax(0, fmin(newOriginX, maxOriginX));
    self.view.bounds = viewBounds;
    [panGestureRecognizer setTranslation:CGPointZero inView:self.view];

}
復(fù)制代碼
設(shè)置Inset之后

所以,ContentInset其實只是在不同狀態(tài)下修改了maxOriginY辨绊、maxOriginX等等的值奶栖,從而實現(xiàn)了在不改變ContentSize的情況下使?jié)L動區(qū)域得到了擴(kuò)展。

3.總結(jié)

回顧一下门坷,其實ContentOffset宣鄙、ContentSize、ContentInset還是Bounces效果本質(zhì)都是在跟origin玩耍:Offset直接是origin的別稱默蚌,而Size冻晤、Inset都是修改了origin的改變范圍。但是各個屬性又有自己專有的作用绸吸,Size可以確定滾動的范圍鼻弧,而Inset可以在不修改原有滾動范圍的同時,擴(kuò)大總體滾動范圍锦茁。實現(xiàn)了這三個屬性攘轩,也就能實現(xiàn)最基本的UIScrollView。

4.參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末码俩,一起剝皮案震驚了整個濱河市度帮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌稿存,老刑警劉巖笨篷,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異瓣履,居然都是意外死亡率翅,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門拂苹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來安聘,“玉大人痰洒,你說我怎么就攤上這事≡【拢” “怎么了丘喻?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長念颈。 經(jīng)常有香客問我泉粉,道長,這世上最難降的妖魔是什么榴芳? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任嗡靡,我火速辦了婚禮,結(jié)果婚禮上窟感,老公的妹妹穿的比我還像新娘讨彼。我一直安慰自己,他們只是感情好柿祈,可當(dāng)我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布哈误。 她就那樣靜靜地躺著,像睡著了一般躏嚎。 火紅的嫁衣襯著肌膚如雪蜜自。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天卢佣,我揣著相機(jī)與錄音重荠,去河邊找鬼。 笑死虚茶,一個胖子當(dāng)著我的面吹牛戈鲁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嘹叫,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼荞彼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了待笑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤抓谴,失蹤者是張志新(化名)和其女友劉穎暮蹂,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體癌压,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡仰泻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了滩届。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片集侯。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出棠枉,到底是詐尸還是另有隱情浓体,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布辈讶,位于F島的核電站命浴,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏贱除。R本人自食惡果不足惜生闲,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望月幌。 院中可真熱鬧碍讯,春花似錦、人聲如沸扯躺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缅帘。三九已至轴术,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間钦无,已是汗流浹背逗栽。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留失暂,地道東北人彼宠。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像弟塞,于是被迫代替她去往敵國和親凭峡。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容