iOS中UIScrollerView的用法及基于AotoLayout的控件懸停
UIScrollView為了顯示多于一個屏幕的內(nèi)容或者超過你能放在內(nèi)存中的內(nèi)容。Scroll View為你處理縮小放大手勢，UIScrollView實現(xiàn)了這些手勢，并且替你處理對于它們的探測和回應(yīng)。其中需要注意的子類是UITableView以及UITextView（用來顯示大量的文字）。還有一個UIWebView，盡管那不是UIScrollView的直接子類，它適用UIScrollView去顯示網(wǎng)頁內(nèi)容contentsize是內(nèi)容的寬和高，contentsize.width是內(nèi)容的寬度，contentsize.heght是高度，contentsize是UIScrollView的一個屬性，它是一個CGSize，是由核心圖形所定義的架構(gòu)，那定義了你可以滾軸內(nèi)容的寬度和高度，你也可以添加可以上下滾動的額外區(qū)域。第一種方法是你可以通過添加內(nèi)容的大小來完成。另外一個比較動態(tài)的選擇是UIScrollView的另一個屬性contentInset，contentInset增加你在contentsize中指定的內(nèi)容能夠滾動的上下左右區(qū)域數(shù)量contentInset.top以及contentInset.buttom分別表示上面和下面的距離。
在滾軸視圖中，有一個叫做ContentOffset的屬性跟蹤UIScrollView的具體位置，你能夠自己獲取和設(shè)置它，ContentOffset是你當(dāng)前可視內(nèi)容在滾軸視圖邊界的左上角那個點。如圖：
可以看出，ContentOffset內(nèi)容中的那個點不是從contentInset的左上角開始的，而是內(nèi)容的左上角，此時的ContentOffset是正值，但有時也是負(fù)值，如下圖所示：
使用一個ScrollView
創(chuàng)建一個UIScrollView
CGRectframe = CGRectMake( 0, 0, 200, 200);
scrollView= [[UIScrollView alloc] initWithFrame: frame];
添加子視圖（框架可以超過scroll view的邊界）
frame= CGRectMake( 0, 0, 500, 500);
myImageView= [[UIImageView alloc] initWithFrame: frame];
[scrollViewaddSubview:myImageView];
設(shè)置內(nèi)容尺寸
scrollView.contentSize= CGSize(500,500);
擴(kuò)展Scroll View 的行為
- 應(yīng)用程序通常需要知道有關(guān)的滾圖的事件
- scrolloffset改變的時候
- 拖動開始和結(jié)束
- 減速的開始和結(jié)束
通過子類化擴(kuò)展Scroll View 的行為
- 創(chuàng)建一個子類
- 重寫一些功能并改變行為
- 關(guān)于這種方式的爭議
應(yīng)用程序的邏輯和行為變成了視圖本身的一部分，就像，你可能有一些定制的滾軸邏輯，，在那你只在意一個視圖控制，但你想在不同地方重復(fù)使用你的滾軸視圖，如果你必須為每個都子類化，你最后會有很多不同的滾軸視圖子類以及在視圖中的特定應(yīng)用邏輯。
編寫很多子類是很沉悶的事情，你最后會有很多無法重復(fù)使用的單獨視圖，而MVC的視圖部分的一個重點是視圖是可以在不同的控制器和不同的模式之中重復(fù)使用的，如果我們把所有邏輯都放在視圖中，它減少了可復(fù)用性。
你的代碼變得很牢固地配對在一起，它實際上變成了超類的一部分，你無法從UIScrollView中析取它，之后用其它東西代替，如果它在你控制器中且為控制器的一部分，在之后更容易改變它工作的方式和重新安排你應(yīng)用程序的一些部分。
通過委派來擴(kuò)展Scroll View 的行為（常用的）
委派是一個單獨的對象，協(xié)議，定義了委派會實現(xiàn)的一系列功能的Objective-C協(xié)議，它創(chuàng)建了一系列很清晰的撤銷點，在那里你能定制行為和外觀。它在這些對象之間保持了松散的配對，視圖本身與視圖控制器或任何其它的控制器對象，委派不是滾軸視圖的直接子類，它比起牢固配對的子類更加的松散。
理論篇
在滾動的過程中，實際上就是contentOffset的值在不斷變化，當(dāng)手指觸摸后，UIScrollView會暫時攔截觸摸事件，使用一個計時器。假如在計時器到點后沒有發(fā)生手指移動事件，那么UIScrollView發(fā)送 tracking events 到被點擊的 subview 上面。如果在計時器到點前發(fā)生了移動事件，那么UIScrollView取消 tracking 然后自己發(fā)生滾動。
可以重載子類
- (BOOL)touchesShouldBegin:(NSSet *)touches withEvent:(UIEvent *)event inContentView:(UIView *)view;
決定自己是否接受 touch 事件
- (BOOL)touchesShouldCancelInContentView:(UIView *)view;
開始發(fā)送 tracking messages 給 subview 的時候調(diào)用這個方法，決定是否發(fā)送 tracking messages 消息到 subview。
返回NO -> 發(fā)送，表示不取消
返回YES -> 不發(fā)送，表示會取消
屬性篇
@property(nonatomic,readonly,getter=isTracking) BOOL tracking;
當(dāng) touch 后還沒有拖動的時候值是YES，否則NO
@property(nonatomic,readonly,getter=isZoomBouncing) BOOL zoomBouncing;
當(dāng)內(nèi)容放大到最大或者最小的時候值是YES，否則NO
@property(nonatomic,readonly,getter=isZooming) BOOL zooming;
當(dāng)正在縮放的時候值是YES，否則NO
@property(nonatomic,readonly,getter=isDecelerating) BOOL decelerating;
當(dāng)滾動后，手指放開但是還在繼續(xù)滾動中。這個時候是YES，其他時候是NO
@property(nonatomic) CGFloat decelerationRate;
設(shè)置手指放開后的減速率
@property(nonatomic) CGFloat maximumZoomScale;
表示放大的最大倍數(shù)
@property(nonatomic) CGFloat minimumZoomScale;
表示縮小的最小倍數(shù)
@property(nonatomic,getter=isPagingEnabled) BOOL pagingEnabled;
當(dāng)值為YES的時候，就會產(chǎn)生翻頁那種效果
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
決定是否可以滾動
@property(nonatomic) BOOL delaysContentTouches;
當(dāng)值為YES的時候，用戶一旦觸碰，然后再一定時間內(nèi)沒有移動，UIScrollView會發(fā)送 tracking events，然后用戶移動手指足夠長度觸發(fā)滾動事件，這個時候，UIScrollView發(fā)送了-(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event到 subview，然后UIScrollView開始滾動。假如值為NO，UIScrollView發(fā)送 tracking events 后，就算用戶移動手指，UIScrollView也不會滾動。
@property(nonatomic) BOOL showsHorizontalScrollIndicator;
滾動時是否顯示水平滾動條
@property(nonatomic) BOOL showsVerticalScrollIndicator;
滾動時是否顯示垂直滾動條
@property(nonatomic) BOOL bounces;
默認(rèn)是YES，就是滾動超過邊界會有反彈回來的效果，如果設(shè)置為NO，那么滾動到邊界就會立刻停止
@property(nonatomic) BOOL bouncesZoom;
這個效果反映在縮放上面，如果縮放超過最大縮放，就會有反彈效果，加入設(shè)置為NO，則達(dá)到最大或者最小的時候立刻停止
@property(nonatomic,getter=isDirectionalLockEnabled) BOOL directionalLockEnabled;
默認(rèn)是NO，可以在垂直和水平方向同時運(yùn)動。當(dāng)值為YES的時候，加入一開始是垂直或者水平運(yùn)動，那么接下來會鎖定另外一個方向的滾動。加入一開始是對角方向滾動，則不會禁止某個方向
@property(nonatomic) UIScrollViewIndicatorStyle indicatorStyle;
滾動條的樣式，基本只是設(shè)置顏色
@property(nonatomic) UIEdgeInsets scrollIndicatorInsets;
設(shè)置滾動條的位置
方法篇
直接上代碼看
#pragma mark UIScrollViewDelegate
//只要滾動了就會觸發(fā)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
{
// NSLog(@" scrollViewDidScroll");
NSLog(@"ContentOffset x is %f,yis %f",scrollView.contentOffset.x,scrollView.contentOffset.y);
}
//開始拖拽視圖
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
{
NSLog(@"scrollViewWillBeginDragging");
}
//完成拖拽
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
{
NSLog(@"scrollViewDidEndDragging");
}
//將開始降速時
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;
{
NSLog(@"scrollViewWillBeginDecelerating");
}
//減速停止了時執(zhí)行，手觸摸時執(zhí)行
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;
{
NSLog(@"scrollViewDidEndDecelerating");
}
//滾動動畫停止時執(zhí)行,代碼改變時出發(fā),也就是setContentOffset改變時
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;
{
NSLog(@"scrollViewDidEndScrollingAnimation");
}
//設(shè)置放大縮小的視圖，要是uiscrollview的subview
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
{
NSLog(@"viewForZoomingInScrollView");
return viewA;
}
//完成放大縮小時調(diào)用
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale;
{
viewA.frame=CGRectMake(50,0,100,400);
NSLog(@"scale between minimum and maximum. called after any 'bounce' animations");
}// scale between minimum and maximum. called after any 'bounce' animations
//如果你不是完全滾動到滾軸視圖的頂部，你可以輕點狀態(tài)欄，那個可視的滾軸視圖會一直滾動到頂部，那是默認(rèn)行為，你可以通過該方法返回NO來關(guān)閉它
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;
{
NSLog(@"scrollViewShouldScrollToTop");
returnYES;
}
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;
{
NSLog(@"scrollViewDidScrollToTop");
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
@end
基于AotoLayout的控件懸停
在很多的電商類的APP中我們經(jīng)常會用到一種滑動懸停的效果，所以這次嘗試著利用AutoLayout來實現(xiàn)這種效果。話不多說先上圖
效果：
效果上過了，還是理順下思路上吧。從效果圖上不難發(fā)現(xiàn)我們的程序是基于UIScrollerView的。界面上的展示同樣都是UIScrollView的子控件。當(dāng)然了難點也就是基于UIScrollerView的內(nèi)部子控件的布局以及AutoLayout約束的修改。
我們看一下我們的需要的一些基本的控件布局：
好了，現(xiàn)在開始開始搭建新的項目了,首先在Storyboard上搭建最基本的布局，并將控件基本布局到相應(yīng)的位置，以備我們更方便的添加約束。
到了這里就開始對我們的控件添加基本的約束了從上開始吧。上面的控件我們能確定是UIImageView的heigth以及top、left以及rihgt。至于bottom到了后面會著重設(shè)置的。
然后繼續(xù)來操作懸停的View。這個View因為處在兩個view的中間所以我們要暫時確定height以及l(fā)eft和right的約束就足夠了了
終于到最后一個UIImageView了，同樣的能確定的是height、right、left以及bottom這四項。
到了這里針對單個的控件的布局基本完成了，細(xì)心的你可能會發(fā)現(xiàn)以上的操作都沒有進(jìn)行關(guān)聯(lián)以及沒有對width進(jìn)行約束。那么下面我們就要開始進(jìn)行三者的關(guān)聯(lián)以及width上的設(shè)置。
因為懸停的view處與兩個imageView的中間，所以我們只需要對它進(jìn)行處理就好了
其實這兩個約束完全是可以在設(shè)置懸停view的時候的添加，之所以在這里添加是我們在后面的控制器會用到這兩個約束，為了好辨認(rèn)我們就給他們定義上別名：
然后我們按住command選擇我們的三個控件然后按住control拖向scrollView的父控件view設(shè)置等width。
好了，到了這里我們的約束已經(jīng)不會再報錯了，然后在邏輯上也是基本是通順的了，但是對于我們懸停的功能來說就少了關(guān)鍵的一個環(huán)節(jié)那么就是一旦懸停view懸停了，那么它與上下兩個imageView的約束要怎么處理呢？所以我們還需要一個輔助的約束用來懸停之后的關(guān)聯(lián)處理
添加之后我們給這個約束起個別名hidden懸停,不過細(xì)心的你一定會發(fā)現(xiàn)添加之后會sb會提示出有沖突的約束，那么我們只需要對我們剛剛添加的約束進(jìn)行一下操作就OK了
好了，到了這里我們在AutoLayout上要做的事情就這些了，下面我們就可以安心的寫代碼了。
@interface ViewController ()/**中間的View*/@property (weak, nonatomic) IBOutlet UIView *centreView;/**上面的ImageView*/@property (weak, nonatomic) IBOutlet UIImageView *topImageView;/**centreView的top約束*/@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;/**centreView的bottom約束*/@property (weak, nonatomic) IBOutlet NSLayoutConstraint *bottomConstraint;/**topImageView暫禁用的約束*/@property (weak, nonatomic) IBOutlet NSLayoutConstraint *hiddenConstraint;
@end
然后在scrollView的滑動代理方法中實現(xiàn)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//獲得top圖片的高度
CGFloat imageH = self.topImageView.frame.size.height;
//獲取偏移量
CGFloat offsetY = scrollView.contentOffset.y;
//centrView的frame
CGRect centreFrame = self.centreView.frame;
if (offsetY>=imageH) {
//將centreView的向上和向下的約束禁用
self.bottomConstraint.active = NO;
self.topConstraint.active = NO;
//將topImageView與bottomImageView的約束使用關(guān)聯(lián)
self.hiddenConstraint.active = YES;
//懸停在位置
centreFrame.origin.y = 0;
self.centreView.frame = centreFrame;
//添加在scrollView的父控件
[self.view addSubview:self.centreView];
}else{
//添加在topIamgeView的下面
centreFrame.origin.y = imageH;
self.centreView.frame = centreFrame;
[scrollView addSubview:self.centreView];
//記住一定要先添加到scrollView上之后在修改約束的內(nèi)容，不然添加的約束會不成，因為系統(tǒng)無法建立他們之間的聯(lián)系。
self.hiddenConstraint.active = NO;
self.topConstraint.active = YES;
self.bottomConstraint.active = YES;
}
//等比例的伸縮
CGFloat scale= 1-(offsetY/60);
scale = (scale>=1)?scale :1;
self.topImageView.transform = CGAffineTransformMakeScale(scale, scale);
}
最后補(bǔ)充：
在子控件的尺寸不能通過UIScrollView來計算，可以通過以下方式計算
- 設(shè)置固定值（width==100，height==300）
- 相對于UIScrollView以外的其他控件來計算尺寸
在UIScrollView里面布局子控件，sb里面默認(rèn)是是需要子控件的尺寸以及子控件與UIScrollView之間的間距來計算出scroller的conentSize的。所以這就是上面的子控件要與父控件來等寬的原因了。
UIScrollView的frame應(yīng)該通過子控件以外的其他控件來計算。
- 深入理解Android中Scroller的滾動原理
- Android程序開發(fā)之UIScrollerView里有兩個tableView
- 詳解Android應(yīng)用開發(fā)中Scroller類的屏幕滑動功能運(yùn)用
- 詳解Android Scroller與computeScroll的調(diào)用機(jī)制關(guān)系
- jQuery滾動條插件nanoscroller使用指南
- javascript AutoScroller 函數(shù)類
- android開發(fā)之橫向滾動/豎向滾動的ListView(固定列頭)
- android實現(xiàn)上下滾動的TextView
- Android中實現(xiàn)多行、水平滾動的分頁的Gridview實例源碼
- Android Scroller完全解析
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于iOS關(guān)聯(lián)對象的相關(guān)資料，文中通過示例代碼結(jié)束的非常詳細(xì)，對大家學(xué)習(xí)或者使用iOS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
iOS之單獨使用UISearchBar創(chuàng)建搜索框的示例
本篇文章主要介紹了iOS之單獨使用UISearchBar創(chuàng)建搜索框的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
iOS中使用URL Scheme進(jìn)行App跳轉(zhuǎn)的教程
這篇文章主要介紹了iOS中使用URL Scheme進(jìn)行App跳轉(zhuǎn)的教程,比如在應(yīng)用內(nèi)提示安裝另一個應(yīng)用時就以url打開safari然后打開app store那樣,需要的朋友可以參考下2016-04-04
iOS定位 - 普通定位(沒有地圖) - 反地理編碼(得到具體位置)使用代碼如何實現(xiàn)呢，下面小編就給大家詳解ios百度地圖的使用（普通定位、反地理編碼，有需要的朋友可以參考下2015-08-08
本文主要介紹了IOS開發(fā)過程中的消息通知--小紅點的相關(guān)知識。大致分為兩種方法：系統(tǒng)方法和自定義方法。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了iOS開發(fā)中導(dǎo)航控制器的基本使用教程,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11
iOS開發(fā)學(xué)習(xí)之監(jiān)測程序的崩潰次數(shù)詳解
iOS開發(fā)中遇到程序崩潰是很正常的事情，下面這篇文章主要給大家介紹了關(guān)于iOS如何監(jiān)測程序崩潰次數(shù)的相關(guān)資料，文中通過詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
本篇文章主要介紹了iOS實現(xiàn)搭建聊天頁面的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了iOS自定義身份證鍵盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要給大家介紹了關(guān)于iOS中視頻播放的基本方法的相關(guān)資料，文中分別介紹了MPMoviePlayerController、MPMoviePlayerViewController、AVPlayer以及AVPlayerViewController四種方法，需要的朋友可以參考下2018-07-07