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

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

ScrollView圖片分頁

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

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

     NSArray *imageArr=@[@"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)] ;
}

　看下具體的效果: