UIScrollView

• UIScrollView是所有滾動視圖的基類

---

創(chuàng)建UIScrollView

#define WIDTH self.view.frame.size.width#define HEIGHT self.view.frame.size.height // 1.創(chuàng)建一個和屏幕等尺寸的UIScrollView UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH,HEIGHT)]; // 2.設(shè)置背景顏色scrollView.backgroundColor = [UIColor yellowColor]; // 3.把scrollView放到self.view上顯示 [self.view addSubview:scrollView]; // 4.內(nèi)存管理[scrollView release];// ?水平?方向滾動 scrollView.contentSize = CGSizeMake(WIDTH * 7, 0); // 垂直?方向滾動scrollView.contentSize = CGSizeMake(0, 7 * HEIGHT);

---

偏移量contentOffset

//通過偏移量讓指定視圖顯示scrollView.contentOffset = CGPointMake(WIDTH, 0); // 直接設(shè)置第二個視圖顯示在屏幕上

UIScrollView屬性

//創(chuàng)建好之后我們對UIScrollView其他的屬性進(jìn)行設(shè)置。scrollView.contentOffset = CGPointMake(WIDTH, 0);// 想讓哪張圖?片最先顯?示通過設(shè)置偏移量完成scrollView.pagingEnabled = YES; // 可以讓ScrollView按?頁來滾動scrollView.showsHorizontalScrollIndicator = NO;// 關(guān)閉?水平?方向滾動條scrollView.showsVerticalScrollIndicator = NO;// 關(guān)閉垂直?方向滾動條scrollView.bounces = NO; // 關(guān)閉邊界回彈效果scrollView.tag = 1000; // 設(shè)定?一個tag值

---

UIScrollView協(xié)議

//監(jiān)控滾動狀態(tài)- (void)scrollViewDidScroll:(UIScrollView *)scrollView// 只要是拖拽scrollView就會觸發(fā)這個方法- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView// 開始拖拽的時候會觸發(fā)這個方法- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate// 當(dāng)結(jié)束拖拽的時候會觸發(fā)這個方法- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView// 當(dāng)滾動減速的時候會觸發(fā)這個方法- (void)scrollViewDidEndDecelerating:(UIScrollView // 當(dāng)滾動徹底停止的時候會觸發(fā)這個方法

UIScrollView控制視圖縮放

scrollView.maximumZoomScale = 2; // 設(shè)置最大的縮放最大比例 scrollView.minimumZoomScale = 0.5; // 設(shè)置最大的縮放最小比例 scrollView.zoomScale = 1; // 設(shè)置當(dāng)前的比例 當(dāng)我們在ViewDidLoad方法里設(shè)置好最大和最小的縮放 比例這兩個屬性之后我們就可以對視圖進(jìn)行縮放操作- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView // 指定某個UIScrollView的子視圖可以進(jìn)行方法縮小操作

---

習(xí)題:在Scroll中縮放圖片

Scroll內(nèi)對圖片縮放 //方法為圖片放入一個小的ScrollSmall 再將小的ScrollSmall放入大的ScrollBig//第一部分縮放 — (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {UIImageView *imageView = [scrollView.subviews objectAtIndex:0];return imageView; } //第二部分還原 -(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView{ // 先從負(fù)責(zé)滾動的?大scrollView找到他的?子視圖 for (UIScrollView *sView in scrollView.subviews){ // 在根據(jù)?子類的對象類型進(jìn)?行判斷 if ([sView isKindOfClass:[UIScrollView class]]){ // 把視圖的尺?寸恢復(fù)到原有尺?寸 sView.zoomScale = 1.0;} } }

---

習(xí)題2:UIPageControl小圓點(diǎn)跟隨Scroll視圖移動

效果為:

• 第一張圖第一顆點(diǎn)
• 第二張圖第二顆點(diǎn)

代碼

//全局變量#define WIDTH self.view.bounds.size.width#define HEIGHT self.view.bounds.size.height @interface ViewController () <UIScrollViewDelegate> //遵循協(xié)議 {UIImageView *image;//圖片UIPageControl *page;//圓點(diǎn) } @end UIScrollView *scro = [[UIScrollView alloc]initWithFrame:self.view.bounds];scro.contentSize = CGSizeMake(self.view.bounds.size.width *4, 0);//邊界回彈scro.bounces = YES;//小圓點(diǎn)page = [[UIPageControl alloc]initWithFrame:CGRectMake(110, self.view.bounds.size.height - 30, 200, 20)];page.numberOfPages = 4;[page addTarget:self action:@selector(pageControler:) forControlEvents:UIControlEventValueChanged];//添加圖片for (int i = 0; i< 4; i++) {image = [[UIImageView alloc]initWithFrame:scr.bounds];image.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]];[scro addSubview:image];}//按頁滾動scro.pagingEnabled = YES;//滾動條//scro.showsHorizontalScrollIndicator = NO; scro.delegate = self;//設(shè)置代理人[self.view addSubview:scro];[self.view addSubview:page];#warning 觸發(fā)拖動將要停止的方法: -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{NSLog(@"哈哈哈哈哈哈歷程你以為你不是傻逼嗎咩哈哈哈哈哈");page.currentPage = scrollView.contentOffset.x /self.view.bounds.size.width; }

---

宇神大招第二道/分屏相冊

---

=========

哈哈 簡直666666 宇神就給我們隨便介紹了一下Scroll就叫我們做相冊了

=========

---

實(shí)現(xiàn)功能介紹

---

UIScroll下創(chuàng)建可上下滑動的背景圖

添加數(shù)組在主視圖View里對應(yīng)添加相冊

解決相冊添加時 相冊數(shù)量為奇數(shù) 額外計算問題

點(diǎn)擊縮略圖進(jìn)入相應(yīng)相冊

且對應(yīng)相冊可左右滑動(小圓點(diǎn)跟隨移動)(PS:點(diǎn)擊小圓點(diǎn)也可移動相冊)

相冊無限滾動,到最后一張,下滑一張回到第一張

保留瀏覽記錄(將主視圖View的相冊縮略圖變?yōu)橥顺鱿鄡詴r瀏覽的相片)

---

效果圖

• 形成相冊縮略圖
• 可移動拓展(或調(diào)節(jié)跟隨相冊數(shù)量)(且解決奇數(shù)相冊計算)
• 點(diǎn)擊進(jìn)入相冊,圓點(diǎn)跟隨移動,且點(diǎn)擊圓點(diǎn)相冊跟隨移動,相冊無限循環(huán)滾動
• 縮略圖保存瀏覽記錄

---

• 其實(shí)難點(diǎn)就在于代理方法上,也不會很難,只是剛開始學(xué)習(xí)學(xué)的東西多,代理不是特別的熟悉
• 所以宇神出了個小大招給我們熟悉代理方法
• 不過確實(shí)弄了我很久,卡在一些很小的細(xì)節(jié)地方很久
• 宇神說做完之后之前的題目都小兒科,也對,只會越來越熟悉

---

---

---

上代碼

ViewController.m

#import "ViewController.h" #import "SecViewController.h"//引入頭文件#define WIDTH self.view.bounds.size.width #define HEIGHT self.view.bounds.size.height @interface ViewController ()<passTag>//代理方法回傳值,尋找圖片 {NSMutableArray *thumb;//存放相片的總數(shù)組UIButton *backButton;SecViewController *sec;//實(shí)例對象NSInteger buttonTag;NSInteger imageTag;NSInteger useTag;//獲取點(diǎn)擊按鈕的tagNSArray *arr;//點(diǎn)擊按鈕的對應(yīng)數(shù)組 } @end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];//數(shù)組存放圖片NSArray* ar1 = @[@"6.jpg",@"7.jpg",@"8.jpg",@"9.jpg"];NSArray* ar2 = @[@"10.jpg",@"11.jpg",@"12.jpg",@"13.jpg"];NSArray* ar3 = @[@"14.jpg",@"15.jpg",@"16.jpg",@"17.jpg"];NSArray* ar4 = @[@"18.jpg",@"19.jpg",@"20.jpg",@"21.jpg"];NSArray* ar5 = @[@"22.jpg",@"23.jpg",@"24.jpg",@"25.jpg"];thumb = [NSMutableArray array];thumb = [@[ar1,ar2,ar3,ar4,ar5]mutableCopy];//準(zhǔn)備UIImageView *backImage;NSInteger up = 1;buttonTag = 100;imageTag = 1000;//主頁面UIScrollView *scr = [[UIScrollView alloc]initWithFrame:self.view.bounds];scr.contentSize = CGSizeMake(0, HEIGHT * 5);//背景for (int i = 1; i < 6; i++) {backImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, HEIGHT * (i - 1), WIDTH, HEIGHT)];[backImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]]];[scr addSubview:backImage];}[self.view addSubview:scr];//主頁面添加縮略圖for (int j = 0; j < [thumb count] / 2; j++) {for (int i = 0; i < 2; i++) {backImage = [[UIImageView alloc]initWithFrame:CGRectMake( 50 + (WIDTH / 3 + 30) * i, 25 + (HEIGHT / 3 ) + (HEIGHT / 3 ) * (j - 1), WIDTH / 3 + 10, HEIGHT / 3 -30 )];backImage.alpha = .95;[backImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",up++]]];[backImage setTag:imageTag++];//相應(yīng)按鈕backButton = [UIButton buttonWithType:UIButtonTypeSystem];backButton.frame = CGRectMake( 50 + (WIDTH / 3 + 30) * i, 25 + (HEIGHT / 3 ) + (HEIGHT / 3 ) * (j - 1), WIDTH / 3 + 10, HEIGHT / 3 -30 );[backButton addTarget:self action:@selector(backButtonClick:) forControlEvents:UIControlEventTouchUpInside];[backButton setTag:buttonTag++];[scr addSubview:backButton];[scr addSubview:backImage];}}//奇數(shù)縮略圖if ([thumb count] % 2 == 1) {backImage = [[UIImageView alloc]initWithFrame:CGRectMake( 50 , (HEIGHT / 3 + 12) * ([thumb count] / 2), WIDTH / 3 + 10, HEIGHT / 3 - 30)];backImage.alpha = .95;[backImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",[thumb count]]]];[backImage setTag:[thumb count] + 999];//相應(yīng)按鈕backButton = [UIButton buttonWithType:UIButtonTypeSystem];backButton.frame = CGRectMake( 50 , (HEIGHT / 3 + 12) * ([thumb count] / 2), WIDTH / 3 + 10, HEIGHT / 3 - 30);[backButton addTarget:self action:@selector(backButtonClick:) forControlEvents:UIControlEventTouchUpInside];[backButton setTag:[thumb count] + 99];[scr addSubview:backButton];[scr addSubview:backImage];}// Do any additional setup after loading the view, typically from a nib. }//按鈕方法 -(void)backButtonClick:(UIButton *)button{sec =[[SecViewController alloc]init];//每次點(diǎn)擊初始化,一開始我沒有寫進(jìn)來,結(jié)果每次進(jìn)下一個頁面都保存上一個相冊//setter傳值給SecController[sec setAll:thumb[button.tag-100]];//當(dāng)前按鈕的tag-100剛好對應(yīng)數(shù)組下標(biāo)sec.delegate = self;//設(shè)置代理人//切換視圖(跳轉(zhuǎn)下一個視圖)[self presentViewController:sec animated:YES completion:nil];//代理方法(指定縮略圖)用useTag = button.tag + 900;//獲取當(dāng)前按鈕點(diǎn)擊時對應(yīng)數(shù)組arr = [NSArray arrayWithArray:thumb[button.tag - 100]]; } //代理方法回傳獲取數(shù)組下標(biāo) -(void)passTag:(NSInteger)tagg{//指定縮略圖UIImageView *view = (UIImageView *)[self.view viewWithTag:useTag];//通過tag值強(qiáng)轉(zhuǎn)為視圖中對應(yīng)圖片[view setImage:[UIImage imageNamed:arr[tagg - 1000]]];//更改圖片 }

---

SecViewController.h

#import <UIKit/UIKit.h> @protocol passTag <NSObject> //代理方法 -(void)passTag:(NSInteger)tagg;//傳值給ViewController@end@interface SecViewController : UIViewController //屬性獲取ViewController里的數(shù)組 @property(nonatomic,retain)NSArray *all; //代理人 @property(nonatomic,assign)id<passTag>delegate; @end

---

SecViewController.m

#import "SecViewController.h"#define WIDTH self.view.bounds.size.width #define HEIGHT self.view.bounds.size.height #define VIEWS self.view @interface SecViewController () <UIScrollViewDelegate> {UIButton *titleButton;UIScrollView *scr;UIImageView *sImage;UIPageControl *page; } @end@implementation SecViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.//準(zhǔn)備titleButton = [UIButton buttonWithType:UIButtonTypeSystem];scr = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 48, WIDTH, HEIGHT)];NSInteger imageTag = 0;//標(biāo)題按鈕titleButton.frame = CGRectMake(0, 0, WIDTH, 55);titleButton.backgroundColor = [UIColor whiteColor];[titleButton setTitle:@"影集" forState:UIControlStateNormal];[titleButton addTarget:self action:@selector(backButton:) forControlEvents:UIControlEventTouchUpInside];//滾動圖片scr.contentSize = CGSizeMake(WIDTH * 4, 0);scr.backgroundColor = [UIColor whiteColor];scr.bounces = YES;scr.pagingEnabled = YES;scr.delegate = self;for (NSInteger i = 0 ; i < 4; i++) {sImage = [[UIImageView alloc]initWithFrame:CGRectMake(i * WIDTH, 0, WIDTH, HEIGHT)];sImage.tag = imageTag++;[sImage setImage:[UIImage imageNamed:_all[i]]];NSLog(@"%@",_all[i]);[scr addSubview:sImage];}//邊緣圖片UIImageView *sImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(-WIDTH, 48, WIDTH, HEIGHT)];[sImage1 setImage:[UIImage imageNamed:_all[3]]];[scr addSubview:sImage1];UIImageView *sImage2 = [[UIImageView alloc]initWithFrame:CGRectMake(4 *WIDTH, 48, WIDTH, HEIGHT)];[sImage2 setImage:[UIImage imageNamed:_all[0]]];[scr addSubview:sImage2];//page點(diǎn)page =[[UIPageControl alloc]initWithFrame:CGRectMake(110, HEIGHT-38, 200, 20)];page.numberOfPages = 4;page.backgroundColor = [UIColor grayColor];page.layer.cornerRadius = 10;page.alpha = .83;[page addTarget:self action:@selector(pageClick:) forControlEvents:UIControlEventValueChanged];[VIEWS addSubview:scr];[VIEWS addSubview:titleButton];[VIEWS addSubview:page];} //點(diǎn)擊切換圖片 -(void)pageClick:(UIPageControl *)page1{[scr setContentOffset:CGPointMake(page1.currentPage * WIDTH, 0) animated:YES]; } //滑動快停止時 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//小圓點(diǎn)跟隨視圖移動page.currentPage = scrollView.contentOffset.x / WIDTH;//本類 執(zhí)行代理方法 賦值[self.delegate passTag:(page.currentPage + 1000)]; }-(void)backButton:(UIButton *)button{//切回原頁面[self dismissViewControllerAnimated:YES completion:nil]; }-(void)scrollViewDidScroll:(UIScrollView *)scrollView{//無限滾動if (scrollView.contentOffset.x < -30) {[scrollView setContentOffset:CGPointMake(4 * WIDTH, 0)];}if (scrollView.contentOffset.x > 3 * WIDTH + 30) {[scrollView setContentOffset:CGPointMake(0, 0)];} }

---

大作阿..
后面還有網(wǎng)易新聞呢..
要各種開始模仿了

總結(jié)

以上是生活随笔為你收集整理的#Objective - C - UI-design - 第六天 -UIKit框架-UIScrollView-分屏相册练习(相册缩略图变为浏览到第几张)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。