程式日誌--ios“頁面控制”程式

標籤：iphone30天精通   第13天+第14天的集合   

</pre>交代一下我做程式的工具：mac os x虛擬機器10.9.3         Xcode6         百度^-^         參考書iPhone30天精通：本程式是第13天+第14天的集合<p></p><p></p><p>這是參考書上的第13天的程式：書上的程式是為程式中的每一個視圖控制項頁面指定一個小圓點，並使用白色的原點來顯示當前頁面，點擊Page Control控制項上面的小圓點來引導程式翻頁。。。。但是，這種翻頁手段是在是不方便，所以頁面控制最好是滑動翻頁，接下來就做一個滑動和點擊小圓點都可以實現翻頁（UIScrollView和UIPageControl）的demo。</p><p></p><p>參考：http://www.gowhich.com/blog/522</p><p><span style="font-size:18px;"><span style="font-size:12px;">參考：http://blog.csdn.net/a351945755/article/details/8290552</span></span></p><p><span style="font-size:18px;"><span style="font-size:12px;"><span style="font-size:12px;"><span style="font-size:18px;"><span style="font-size:12px;"><span style="font-size:18px;"><span style="font-size:12px;">參考：</span></span></span></span>http://www.cnblogs.com/wendingding/p/3754210.html</span></span></span></p><p><span style="background-color:rgb(255,255,255)"><span style="font-size:18px;"><span style="font-size:12px;"><span style="font-size:12px;"></span></span></span></span></p><pre class="brush:cpp;toolbar:false"><span style="color:#009900;"><span style="font-size:18px;"><span style="font-size:12px;">參考：</span></span>http://blog.sina.com.cn/s/blog_87a824440101a0p5.html</span>

1.UIScrollView滾動視圖和UIPageControl分頁控制項的簡單應用

       

建立一個簡單的storyboard，在裡面添加一個UIViewContoller，在view裡面添加一個PageControl和一個ScrollView，並做連結。

//.h檔案

@property (strong, nonatomic) IBOutlet UIScrollView *pageScroll;//建立一個滾屏控制項的對象@property (strong, nonatomic) IBOutlet UIPageControl *pageControl;//建立小圓點控制項的對象

同時添加一個儲存要展示圖片的陣列變數

@property (strong, nonatomic) NSArray *photoList;- (IBAction)changePage:(id)sender;//建立人機互動的方法，監聽Page Control的value change事件

同時要加入

UIScrollViewDelegate

代理

基礎工作做完之後，開始我們的過程實現

初始化的工作如下：

- (void)viewDidLoad//視圖載入完成時調用的方法{    [super viewDidLoad];//預設語句// Do any additional setup after loading the view.    NSString *img1 = [[NSBundle mainBundle] pathForResource:@"bg_welcome1"                                                     ofType:@"png"];    NSString *img2 = [[NSBundle mainBundle] pathForResource:@"bg_welcome2"                                                     ofType:@"png"];    NSString *img3 = [[NSBundle mainBundle] pathForResource:@"bg_welcome3"                                                     ofType:@"png"];    //NSBundle其實是一個目錄類，其中包含程式中會使用到的資源，比像、聲音、編譯好的代碼、nib檔案等。    //對於mainbandel：在Finder中，一個應用程式看上去和其他檔案沒什麼區別，但是實際上它是一個包含了nib檔案，編譯代碼，以及其他資源的一個目錄，而我們把這個     目錄叫做程式的mainbandel。所以[NSBundle mainBundle]就是擷取本次project的目錄，而“pathForResource：檔案名稱 ofType：格式”方法就是擷取相應的檔案地址。    //綜上：擷取三個圖片的地址，並賦值給三個字串對象。        _photoList = [[NSArray alloc] initWithObjects:                  [UIImage imageWithContentsOfFile:img1],                  [UIImage imageWithContentsOfFile:img2],                  [UIImage imageWithContentsOfFile:img3],                  ,nil];    //“imageWithContentsOfFile：地址”方法是將地址所在圖片載入到UIImage對象上，然後由這些對象組成一個數組。（前三個數組元素）    //對於第四個數組元素，它調用程式本身的方法去得帶一個數組元素，後面再去講它。    //到現在為止，在視圖載入完成的時候，會產生一個裝有UIImage對象的數組。    NSInteger pageCount = [_photoList count];//建立了一個整形的對象，用來儲存數組裡面元素（圖片）的數量。    _pageControl.currentPage = 0;            //把第一個版面設定為當前頁面    _pageControl.numberOfPages = pageCount;  //設定一共有pageCount個頁面   //下面的代碼涉及到了OC裡面的一種類型CGRect                 _pageScroll.frame = CGRectMake(0.0,        //frame是該view在父view中的為止和大小。                                   0.0,        //CGRectMake定義（x，y，width，height）                                   320.0,                                   400.0);    _pageScroll.delegate = self;               //設定UIScrollView的代理為其對象本身。    for(NSInteger i=0;i<pageCount;i++)         //給每一個版面設定圖片    {        CGRect frame;                          //建立一個CGRect對象        frame.origin.x = _pageScroll.frame.size.width * i;        frame.origin.y = 0;        frame.size = _pageScroll.frame.size;    //這段代碼錶示以前面的pageScroll的尺寸為模板，縱座標不變，橫座標一次向右移動pageScroll的size，相當於以相同                                                //的大小，將這幾個圖片拼接起來，第一個圖片的橫縱座標都是0，因為0*width = 0；
                //這裡又出現了新的知識點：UIImageView的contentMode屬性        //這個屬性是用來設定圖片的顯示方式，如局中局右是否顯示縮放等    參考：http://blog.csdn.net/sqc3375177/article/details/17415635        //UIViewContentModeScaleAspectFill作用是圖片的比例保持不變，但是填充整個ImageView的內容可能會只顯示部分，有部分顯示不出來。        //因為前面對這些圖片的操作只是從project裡面以ImageView形式儲存到數組裡面，並沒有對圖片的大小做出規範，所以現在對UIImageView的frame做出規範，並且控        //制屬性，滿足圖片比例的同時填充滿UIImageView

        UIImageView *pageView；
        pageView.frame = frame；
        pageView.contentMode = UIViewContentModeScaleAspectFill;
        pageView = [[UIImageView alloc] initWithImage:[_photoList objectAtIndex:i]];//得到數組裡面的圖片對象（UIImageView對象的圖片）        [_pageScroll addSubview:pageView];//addSubview方法將UIImageView加到UIScrollView上面    }}-(void) viewWillAppear:(BOOL)animated   //系統預設的方法，視圖將要出現時調用的{    //下面的代碼就是把UIScrollView的尺寸設定成幾個UIImageView拼接成之後的尺寸    CGSize pageScrollViewSize = _pageScroll.frame.size;    _pageScroll.contentSize = CGSizeMake(pageScrollViewSize.width * _photoList.count, pageScrollViewSize.height);       //contentSize是UIScrollView可以滾動的地區。    //UIScrollView的大小實際就是frame的大小，上層固定不動，顯示的變化，由下層的滾動來控制。而下層滾動的地區的大小，就是由contentSize來控制的了。      [super viewWillAppear]; }

監控PageControl的方法

- (IBAction)changePage:(id)sender {    // 更新Scroll View到正確的頁面    CGRect frame;    frame.origin.x = _pageScroll.frame.size.width * _pageControl.currentPage;//_pageControl.currentPage = 0（前面定義的）    frame.origin.y = 0;    frame.size = _pageScroll.frame.size;    [_pageScroll scrollRectToVisible:frame animated:YES];//這個方法是切換圖片的話，就將圖片切換到指定的frame，YES表示開啟動畫效果，就是切換的時候不那麼生硬}

視圖滾動的方法

-(void) scrollViewDidScroll:(UIScrollView *)scrollView{    CGFloat pageWidth = _pageScroll.frame.size.width;//CGFloat就是CGRect的浮點型值     寬度    // 在滾動超過頁面寬度的50%的時候，切換到新的頁面    int page = floor((_pageScroll.contentOffset.x + pageWidth/2)/pageWidth) ;//floor是向下取整      _pageControl.currentPage = page;}

2.我自己的程式

<span style="color:#6600CC;">//  ViewController.h//  13////  Created by 李迪 on 15-7-29.//  Copyright (c) 2015年 李迪. All rights reserved.//#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UIScrollViewDelegate>{    IBOutlet UIPageControl *pageControl;    IBOutlet UIScrollView *scrollView;}@property UIPageControl *pageControl;@property(strong,nonatomic) UIScrollView *scrollView;@property NSArray *photoArray;-(IBAction)pageChange;//這裡的pageChange和上面的pageControl都是和UIPageControl相連的，這裡可以串連兩次，因為一個是屬性，一個是方法@end//  ViewController.m//  13////  Created by 李迪 on 15-7-29.//  Copyright (c) 2015年 李迪. All rights reserved./* 思路：通過storyboard和代碼的結合，實現UIPageControl和UIScrollView兩種翻頁方式 就要建立IBOutlet形式的UIPageControl和UIScrollView對象，並且在storyboard添加這兩個對象的控制項（雖然程式裡面設定了UISrollView的大小，但是在storyboard裡面還是要將UISrollView空間調整到相應的大小的，否則跟代碼編寫的還是不符）</span>

 將圖片添加到工程中，隨便添加到哪個檔案夾下面都可以，將圖片儲存到數組中，通過數組對圖片進行操作

<span style="color:#006600;"> 通過迴圈將數組裡面的圖片加到UIScrollView裡面 逐個實現兩種翻頁的方法，一個是IBAction，一個是實現代理  具體的再看下面的代碼 */#import "ViewController.h"@interface ViewController ()            @end@implementation ViewController@synthesize photoArray,scrollView,pageControl;            - (void)viewDidLoad {    [super viewDidLoad];    scrollView.delegate =self;  //設定scrollView的代理為self    scrollView.pagingEnabled =YES;  //pagingEnabled－scrollView的屬性－判斷是否啟用整頁翻動（預設為NO，這樣滑動翻頁的時候頁面翻動的很慢，所以傾向與開啟）    scrollView.showsHorizontalScrollIndicator = NO;    scrollView.showsVerticalScrollIndicator = NO;        //這兩個屬性 顯示水平滾動指標 顯示垂直滾動指標 不關閉就會顯示進度條        NSString *img1 = [[NSBundle mainBundle] pathForResource:@"11" ofType:@"png"];    NSString *img2 = [[NSBundle mainBundle] pathForResource:@"21" ofType:@"png"];    NSString *img3 = [[NSBundle mainBundle] pathForResource:@"31" ofType:@"png"];    NSString *img4 = [[NSBundle mainBundle] pathForResource:@"41" ofType:@"png"];        //將滑動用到的圖片添加到檔案夾內部後，用[[NSBundel mainBundel] pathForResource: ofType:]方法擷取到圖片的地址，然後賦值給字串對象        photoArray = [NSArray arrayWithObjects:                  [UIImage imageWithContentsOfFile:img1],                  [UIImage imageWithContentsOfFile:img2],                  [UIImage imageWithContentsOfFile:img3],                  [UIImage imageWithContentsOfFile:img4],nil];        //用［UIImage imageWithContentsOfFile:string］方法，通過地址得到映像對象，將映像對象添加到photoArray數組裡面，所以映像也是可以添加到數組裡面的        //這裡說一下，之前總是把UIImageView和UIImage搞混，UIImageView是視圖控制項，可以用它來儲存UIImage（映像類）的對象    NSInteger pageCount = [photoArray count];   //將數組裡的圖片個數單獨建立對象方便操作    pageControl.numberOfPages = pageCount;  //設定UIPageControl的小白點個數（頁數）    pageControl.currentPage = 0;    //設定當前頁為第一頁        scrollView.frame = CGRectMake(0, 0, 320, 443);  //設定介面座標和長寬（顯示介面）    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * pageCount, 0);//設定範圍           滑動外掛程式的顯示介面大小 和 可滑動大小是兩個概念！顯示介面大小是每一張圖片的大小，而後面有滑動範圍，就是所有的圖片平鋪在一起的大小        for (NSInteger i = 0; i<pageCount; i++) {//通過for迴圈來實現將每張圖片添加到UIScrollView上面        CGRect frame;        frame.origin.x = scrollView.frame.size.width * i;        frame.origin.y = 0;        frame.size = scrollView.frame.size;        //通過迴圈實現每一張圖片對應的frame的大小不變，橫座標改變的目的                UIImageView *imageDemo;        imageDemo = [[UIImageView alloc] initWithImage:[photoArray objectAtIndex:i]];        //把對應的圖片取出來給imageDemo，然後給imageDemo添加屬性        imageDemo.contentMode = UIViewContentModeScaleAspectFill;//圖片完全填充在imageDemo中        imageDemo.frame = frame;        //對於UIImageView的屬性、大小，一定要在UIImageView對象被賦值後才可以進行調整，否則就會出現顯示的視圖與目標視圖不相符的情況。        [scrollView addSubview:imageDemo];//將imageDemo添加到UIScrollView視圖上面    }    }//UIPageControl方法實現翻頁-(IBAction)pageChange{//    CGRect frame;//    frame.origin.y = 0;//    frame.origin.x = self.scrollView.frame.size.width * pageControl.currentPage;//    frame.size = self.scrollView.frame.size;//    [self.scrollView scrollRectToVisible:frame animated:YES];    //上面註解裡面的方法我的XCode運行後實現不了翻頁，只能使用下面的方法代替    [scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width * pageControl.currentPage, 0) animated:YES];    //直接調用UIScrollView的setContentOffset（設定內容位移，改變的是座標）   animated（動畫）使位移更流暢，而不顯得生硬}-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    CGFloat pageWidth = self.scrollView.frame.size.width;   //得到顯示視圖的寬度    int page = floor((self.scrollView.contentOffset.x + pageWidth/2)/pageWidth);//滑動超過視圖的一半就觸發翻頁    pageControl.currentPage = page;    //位移的一種演算法}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end</span>

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

程式日誌--ios“頁面控制”程式