ScrollView图片分页显示-简单
用到的控件:
1>UIScrollView:宽度和图片的宽度一样,因为分页的代码就一句
// 设置分页,这个分页的原理实际上是按照ScrollView的宽进行分页的,这里的图片的宽由于和ScrollView的宽式一样的所以刚好分页显示图片了
_scrollView.pagingEnabled = YES;
2>UIImageView:用来放图片的
3>UIPageControl,页码显示控件
=======================
关键部分:监听ScrollView的滚动,来告诉页码显;监听的方法:
scrollViewDidScroll // 实现协议里的监听滚动的方法,这个方法是ScrollView在滚动时,会被调用
全部代码:
#import "CXBViewController.h" #define pCount 5 // 分页显示的图片张数,或者是页数 @interface CXBViewController () <UIScrollViewDelegate> { UIPageControl *_pageControl; } @end @implementation CXBViewController - (void)viewDidLoad { [super viewDidLoad]; // 为scrollView添加图片 // 设置图片的宽和高 CGFloat w = self.view.frame.size.width; CGFloat h = self.scrollView.bounds.size.height; for (int i = 0; i < pCount; i++) { UIImageView *imageView = [[UIImageView alloc] init]; // 定义图片名,通过循环把所有的图片添加到scrollView中 NSString *imageName = [NSString stringWithFormat:@"img_%02d", i + 1 ]; imageView.frame = CGRectMake(i*w, 0, w, h); imageView.image = [UIImage imageNamed:imageName]; [self.scrollView addSubview:imageView]; } // contentSize的y值为0表示在垂直方向上不做滚动 self.scrollView.contentSize = CGSizeMake(pCount * w, 0); // 禁用滚动条,只设置水平方向的滚动条即可,竖直方向的滚动范围是0,所以没必要设置 self.scrollView.showsHorizontalScrollIndicator = NO; // 设置分页,这个分页的原理实际上是按照ScrollView的大小分页的,这里的图片的宽由于和ScrollView的宽式一样的所以刚好分页显示图片了 _scrollView.pagingEnabled = YES; // 添加分页表示符 UIPageControl *pageControl = [[UIPageControl alloc] init]; // 让它居中,就设置center属性 pageControl.center = CGPointMake(w * 0.5, h - 20); pageControl.bounds = CGRectMake(0, 0, 120, 20); // 设置显示的点的个数 pageControl.numberOfPages = pCount; // 禁止点击 pageControl.enabled = NO; pageControl.pageIndicatorTintColor = [UIColor grayColor]; pageControl.currentPageIndicatorTintColor = [UIColor brownColor]; _pageControl = pageControl; // 这里添加到view中,不能添加到ScrollView中,否则会随着滚动而消失 [self.view addSubview:pageControl]; // 监听ScrollView的滚动,来告诉页码显示 // 设置代理 _scrollView.delegate = self; } // 实现协议里的监听滚动的方法,这个方法是ScrollView在滚动时,会被调用 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // 用contentOffset来计算当前的页码 int pageCount = self.scrollView.contentOffset.x/self.scrollView.bounds.size.width; _pageControl.currentPage = pageCount; } @end
这个简单的图片分页适合图片较少,在10张以内的;日后的笔记中会进行优化,只用两个UIImageView来循环显示图片即可;