UIScrollView

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

---

創建UIScrollView

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

---

偏移量contentOffset

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

UIScrollView屬性

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

---

UIScrollView協議

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

UIScrollView控制視圖縮放

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

---

習題:在Scroll中縮放圖片

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

---

習題2:UIPageControl小圓點跟隨Scroll視圖移動

效果為:

• 第一張圖第一顆點
• 第二張圖第二顆點

代碼

//全局變量#define WIDTH self.view.bounds.size.width#define HEIGHT self.view.bounds.size.height @interface ViewController () <UIScrollViewDelegate> //遵循協議 {UIImageView *image;//圖片UIPageControl *page;//圓點 } @end UIScrollView *scro = [[UIScrollView alloc]initWithFrame:self.view.bounds];scro.contentSize = CGSizeMake(self.view.bounds.size.width *4, 0);//邊界回彈scro.bounces = YES;//小圓點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;//設置代理人[self.view addSubview:scro];[self.view addSubview:page];#warning 觸發拖動將要停止的方法: -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{NSLog(@"哈哈哈哈哈哈歷程你以為你不是傻逼嗎咩哈哈哈哈哈");page.currentPage = scrollView.contentOffset.x /self.view.bounds.size.width; }

---

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

---

=========

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

=========

---

實現功能介紹

---

UIScroll下創建可上下滑動的背景圖

添加數組在主視圖View里對應添加相冊

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

點擊縮略圖進入相應相冊

且對應相冊可左右滑動(小圓點跟隨移動)(PS:點擊小圓點也可移動相冊)

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

保留瀏覽記錄(將主視圖View的相冊縮略圖變為退出相冊時瀏覽的相片)

---

效果圖

• 形成相冊縮略圖
• 可移動拓展(或調節跟隨相冊數量)(且解決奇數相冊計算)
• 點擊進入相冊,圓點跟隨移動,且點擊圓點相冊跟隨移動,相冊無限循環滾動
• 縮略圖保存瀏覽記錄

---

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

---

---

---

上代碼

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;//存放相片的總數組UIButton *backButton;SecViewController *sec;//實例對象NSInteger buttonTag;NSInteger imageTag;NSInteger useTag;//獲取點擊按鈕的tagNSArray *arr;//點擊按鈕的對應數組 } @end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];//數組存放圖片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];//準備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++];//相應按鈕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];}}//奇數縮略圖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];//相應按鈕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];//每次點擊初始化,一開始我沒有寫進來,結果每次進下一個頁面都保存上一個相冊//setter傳值給SecController[sec setAll:thumb[button.tag-100]];//當前按鈕的tag-100剛好對應數組下標sec.delegate = self;//設置代理人//切換視圖(跳轉下一個視圖)[self presentViewController:sec animated:YES completion:nil];//代理方法(指定縮略圖)用useTag = button.tag + 900;//獲取當前按鈕點擊時對應數組arr = [NSArray arrayWithArray:thumb[button.tag - 100]]; } //代理方法回傳獲取數組下標 -(void)passTag:(NSInteger)tagg{//指定縮略圖UIImageView *view = (UIImageView *)[self.view viewWithTag:useTag];//通過tag值強轉為視圖中對應圖片[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里的數組 @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.//準備titleButton = [UIButton buttonWithType:UIButtonTypeSystem];scr = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 48, WIDTH, HEIGHT)];NSInteger imageTag = 0;//標題按鈕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點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];} //點擊切換圖片 -(void)pageClick:(UIPageControl *)page1{[scr setContentOffset:CGPointMake(page1.currentPage * WIDTH, 0) animated:YES]; } //滑動快停止時 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//小圓點跟隨視圖移動page.currentPage = scrollView.contentOffset.x / WIDTH;//本類 執行代理方法 賦值[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)];} }

---

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。