iOS開發-圖片查看(ScrollView+UIPageControl)

標籤：

上周沒事寫了一個簡單的圖片查看，上次的查看只用到了一個UIImageView，不斷的替換背景圖片，實現圖片之間的切換。通過ScrollView可以很簡單的是實現圖片之間的查看，設定setPagingEnabled通過座標，寬度的設定，可以簡單實現一個圖片的簡單分頁查看顯示，當然如果你有需求說需要進行所謂的無限迴圈，在開始和結束的時候的設定一下事件，常用的新聞用戶端，圖片新聞查看的時候很少有進行最後的時候跳到第一頁，一般都是最後的時候都是推薦相關內容，多說了兩句，開始吧:

ScrollView圖片分頁

控制項跟上篇文章一樣，就是ScrollView：

拖入三張圖片到項目中，之前的文章有示範，下次寫部落格的考慮換圖,初始化ScrollView：

     NSArray *[email protected][@"girl0.jpg",@"girl1.jpg",@"girl2.jpg"];    CGFloat width=self.scrollView.bounds.size.width;    CGFloat height=self.scrollView.bounds.size.height;    for (NSInteger i=0; i<[imageArr count]; i++) {          UIImage *image=[UIImage imageNamed:imageArr[i]];        UIImageView *imageView=[[UIImageView alloc] initWithImage:image];                [imageView setFrame:CGRectMake(i*width, 0, width, height)];        [_scrollView addSubview:imageView];    }

　這裡沒有寫注釋，稍微多說一句就是bounds是邊界，可以理解為就是控制項中的ScrollView的寬度和高度，也就是上一張圖片展示的寬度和高度,設定周圍的邊界:

   [self.scrollView setBounces:NO];

　設定水平方向的捲軸:

    [self.scrollView setShowsHorizontalScrollIndicator:NO];

設定ScrollView的總體的寬度(關鍵)：

   [self.scrollView setContentSize:CGSizeMake([imageArr count]*width, height)];

設定分頁:

 [self.scrollView setPagingEnabled:YES];

示範效果:

UIPageControl和ScrollView圖片分頁

UIPageControl如果稍微弄過點前端可以理解為焦點圖，大概通過指示，iOS中是小圓點，Android需要美工給自己切圖或者說自力更生，iOS相對來說還是比較人性的，先定義一個UIPageControl：

@property (nonatomic,strong) UIPageControl *pageControl;

 初始化UIPageControl設定大小和位置：

  self.pageControl=[[UIPageControl alloc] init];    self.pageControl.backgroundColor=[UIColor clearColor];        [self.pageControl setBounds:CGRectMake(0, 0,200, 100)];    [self.pageControl setCenter:CGPointMake(width/2,height/2+200.0)];

　設定當前頁和頁大小:

 self.pageControl.numberOfPages=[imageArr count];    self.pageControl.currentPage=0;

設定當前指示和其他指示:

   [self.pageControl setCurrentPageIndicatorTintColor:[UIColor greenColor]];        [self.pageControl setPageIndicatorTintColor:[UIColor yellowColor]];

設定滑動的時候改變UIPageControl和通過UIPageControl改變ScrollView:

    [_scrollView setDelegate:self];    [self.pageControl addTarget:self action:@selector(switchPage:) forControlEvents:UIControlEventValueChanged];    [self.view addSubview:_pageControl];

滑動的時候改變UIPageControl指示通過委託設定，具體可參考上篇文章:

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{    NSInteger currentPage=scrollView.contentOffset.x/self.view.bounds.size.width;    [self.pageControl setCurrentPage:currentPage];}

UIPageControl改變ScrollView:

- (void)switchPage:(id)sender{    UIPageControl *currentControl=(UIPageControl *)sender;    NSInteger currentPage=currentControl.currentPage;    [_scrollView setContentOffset:CGPointMake(currentPage*self.view.bounds.size.width, 0)] ;}

　看下具體的效果:

iOS開發-圖片查看(ScrollView+UIPageControl)