iOS-個(gè)人整理10 - UIControl與子類:UIScrollView滾動(dòng)視圖

一颜价、UIScrollView

UIScrollView是所有滾動(dòng)視圖的基礎(chǔ),很重要思币,主要用于輪播圖,相冊(cè)等功能
當(dāng)內(nèi)容超過(guò)一個(gè)屏幕時(shí)羡微,為了將內(nèi)容完整呈現(xiàn)谷饿,就可以使用UIScrollView

重要屬性
1.設(shè)置滾動(dòng)范圍:contentSize:返回值為CGSize
2.設(shè)置分頁(yè)效果:(BOOL)pagingEnabled
3.偏移量:contentOffset:返回值為CGPoint,改變偏移量可以切換子視圖
4.設(shè)置滾動(dòng)條是否顯示:
showsHorizontalScrollIndicator 水平方向
showsVerticallndicator 垂直方向
5.反彈效果:(BOOL)bounces

和縮放相關(guān)的屬性
1.最小縮放比例:minimumZoomScale:返回值CGFloat
2.最大縮放比例:maximumZoomScale:返回值CGFloat
3.當(dāng)前的縮放比例:zoomScale

重要的位置屬性:automaticallyAdjustsScrollViewInsets
當(dāng)視圖上有導(dǎo)航欄的時(shí)候妈倔,會(huì)比較麻煩博投,這個(gè)屬性不是ScrollView的屬性,是視圖控制器的屬性

當(dāng) automaticallyAdjustsScrollViewInsets 為 NO 時(shí)盯蝴,滾動(dòng)視圖就不會(huì)隨便延展
automaticallyAdjustsScrollViewInsets為 YES 時(shí)毅哗,滾動(dòng)視圖會(huì)自動(dòng)延伸

 

#define WIDTH self.view.frame.size.width  
#define HEIGHT self.view.frame.size.height  
  
-(void)viewDidLoad  
{  
      
#pragma mark UIScroll  
      
    //滾動(dòng)視圖學(xué)習(xí),當(dāng)內(nèi)容超過(guò)一個(gè)屏幕時(shí)捧挺,為了將內(nèi)容完整呈現(xiàn)  
    UIScrollView *myScrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];  
      
    //設(shè)置滾動(dòng)區(qū)域虑绵,這個(gè)屬性控制著能滾動(dòng)的服務(wù),這里設(shè)置為3倍屏幕寬度  
    myScrollView.contentSize = CGSizeMake(WIDTH*3, HEIGHT);  
      
    //設(shè)置分頁(yè)效果  
    myScrollView.pagingEnabled = YES;  
  
    //滾動(dòng)條樣式  
    myScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;  
      
    //隱藏水平/垂直滾動(dòng)條  
    myScrollView.showsHorizontalScrollIndicator = NO;  
    myScrollView.showsVerticalScrollIndicator = NO;  
      
    //設(shè)置tag  
    myScrollView.tag = 1001;  
      
    //設(shè)置反彈效果  
    myScrollView.bounces = YES;  
  
    //設(shè)置代理  
    myScrollView.delegate = self;  
      
    //偏移量,相對(duì)滾動(dòng)視圖的原點(diǎn)的位置闽烙,屏幕從偏移量這個(gè)點(diǎn)開(kāi)始顯示滾動(dòng)視圖的內(nèi)容  
    myScrollView.contentOffset = CGPointMake(WIDTH,0);  
      
    //為滾動(dòng)視圖添加子視圖  
    for (int i = 0; i < 3; i++) {  
        UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(WIDTH*i, 0, WIDTH, HEIGHT)];  
          
        myView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];  
       // [myScrollView addSubview:myView];  
    }  
      
    for (int i = 0; i < 3; i++) {  
        UILabel *myLabel = [[UILabel alloc]initWithFrame:CGRectMake(WIDTH*i, 0, WIDTH, HEIGHT)];  
        myLabel.font = [UIFont systemFontOfSize:220];  
        myLabel.text = [NSString stringWithFormat:@"第%d頁(yè)",i];  
        //讓字體根據(jù)Label的width適應(yīng)大小  
        myLabel.adjustsFontSizeToFitWidth = YES;  
  
        //顏色隨機(jī)  
        myLabel.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];  
        [myScrollView addSubview:myLabel];  
    }  
      
    //添加滾動(dòng)視圖到父視圖  
   [self.view addSubview:myScrollView];  
}  

這樣就生成了三個(gè)頁(yè)面UILabel翅睛,可以通過(guò)手勢(shì)拖拽進(jìn)行交換

二、UIScrollView的代理方法

UIScrollView的代理方法主要實(shí)現(xiàn)兩部分內(nèi)容:

1.監(jiān)視視圖的滾動(dòng)狀態(tài)

首先看看監(jiān)視視圖的縮放

//開(kāi)始拖拽視圖黑竞,只有觸摸對(duì)象滑動(dòng)才會(huì)觸發(fā)  
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView  
{  
   // NSLog(@"開(kāi)始拖拽");  
}  
  
//停止拖拽  
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate  
{  
   // NSLog(@"拖拽停止");  
}  
  
//拖拽結(jié)束捕发,松開(kāi)的時(shí)候  
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset  
     
  
//正在滾動(dòng)  
-(void)scrollViewDidScroll:(UIScrollView *)scrollView  
  
//視圖結(jié)束減速  
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView  
  
  
//將要開(kāi)始減速  
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView  
     
  
//拖動(dòng)到了頂端  
-(void)scrollViewDidScrollToTop:(UIScrollView *)scrollView  
2.控制視圖的縮放
//返回需要縮放的視圖很魂,必須為scrollView的子視圖
-(UIView*)viewForZoominglnScrollView:(UIScrollView*)scrollView:

//縮放結(jié)束  
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale  
  
//變換中  
-(void)scrollViewDidZoom:(UIScrollView *)scrollView  
        
//將要開(kāi)始變形  
-(void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view  

三扎酷、一個(gè)比較復(fù)雜的實(shí)例

現(xiàn)在要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的相冊(cè)功能遏匆,每個(gè)照片還可以通過(guò)捏合來(lái)進(jìn)行縮放法挨,切換圖片之后之前的圖片要恢復(fù)原比例
同時(shí)添加了一個(gè)UIPageControl控件惰爬,與UIScrollView配合切換視圖
這里總共有三張圖片狞尔,加了第四張與第一張相同页畦,用來(lái)模擬循環(huán)狀態(tài)

#define WIDTH (self.view.frame.size.width)  
#define HEIGHT (self.view.frame.size.height)  
  
#import "SecondViewController.h"  
#import "PhotoScrollView.h"  
  
  
@interface SecondViewController ()<UIScrollViewDelegate>  
  
  
@property (nonatomic,retain)UIScrollView *albumScrollView;//相冊(cè)滾動(dòng)視圖  
@property (nonatomic,retain)UIPageControl *albunPageControl;//頁(yè)數(shù)小白點(diǎn)  
@property (nonatomic,retain)NSMutableArray *photoArray;//照片數(shù)組  
  
@end  
  
@implementation SecondViewController  
  
//_albumScrollView懶加載  
-(UIScrollView *)albumScrollView  
{  
    if (!_albumScrollView) {  
        _albumScrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];  
        _albumScrollView.contentSize = CGSizeMake(WIDTH*5, HEIGHT);  
        //翻頁(yè)設(shè)置  
        _albumScrollView.pagingEnabled = YES;  
    }  
    return _albumScrollView;  
}  
-(UIPageControl *)albunPageControl  
{  
    if (!_albunPageControl) {  
        _albunPageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 600, WIDTH, 50)];  
        //添加方法  
       // [_albunPageControl addTarget:self action:@selector(pageControlChangeView:) forControlEvents:UIControlEventValueChanged];  
    }  
    return _albunPageControl;  
}  
//數(shù)組懶加載  
-(NSMutableArray *)photoArray  
{  
    if (!_photoArray) {  
        _photoArray = [[NSMutableArray alloc]initWithCapacity:2];  
    }  
    return _photoArray;  
}  
  
-(void)viewDidLoad  
{  
    //添加滾動(dòng)圖并設(shè)置代理  
    [self.view addSubview:self.albumScrollView];  
    _albumScrollView.delegate = self;  
      
    //添加PageControl  
    [self.view addSubview:self.albunPageControl];  
    //設(shè)置PageControl的頁(yè)數(shù)  
    _albunPageControl.numberOfPages = 3;  
      
    //給pageControl添加方法  
    [_albunPageControl addTarget:self action:@selector(pageControlChangeView:) forControlEvents:UIControlEventValueChanged];  
     
  
    //添加三張圖片  
    [self.photoArray addObject:[self addPhoto:CGRectMake(0, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s1.png"]Tag:1000]];  
    [self.photoArray addObject:[self addPhoto:CGRectMake(WIDTH, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s2.png"]Tag:1001]];  
    [self.photoArray addObject:[self addPhoto:CGRectMake(WIDTH*2, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s3.png"]Tag:1002]];  
  
    //添加一張與第一張重復(fù)的圖片敬拓,制造循環(huán)效果  
    [self addPhoto:CGRectMake(WIDTH*3, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s1.png"]Tag:1003];  
  
}  
  
//添加圖片函數(shù)  
-(UIScrollView*)addPhoto:(CGRect)frame Image:(UIImage*)image Tag:(NSInteger)tag  
{  
    //創(chuàng)建UIScrollView  
    UIScrollView *photoScrollView =[[UIScrollView alloc]initWithFrame:frame];  
    //創(chuàng)建UIimageView  
    UIImageView *photoImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];  
    photoImageView.image = image;  
      
    //設(shè)置代理  
    photoScrollView.delegate = self;  
      
    //添加視圖縮放范圍稠曼,沒(méi)有這個(gè)縮放不了 找了半天。途乃。荠耽。钩骇。。铝量。倘屹。。款违。唐瀑。。插爹。。请梢。赠尾。。毅弧。气嫁。。够坐。寸宵。。元咙。  
    photoScrollView.minimumZoomScale = 0.3;  
    photoScrollView.maximumZoomScale = 3;  
  
    //添加到父視圖  
    [photoScrollView addSubview:photoImageView];  
    [self.albumScrollView addSubview:photoScrollView];  
      
    return photoScrollView;  
}  
  
//pageControl點(diǎn)擊時(shí)進(jìn)行滾動(dòng)  
-(void)pageControlChangeView:(UIPageControl*)sender  
{  
    //根據(jù)頁(yè)數(shù)設(shè)置偏移量梯影,加動(dòng)畫(huà)  
    [_albumScrollView setContentOffset:CGPointMake(sender.currentPage*WIDTH, 0)animated:YES];  
}  
  
#pragma mark 代理  
  
//實(shí)現(xiàn)代理縮放方法  
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView  
{  
  
    for (id item in scrollView.subviews) {  
        if ([item isKindOfClass:[UIImageView class]]) {  
            return item;  
        }  
    }  
    return nil;  
}  
  
//在左右拖拽時(shí)實(shí)現(xiàn)方法  
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView  
{  
      
//1.進(jìn)行循環(huán)設(shè)置  
      
    //得到當(dāng)前的偏移量  
    CGFloat offset_X = _albumScrollView.contentOffset.x;  
      
    //偏移到第四張之后,手動(dòng)設(shè)置偏移量為0  
    if (offset_X >= WIDTH*3) {  
        _albumScrollView.contentOffset = CGPointMake(0, 0);  
        _albunPageControl.currentPage = 0;  
    }  
    else  
    {  
        //使PageControl與Scroll同步  
        _albunPageControl.currentPage = offset_X/WIDTH;  
    }  
      
    //在切換圖片的時(shí)候使照片恢復(fù)原來(lái)大小  
    //找到當(dāng)前偏移值對(duì)應(yīng)的數(shù)組index,但是向左右撥動(dòng)又不一樣庶香,有點(diǎn)麻煩  
    int index = (int)(offset_X/WIDTH)-1;  
    NSLog(@"index = %d",index);  
    // PhotoView *tempView = _photoArray[index];  
    //遍歷數(shù)組全修改了  
    for (UIScrollView *tempView in _photoArray) {  
        tempView.transform = CGAffineTransformMakeScale(1, 1);  
    }  
      
//2.進(jìn)行縮放恢復(fù)設(shè)置  
      
    //根據(jù)偏移量得到當(dāng)前page  
    int numPage = offset_X/WIDTH;  
      
    //用數(shù)組要考慮越界問(wèn)題  
    if (numPage > 0 && numPage < 2) {  
        UIScrollView *leftScrollView = _photoArray[numPage-1];  
        UIScrollView *rightScrollView = _photoArray[numPage+1];  
        //恢復(fù)比例  
        leftScrollView.zoomScale = 1.0;  
        rightScrollView.zoomScale = 1.0;  
    }  
    else if (numPage == 0)  
    {  
        UIScrollView *rightScrollView = _photoArray[numPage+1];  
        rightScrollView.zoomScale = 1.0;  
    }  
    else if (numPage == 2)  
    {  
        UIScrollView *leftScrollView = _photoArray[numPage-1];  
        //恢復(fù)比例  
        leftScrollView.zoomScale = 1.0;  
    }  
}  
  
//縮放時(shí)保持圖片在中央  
-(void)scrollViewDidZoom:(UIScrollView *)scrollView  
{  
    UIImageView *myImageView = scrollView.subviews[0];  
    float contentX = scrollView.contentSize.width;  
    float contentY = scrollView.contentSize.height;  
      
    //如果放大沒(méi)有超出邊界  
    if (contentX < WIDTH && contentY <HEIGHT) {  
            myImageView.center = self.view.center;  
        NSLog(@"w = %f,h = %f",contentX,contentY);  
    }  
    else //如果放大超出了屏幕frame  
    {  
         
        myImageView.center = CGPointMake(contentX/2, contentY/2);  
    }  
    for (id item in scrollView.subviews) {  
        NSLog(@"zssm = %@",item);  
    }  
  
}  
  
@end  

實(shí)現(xiàn)效果:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末甲棍,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子赶掖,更是在濱河造成了極大的恐慌感猛,老刑警劉巖七扰,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異陪白,居然都是意外死亡颈走,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)咱士,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)立由,“玉大人,你說(shuō)我怎么就攤上這事司致〔疬海” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵脂矫,是天一觀的道長(zhǎng)枣耀。 經(jīng)常有香客問(wèn)我,道長(zhǎng)庭再,這世上最難降的妖魔是什么捞奕? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮拄轻,結(jié)果婚禮上颅围,老公的妹妹穿的比我還像新娘。我一直安慰自己恨搓,他們只是感情好院促,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著斧抱,像睡著了一般常拓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辉浦,一...
    開(kāi)封第一講書(shū)人閱讀 49,816評(píng)論 1 290
  • 那天弄抬,我揣著相機(jī)與錄音,去河邊找鬼宪郊。 笑死掂恕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的弛槐。 我是一名探鬼主播懊亡,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼丐黄!你這毒婦竟也來(lái)了斋配?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎艰争,沒(méi)想到半個(gè)月后坏瞄,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡甩卓,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年鸠匀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逾柿。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缀棍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出机错,到底是詐尸還是另有隱情爬范,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布弱匪,位于F島的核電站青瀑,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏萧诫。R本人自食惡果不足惜斥难,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望帘饶。 院中可真熱鬧哑诊,春花似錦、人聲如沸及刻。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)缴饭。三九已至淹禾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間茴扁,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工汪疮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留峭火,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓智嚷,卻偏偏與公主長(zhǎng)得像卖丸,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子盏道,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

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