UIScrollView —— 分页控件详解(三)——(第一讲)
1 、 所用知识
须知,要达到分页效果,所以会用到UIScrollView的ContentOffset属性,设置其UIScrollView分页移动位置,要有页码就用到了UIPageControl控件显示页码条,而且不要开始不要忘记了设置UIScrollView的属性ContentSize来设置其展示内容范围,要让UIScrollView达到分页效果,还要设置其属性pagingEnabled为YES。
2 、 案例详情
1> 在storyboard上拖拽一个UIScrollView和UIPageControl控件,然后将其连线到控制器扩展中,作为其属性使用。如下图所示:
2> 参照viewController.m代码实现
1 #import "ViewController.h" 2 3 //#define kImageCount 5 4 #define IMAGE_COUNT 5 5 @interface ViewController ()<UIScrollViewDelegate> 6 @property (weak, nonatomic) IBOutlet UIScrollView *sc; 7 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; 8 9 // 监听UIPageControl页码的变化 10 //- (IBAction)pageControlClick:(UIPageControl *)sender; 11 12 @end 13 14 @implementation ViewController 15 16 - (void)viewDidLoad { 17 [super viewDidLoad]; 18 19 self.sc.showsHorizontalScrollIndicator = NO; 20 self.sc.showsVerticalScrollIndicator = NO; 21 22 // Do any additional setup after loading the view, typically from a nib. 23 CGFloat width = self.sc.frame.size.width; 24 CGFloat height = self.sc.frame.size.height; 25 26 // 1.初始化子控件, 添加图片 27 for (int i = 0; i < IMAGE_COUNT; i++) { 28 // 1.创建UIImageView 29 UIImageView *iv = [[UIImageView alloc] init]; 30 // 2.创建图片 31 UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"img_%02i", i + 1]]; 32 // 3.设置每个UIImageView的frame 33 iv.frame = CGRectMake(i * width, 0, width, height); // 按照宽度分页 34 iv.image = image; 35 // 4.添加到父控件 36 [self.sc addSubview:iv]; 37 } 38 39 // 2.设置滚动范围 40 self.sc.contentSize = CGSizeMake(IMAGE_COUNT * width, height); 41 self.sc.bounces = NO; 42 self.sc.pagingEnabled = YES; 43 44 // 3.监听PageControl的点击事件 45 [self.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged]; 46 self.pageControl.numberOfPages = IMAGE_COUNT; 47 48 /* 49 // 设置未显示的页码颜色 50 self.pageControl.pageIndicatorTintColor = [UIColor blackColor]; 51 // 设置当前显示的页码颜色 52 self.pageControl.currentPageIndicatorTintColor = [UIColor purpleColor]; 53 */ 54 55 // 通过KVC给UIPageControl的私有属性赋值, 设置自定义图片 56 [self.pageControl setValue:[UIImage imageNamed:@"current"] forKeyPath:@"_currentPageImage"]; 57 [self.pageControl setValue:[UIImage imageNamed:@"other"] forKeyPath:@"_pageImage"]; 58 } 59 60 #pragma mark - UIScrollViewDelegate 61 // 只要滚动就会调用 62 - (void)scrollViewDidScroll:(nonnull UIScrollView *)scrollView 63 { 64 // 1.计算页码 65 // 当前页码 = 偏移位 / UIScrollView的宽度 66 CGFloat page = scrollView.contentOffset.x / scrollView.frame.size.width; 67 int currnetPage = page + 0.5; 68 69 // 2.修改页码 70 self.pageControl.currentPage = currnetPage; 71 } 72 73 #pragma mark - 内部监听 74 - (IBAction)pageControlClick:(UIPageControl *)sender { 75 NSLog(@"%lu", sender.currentPage); 76 self.sc.contentOffset = CGPointMake(sender.currentPage * self.sc.frame.size.width , 0); 77 } 78 @end
下一章节,讲解使用UIScrollView实现图片轮播器,待续。^_^