UIScrollView和UIPageControl的使用（实现图片的循环滚动）

Posted 2020-06-21

第一、UIScrollView的基本概念

 

是一个可以选择滑动的视图，用于显示更多的内容，可以通过手势放大或者缩小显示更多的内容。

 

有两个子类一个是UITableView，另一个是UITextView

 

第二、基本属性：

 

    scrollView=[[[UIScrollViewalloc] initWithFrame:CGRectMake(0,0, 320,250)] autorelease];

 

    scrollView.backgroundColor=[UIColorredColor];

 

    //设置内容的大小

 

    scrollView.contentSize=CGSizeMake(320*4,250);

 

    //当超出边界时表示是否可以反弹

 

    scrollView.bounces=YES;

 

    //是否分页

 

    scrollView.pagingEnabled=YES;

 

    //是否滚动

 

    scrollView.scrollEnabled=YES;

 

    //是否显示边界

 

    scrollView.showsHorizontalScrollIndicator=YES;

 

    //设置indicator的风格

 

    scrollView.indicatorStyle=UIScrollViewIndicatorStyleWhite;

 

 1 #import <UIKit/UIKit.h>
 2 #define WIDTH self.view.bounds.size.width
 3 #define HEIGHT self.view.bounds.size.height
 4 @interface ViewController : UIViewController<UIScrollViewDelegate>
 5 @property(strong,nonatomic) UIScrollView *scollView;
 6 @property(strong,nonatomic) UIPageControl *pageControl;
 7 @property(strong,nonatomic) NSMutableArray *imageArray;//存储图片的集合
 8 @property(assign,nonatomic) int currentPage;//当前页码
 9 @property(strong,nonatomic) UIImageView *firstImage;//第一张图片
10 @property(nonatomic,strong) UIImageView * secondImage;//第二张图片
11 @property(nonatomic,strong) UIImageView * thirdImage;//第三张图片
12 @end

 1 #import "ViewController.h"
 2 
 3 @interface ViewController ()
 4 
 5 @end
 6 
 7 @implementation ViewController
 8 
 9 - (void)viewDidLoad {
10     [super viewDidLoad];
11     //设置每张视图的大小
12     self.scollView=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 30, WIDTH, (HEIGHT-30)/2)];
13     self.scollView.backgroundColor=[UIColor grayColor];
14     //设置内容面板有几张
15     self.scollView.contentSize=CGSizeMake(WIDTH*3, 0);
16     //设置分页
17     self.scollView.pagingEnabled=YES;
18     //指定代理
19     self.scollView.delegate=self;
20     //隐藏滚动条
21     self.scollView.showsHorizontalScrollIndicator=NO;
22     [self.view addSubview:self.scollView];
23     
24     //设置分页的位置
25     self.pageControl=[[UIPageControl alloc] initWithFrame:CGRectMake(WIDTH-100, HEIGHT/2-30, 100, 40)];
26     //分页
27     self.pageControl.numberOfPages=4;
28     //设置当前页
29     self.pageControl.currentPage=0;
30     //指定页码颜色
31     self.pageControl.currentPageIndicatorTintColor=[UIColor redColor];
32     self.pageControl.pageIndicatorTintColor=[UIColor greenColor];
33     [self.view addSubview:self.pageControl];
34     
35     //初始化存储图片的集合
36     self.imageArray=[NSMutableArray arrayWithCapacity:4];
37     for (int i=1; i<5; i++) {
38         UIImage *image=[UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
39         [self.imageArray addObject:image];
40     }
41     NSLog(@"%@",self.imageArray);
42     self.firstImage=[[UIImageView alloc] init];
43     self.secondImage=[[UIImageView alloc] init];
44     self.thirdImage=[[UIImageView alloc] init];
45     //当前页码为0
46     self.currentPage=0;
47     [self reloadImage];
48     
49 }

 1 -(void)reloadImage
 2 {
 3     //第一种情况 第一页
 4     if (self.currentPage==0) {
 5         self.firstImage.image=[self.imageArray lastObject];
 6         self.secondImage.image=[self.imageArray objectAtIndex:self.currentPage];
 7         self.thirdImage.image=[self.imageArray objectAtIndex:self.currentPage+1];
 8     }else if(self.currentPage==self.imageArray.count-1)
 9     {
10        //第二种情况
11         self.firstImage.image=[self.imageArray objectAtIndex:self.currentPage-1];
12         self.secondImage.image=[self.imageArray objectAtIndex:self.currentPage];
13         self.thirdImage.image=[self.imageArray objectAtIndex:0];
14     }else
15     {
16        //第三种情况
17         self.firstImage.image=[self.imageArray objectAtIndex:self.currentPage-1];
18         self.secondImage.image=[self.imageArray objectAtIndex:self.currentPage];
19         self.thirdImage.image=[self.imageArray objectAtIndex:self.currentPage+1];
20     }
21     
22     self.firstImage.frame=CGRectMake(0, 0, WIDTH, (HEIGHT-30)/2);
23     self.secondImage.frame=CGRectMake(WIDTH, 0, WIDTH, (HEIGHT-30)/2);
24     self.thirdImage.frame=CGRectMake(WIDTH*2, 0, WIDTH, (HEIGHT-30)/2);
25     
26     [self.scollView addSubview:self.firstImage];
27     [self.scollView addSubview:self.secondImage];
28     [self.scollView addSubview:self.thirdImage];
29     
30     self.scollView.contentOffset=CGPointMake(WIDTH, 0);
31 }

 1 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
 2 {
 3     float x=self.scollView.contentOffset.x;
 4     //向左翻
 5     if (x<0||x==0) {
 6         if (self.currentPage==0) {
 7             self.currentPage=(int)self.imageArray.count-1;
 8         }else
 9         {
10             self.currentPage--;
11         }
12     }
13     //向右
14     if (x>WIDTH*2||x==WIDTH*2) {
15         if (self.currentPage==(int)self.imageArray.count-1) {
16             self.currentPage=0;
17         }else
18         {
19             self.currentPage++;
20         }
21     }
22     self.pageControl.currentPage=self.currentPage;
23     [self reloadImage];
24     
25 }