UIScrollView和UIPageControl筆記

滾動(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ì)象

玩具照相機(jī)

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. ...
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末甫窟,一起剝皮案震驚了整個(gè)濱河市密浑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌粗井,老刑警劉巖尔破,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異浇衬,居然都是意外死亡懒构,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)耘擂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)胆剧,“玉大人,你說(shuō)我怎么就攤上這事梳星≡蘩担” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵冤灾,是天一觀的道長(zhǎng)前域。 經(jīng)常有香客問(wèn)我,道長(zhǎng)韵吨,這世上最難降的妖魔是什么匿垄? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上椿疗,老公的妹妹穿的比我還像新娘漏峰。我一直安慰自己,他們只是感情好届榄,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布浅乔。 她就那樣靜靜地躺著,像睡著了一般铝条。 火紅的嫁衣襯著肌膚如雪靖苇。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,155評(píng)論 1 299
  • 那天班缰,我揣著相機(jī)與錄音贤壁,去河邊找鬼。 笑死埠忘,一個(gè)胖子當(dāng)著我的面吹牛脾拆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播莹妒,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼名船,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了动羽?” 一聲冷哼從身側(cè)響起包帚,我...
    開(kāi)封第一講書(shū)人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎运吓,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體疯趟,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拘哨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了信峻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片倦青。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖盹舞,靈堂內(nèi)的尸體忽然破棺而出产镐,到底是詐尸還是另有隱情,我是刑警寧澤踢步,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布癣亚,位于F島的核電站,受9級(jí)特大地震影響获印,放射性物質(zhì)發(fā)生泄漏述雾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望玻孟。 院中可真熱鬧唆缴,春花似錦、人聲如沸黍翎。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)匣掸。三九已至趟紊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間旺聚,已是汗流浹背织阳。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留砰粹,地道東北人唧躲。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像碱璃,于是被迫代替她去往敵國(guó)和親弄痹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)嵌器、插件肛真、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,093評(píng)論 4 62
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,072評(píng)論 25 707
  • 在那段迷途的路里 等待疑似落空的夢(mèng) 青春不知季節(jié)的時(shí)空 天空長(zhǎng)滿紫色的花 路邊銀白的樹(shù)下 霧氣彌漫 孤獨(dú)的等待一個(gè)...
    夜子寒p閱讀 303評(píng)論 3 2
  • 《縹緲驚瀾吟》 (申令安)著 第...
    如癡如醉_4f9f閱讀 460評(píng)論 0 1
  • 目標(biāo)是關(guān)于此時(shí)此刻的蚓让,而非遙不可及的未來(lái)。每當(dāng)我看到有公司把“成為受人尊敬的公司”作為企業(yè)文化我就想吐讥珍。這樣就意味...
    勇赴閱讀 441評(píng)論 4 3