iOS回顧筆記(04) -- UIScrollView的基本使用詳解

前言

本文主要講述了 UIScrollView 的一些常用的屬性和方法宏娄、引申了delegate的思想和UIScrollView的縮放逮壁。這篇文章著重介紹UIScrollView的基本知識窥淆,關(guān)于UIScrollView的實例使用我會在下一篇iOS回顧筆記(05)中著重講解忧饭。

UIScrollView

  • UIScrollView :顧名思義就是 可以滾動的 UIView。
  • 由于手機(jī)的屏幕比較小蜒秤,所以直接可以展示在用戶眼前的內(nèi)容極其有限
  • 當(dāng)展示的內(nèi)容較多且超出一個屏幕時作媚,用戶可以通過手勢滑動來查看屏幕以外的東西
  • 普通的UIView不具備滾動的功能纸泡,所以不適合展示較多的內(nèi)容
  • UIScrollView就是一個可以滾動的UIView赖瞒,用來展示大量的內(nèi)容,并且可以通過滾動來展示所有內(nèi)容
  • UIScrollView實例:手機(jī)上可上下滑動的頁面都是磷仰,如QQ聊天頁面

UIScrollView的基本使用

UIScrollView的使用很簡單境蔼,基本使用方式如下:

  • 將需要展示的內(nèi)容添加到UIScrollView中
  • 設(shè)置UIScrollView的 contentSize屬性箍土,告訴它它內(nèi)容的尺寸吴藻,也就是設(shè)置它的可滾動范圍
// 1.創(chuàng)建滾動視圖
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.frame = CGRectMake(0,0,375,150);
[self addSubview:scrollView];
        
// 2. 設(shè)置內(nèi)容
[scrollView addSubview:[UIImageView new]];
        
// 3. 設(shè)置滾動范圍
scrollView.contentSize = CGSizeMake(ImageViewCount * self.bounds.size.width, 0);

UIScrollView的顯示內(nèi)容的小細(xì)節(jié)

  • 超過UIScrollView邊界的內(nèi)容會被自動隱藏
  • 用戶可以用過拖拽手勢來查看超出UIScrollView邊界被隱藏的內(nèi)容

UIScrollView無法滾動可能的原因

  • 未設(shè)置 contentSize沟堡,不知滾動的范圍
  • scrollEnable = NO; 可滾動屬性設(shè)置為NO
  • userInteractionEnable = NO航罗; 未接受用戶事件

UIScrollView的常用屬性

  • 內(nèi)容偏移量:contentOffset
@property(nonatomic) CGPoint contentOffset;  // default CGPointZero

contentOffset用來表示UIScrollView的滾動位置伤哺。

具體為內(nèi)容原點與UIScrollView左上角原點的間距值。

  • 內(nèi)容大芯钔:contentSize
@property(nonatomic) CGPoint contentSize;  // default CGSizeZero

contentSize:表示UIScrollView的內(nèi)容的尺寸茫舶,用來設(shè)置UIScrollView的滾動范圍饶氏。

  • 額外滾動區(qū)域:contentInset
@property(nonatomic) UIEdgeInsets contentInset; // default UIEdgeInsetsZero. add additional scroll area around content

contentInset:可以在UIScrollView的四周增加額外的滾動區(qū)域疹启『把拢可以用來避免UIScrollView的內(nèi)容被其他控件擋住荤懂。

以上屬性效果如圖:

Snip20170305_3.png

UIScrollView的其他屬性

  • 彈簧效果
@property(nonatomic) BOOL bounces; // default YES. if YES, bounces past edge of content and back again
  • 是否能滾動
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled; // default YES. turn off any dragging temporarily
  • 是否顯示水平滾動條
@property(nonatomic) BOOL showsHorizontalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking
  • 是否顯示垂直滾動條
@property(nonatomic) BOOL showsVerticalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking
  • UIScrollView的Delegate(代理)
@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate; // default nil. weak reference

UIScrollView的Delegate

Deleagate 是一個很重要的屬性晤锥,同時也是一個重要的知識點查近,所以拿出來著重說一下。

代理思想的引入

  • 通常,我們會在UIScrollView 正在滾動册烈、滾到到某個位置婿禽、停止?jié)L動等情況下做一些特定的操作
  • 若想完成以上操作扭倾,需要對UIScrollView的各個狀態(tài)進(jìn)行“監(jiān)聽”膛壹,這個監(jiān)聽者就是我們說的代理
  • 當(dāng)UIScrollView發(fā)生一系列滾動操作時,會自動發(fā)送消息給它的代理對象肩民,通知它當(dāng)下的實時滾動狀態(tài)持痰。
  • 總結(jié)一下就是工窍,如果想要監(jiān)聽UIScrollView的實時滾動狀況患雏,我們就要給它設(shè)置代理纵苛,然后通過代理來得知它的實時滾動情況

實際上UIScrollView通知delegate自己的相關(guān)狀態(tài)就是通過給代理發(fā)消息實現(xiàn)的如圖:


Snip20170305_4.png

所以想成為UIScrollView的代理是需要遵循如下條件的

@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate;
  • UIScrollView把代理需要實現(xiàn)的方法都定義在了UIScrollViewDelegate當(dāng)中
  • 成為代理必須遵守UIScrollViewDelegate這個協(xié)議取试,其本身可以是 id 類型的對象(任意類型對象)
  • 代理對象必須實現(xiàn)UIScrollViewDelegate中相對應(yīng)的方法瞬浓,才能監(jiān)聽UIScrollView相應(yīng)的狀態(tài)

設(shè)置UIScrollView的步驟

  • 通常情況下UIScrollView的代理都是控制器猿棉,設(shè)置方法有兩種
    • 代碼: scrollView.delegate = self;
    • storyBoard/Xib拖線:


      Snip20170305_5.png
  • 控制器UIScrollViewDelegate
@interface ViewController ()<UIScrollViewDelegate>
  • 實現(xiàn)相對應(yīng)的代理方法,進(jìn)行監(jiān)聽
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    // 監(jiān)聽代碼
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2){
    // 監(jiān)聽代碼
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    // 監(jiān)聽代碼
}

···

UIScrollView內(nèi)容的縮放

UIScrollView不僅能夠展示大量的內(nèi)容還能進(jìn)行內(nèi)容的縮放兆龙。

常見場景

圖庫里面的圖片我們可以通過手勢來進(jìn)行縮放

Snip20170305_6.png

要實現(xiàn)這樣的功能慰安,我們只需要將圖片放到UIScrollView中去聪铺,然后設(shè)置縮放比例和要縮放的內(nèi)容

縮放原理

  • 當(dāng)用戶在UIScrollView身上使用捏合手勢的時候铃剔,UIScrollView會調(diào)用delegate的viewForZoomingInScollView方法,方法的返回值就是要進(jìn)行縮放的控件。
Snip20170305_7.png

縮放實現(xiàn)步驟

  • 設(shè)置UIScrollView的代理對象
  • 設(shè)置minimumZoomScale;// default is 1.0 最小縮放比例
  • 設(shè)置maximumZoomScale;// default is 1.0. 最大縮放比例
  • 代理實現(xiàn)viewForZoomingInScrollView方法返回要進(jìn)行縮放的控件

縮放相關(guān)的兩個方法

// 將要開始縮放
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2); // called before the scroll view begins zooming its content

// 結(jié)束縮放
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale; // scale between minimum and maximum. called after any 'bounce' animations

小結(jié)

UIScrollView是iOS開發(fā)中常常用到的一個控件,通常用來展示比較多的內(nèi)容踱蠢,我們可以通過給他設(shè)置代理實現(xiàn)它的代理方法進(jìn)行監(jiān)聽棋电,通過監(jiān)聽不同的狀態(tài)來做對應(yīng)的一些操作茎截。
它可以監(jiān)聽用戶手勢來縮放自己內(nèi)部子控件。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末赶盔,一起剝皮案震驚了整個濱河市企锌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌于未,老刑警劉巖撕攒,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件陡鹃,死亡現(xiàn)場離奇詭異,居然都是意外死亡抖坪,警方通過查閱死者的電腦和手機(jī)萍鲸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來脊阴,“玉大人埋合,你說我怎么就攤上這事。” “怎么了贷揽?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我础钠,道長很钓,這世上最難降的妖魔是什么企孩? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嬉橙。我一直安慰自己糕韧,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布愚墓。 她就那樣靜靜地躺著议经,像睡著了一般嗓袱。 火紅的嫁衣襯著肌膚如雪闪萄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天赊时,我揣著相機(jī)與錄音狈涮,去河邊找鬼晕鹊。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的躁锁。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼斩箫,長吁一口氣:“原來是場噩夢啊……” “哼匈织!你這毒婦竟也來了饵史?” 一聲冷哼從身側(cè)響起吠撮,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎酌心,沒想到半個月后侯勉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡练对,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了烟号。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片迫筑。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡扁瓢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出够掠,到底是詐尸還是另有隱情民褂,我是刑警寧澤,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布疯潭,位于F島的核電站赊堪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏竖哩。R本人自食惡果不足惜哭廉,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望相叁。 院中可真熱鬧遵绰,春花似錦、人聲如沸增淹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽虑润。三九已至成玫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背哭当。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工猪腕, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钦勘。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓陋葡,卻偏偏與公主長得像,于是被迫代替她去往敵國和親彻采。 傳聞我的和親對象是個殘疾皇子脖岛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,440評論 2 359

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