UIday0702:用 UIScrollView 和 UIPageControl 实现引导图

引导页与轮播图的区别：引导图不能循环滚动，轮播图可以循环滚动播放

 CGFloat: 浮点值的基本类型
 CGPoint: 表示一个二维坐标系中的点
 CGSize: 表示一个矩形的宽度和高度
 CGRect: 表示一个矩形的位置和大小

UIPageControl的属性：

    // 显示有多少（页）点
    self.page.numberOfPages = 5;
    // 表示当前页数
    self.page.currentPage = 3;

RootViewController.m

#import "RootViewController.h"

@interface RootViewController ()<UIScrollViewDelegate>
@property(nonatomic,strong)RootView * rv;

@end

@implementation RootViewController

-(void)loadView{
    self.rv = [[RootView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.view = _rv;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置contentSize  图片滚动区域的大小
    self.rv.scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.rv.scrollView.frame)*7, CGRectGetHeight(self.rv.scrollView.frame));
    
    // 控制控件是否整夜翻动
    self.rv.scrollView.pagingEnabled = YES;
    
    // 设置代理
    self.rv.scrollView.delegate = self;
    
    for (int i = 0; i<7; i++) {
        // 图片名
        NSString * imageName = [NSString stringWithFormat:@"%d.jpeg",i];
        
        // 创建imageView
        UIImageView * iv = [[UIImageView alloc]initWithImage:[UIImage imageNamed:imageName]];
        
        // 把图片挨个放到UIScrollView控件上
        iv.frame = CGRectMake(CGRectGetWidth(self.rv.scrollView.frame)*i, 0, CGRectGetWidth(self.rv.scrollView.frame), CGRectGetHeight(self.rv.scrollView.frame));
        
        // 让UIImageView控件在scrollView控件上显示
        [self.rv.scrollView addSubview:iv];
    }
    
    // pageControl控件的页数
    self.rv.page.numberOfPages = 7;
    
    // 为page添加点击事件
    [self.rv.page addTarget:self action:@selector(pageAction:) forControlEvents:UIControlEventTouchUpInside];
}

// 点击pageControl时，图片同步偏移滚动
-(void)pageAction:(UIPageControl *)sender{
    NSLog(@"***%ld",sender.currentPage);
    // 添加动画
    [UIView animateWithDuration:0.3 animations:^{
        // 设置page偏移量，为CGRectGetWidth(self.rv.scrollView.frame)*sender.currentPage
        self.rv.scrollView.contentOffset = CGPointMake(CGRectGetWidth(self.rv.scrollView.frame)*sender.currentPage, 0);
    }];
}

// 结束减速
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
}

// 将当前是第几页图片跟pageControl对应起来，否则pageCtrol显示和scrollView显示的页数对不上
// 拖动scrollView上的图片时，pageControl页数同时变动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
   // 当前为第几页
    self.rv.page.currentPage = (NSInteger)(scrollView.contentOffset.x/CGRectGetWidth(scrollView.frame));
    NSLog(@"---%ld",self.rv.page.currentPage);
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

RootView.h

#import <UIKit/UIKit.h>

@interface RootView : UIView

@property(nonatomic,strong)UIScrollView * scrollView;
@property(nonatomic,strong)UIPageControl * page;

@end

RootView.m

#import "RootView.h"

@implementation RootView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self p_setupViews];
    }
    return self;
}
-(void)p_setupViews{
    self.backgroundColor = [UIColor yellowColor];
    
    self.scrollView = [[UIScrollView alloc]init];
    self.scrollView.frame = self.bounds;
    self.scrollView.backgroundColor = [UIColor grayColor];
    [self addSubview:_scrollView];
    
    
    //  pageControl
    self.page = [[UIPageControl alloc]init];
    self.page.frame = CGRectMake(0, CGRectGetMaxY(self.frame)-50, CGRectGetWidth(self.frame), 50);
    self.page.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];
    [self addSubview:_page];
    
    
}

@end