UIday0702:用 UIScrollView 和 UIPageControl 实现引导图

来源：互联网发布：2017最新网络综艺节目编辑：程序博客网时间：2024/05/22 10:35

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

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

0 0