滾動(dòng)視圖輪播圖片
滾動(dòng)視圖這個(gè)控件可以把它理解成小時(shí)候玩的那種照相機(jī)踩身,一共就幾張西游記的圖片,按一下快門(mén),圖片就會(huì)切換。
UIScrollView對(duì)象要設(shè)置的frame屬性針對(duì)的就好似照相機(jī)的取景器怔蚌,是不會(huì)滾動(dòng)的,會(huì)滾動(dòng)的是膠卷旁赊,也就是這里的content畫(huà)布桦踊,而放置圖片的UIImageView控件可以想象成膠卷上的一格格的區(qū)域,每一格就是一個(gè)UIImageView對(duì)象
1终畅、創(chuàng)建一個(gè)滾動(dòng)視圖對(duì)象籍胯,設(shè)置基本屬性
01. ...
02. UIScrollView *scrollview = [[UIScrollView alloc] init];
03. //設(shè)置滾動(dòng)視圖的位置,大小离福,和其他UIView控件類(lèi)似
04. scrollview.frame = CGRectMake(左上角坐標(biāo).x,左上角坐標(biāo).y,寬杖狼,高);
05. //設(shè)置滾動(dòng)的范圍,相當(dāng)于設(shè)置一張畫(huà)布的size,frame設(shè)置的可
以看成一個(gè)井口的大小术徊,而contentSize設(shè)置的是井底實(shí)際的大小本刽。
06. scrollview.contentSize = CGSize(寬,高);
07. ...
2赠涮、加載圖片,有幾張圖片暗挑,就需要幾個(gè)UIImageView控件笋除,UIImageView是隨著畫(huà)布一起滾動(dòng)的,即位置是定死在畫(huà)布上的炸裆。
01. ...
02. for(int i = 0; i < 圖片數(shù)量; i++)
03. {
04. //格式化圖片名
05. NSString *filename = [NSString stringWithFormat:(NSString *)string];
06. UIImage *image = [UIImage imagenamed:filename];
07. UIImageView *imageview = [[UIImageView alloc] initWithFrame:(CGRect)frame]];
08. imageview.image = image;
09. [self.scrollview addSubview:imageview];
10. ...
3垃它、最后將滾動(dòng)視圖顯示出來(lái),基本的圖片輪播就完成了烹看,至于其他的一些屬性国拇,視情況而定,比如整頁(yè)滾動(dòng)等惯殊。
01. ...
02. [self.view addSubview:self.scrollview];
03. ...
UIPageControl頁(yè)控件
具有挺大的缺點(diǎn)的:一般作為圖片輪播器的指示器酱吝,指示用戶(hù)當(dāng)前正在播放第幾張圖片;但是不會(huì)作為一個(gè)和用戶(hù)進(jìn)行交互的控件土思,原因在于頁(yè)控件點(diǎn)擊圓點(diǎn)的位置不精確务热,只能連續(xù)向左或向右點(diǎn)擊,無(wú)法跳轉(zhuǎn)點(diǎn)擊己儒。
為了使頁(yè)控件不會(huì)被其他滾動(dòng)視圖的畫(huà)布或者 UIImageView 控件遮擋住崎岂,頁(yè)控件是添加在最底層的 self.view 上的,并且將其置頂闪湾。
01. ...
02. UIPageControl *pagecontrol = [[UIPageControl alloc] initWithFrame:(CGRectMake)frame];
03. //默認(rèn)的頁(yè)控件是不顯示的冲甘,或者說(shuō)是透明的,需要設(shè)置頁(yè)碼數(shù),當(dāng)前頁(yè)碼數(shù)江醇,控件風(fēng)格
04. pagecontrol.numberOfPages = 圖片數(shù)量;
05. pagecontrol.currentPage = 0;
06. pagecontrol.pageIndicatorTintColor = [UIColor whiteColor];
07. pagecontrol.currentPageIndicatorTintColor = [UIColor greenColor];
08. //顯示并置頂
09. [self.view addSubview:pagecontrol];
10. [self.view bringSubviewToFront:pagecontrol];
11. ...
實(shí)現(xiàn)圖片水平切換時(shí)省艳,同時(shí)更改頁(yè)控件的頁(yè)碼
頁(yè)控件的頁(yè)碼更改發(fā)生在滾動(dòng)視圖滾動(dòng)時(shí),因此監(jiān)聽(tīng)視圖滾動(dòng)嫁审。
以協(xié)議代理的形式監(jiān)聽(tīng)滾動(dòng)
01. ...
02. //類(lèi)接受協(xié)議 <UIScrollViewDelegate>
03. //對(duì)滾動(dòng)視圖添加監(jiān)聽(tīng)對(duì)象
04. scrollview.delegate = self;
05. ...
06. //實(shí)現(xiàn)監(jiān)聽(tīng)并作出處理
07. - (void)scrollViewDidScroll:(UIScrollView *)scrollView
08. {
09. //當(dāng)滾動(dòng)視圖發(fā)生滾動(dòng)時(shí)執(zhí)行跋炕,這種滾動(dòng)是任意形式的,并不一定由觸摸屏幕拖拽產(chǎn)生
10. //涉及到頁(yè)控件律适,在滾動(dòng)視圖的配置中設(shè)置整頁(yè)滾動(dòng)scrollView.pagingEnabled = YES;
11. //水平切換辐烂,下一頁(yè)和上一頁(yè)的分界點(diǎn)在滾動(dòng)視圖的中點(diǎn),因此頁(yè)碼 = (滾動(dòng)視圖的偏移量.x + self.scrollview.frame.size.width / 2) / self.scrollview.frame.size.width捂贿;
12. CGFloat scrollW = self.scrollview.frame.size.width;
13. int page = (self.scrollview.contentOffset.x + scrollW / 2) / scrollW;
14. self.pagecontrol.currentPage = page; //更改當(dāng)前頁(yè)碼為切換后的頁(yè)碼
15. }
16. ...
需要注意的是:滾動(dòng)視圖中的 contentOffset 這個(gè)屬性纠修,偏移量指的是看的見(jiàn)的部分內(nèi)容的左上角相對(duì)于畫(huà)布的左上角的偏移
自動(dòng)圖片輪播器中可能存在圖片切換的不是很平滑,直接一閃而過(guò)厂僧,這是由于動(dòng)畫(huà)效果的原因扣草,因此對(duì)于存在動(dòng)畫(huà)效果的屬性推薦使用set方法,而不是使用點(diǎn)語(yǔ)法訪問(wèn)
01. ...
02. //切換圖片就是更改圖片與視口的相對(duì)位置颜屠,contentOffset
03. scrollview.contentOffset = 一個(gè)CGPoint變量 //直接賦值辰妙,就沒(méi)有動(dòng)畫(huà)效果
04. //事實(shí)上,iOS是提供了一個(gè)添加動(dòng)畫(huà)的set方法的
05. [scrollview setContentOffset:(CGPoint)point Animated:YES];
06. ...