UI之scrollPageControl

滚动轴 横向滑动页面

#import "MangoView.h"
#import "MangoViewController.h"
#define kWidth  self.frame.size.width
#define kHeight self.frame.size.height
@interface MangoView()
@property(nonatomic,retain)UIScrollView  *scrollView;
@property(nonatomic,retain)UIPageControl *pageControl;
@end
@implementation MangoView
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self loadingCustomView];
    }
    return self;
}
-(void)dealloc{
    [_pageControl release];
    [_scrollView release];
    [super dealloc];
}
- (void)loadingCustomView{
    self.backgroundColor = [UIColor orangeColor];
    //初始化UIScrollView并且设置frame大小
    self.scrollView = [[UIScrollView alloc]initWithFrame:self.frame];
    self.scrollView.backgroundColor = [UIColor yellowColor];
    self.scrollView.contentSize = CGSizeMake(kWidth*4, kHeight);
    //当contentSize大于scrollView时就可以滑动，如果只有宽度大于scrollView的宽度，那么只能左右滑动，如果只有高度大于scrollView的高度，那么只能上下滑动
    //滑动到顶部，只有scrollView上下滑动才有效果
    self.scrollView.scrollsToTop = YES;
    //是否整屏滑动，默认为NO
    self.scrollView.pagingEnabled = YES;
    //遇到边界是否弹回，默认YES是滑动到边界还可以继续滑动，但是松手的时候会自动弹回，如果NO滑到边界就停止，边界无法滑动
    self.scrollView.bounces = YES;
    //默认YES可以滑动，NO不可滑动
    self.scrollView.scrollEnabled = YES;
    //是否显示水平方向滚动条,默认为YES显示，NO不显示
    self.scrollView.showsHorizontalScrollIndicator = YES;

    //是否显示竖直方向滚动条，默认为YES显示，NO不显示
    self.scrollView.showsVerticalScrollIndicator = YES;
    //遇到边框是否反弹，默认为NO，contentSize内容的大小小于等于scrollView时仍然可以左右滑动边界
    self.scrollView.alwaysBounceHorizontal = YES;
    //竖直方向跟水平方向类似
    self.scrollView.alwaysBounceVertical = NO;
    //设置代理
    self.scrollView.delegate = self;
    //添加到当前视图上
    [self addSubview:self.scrollView];
    [self.scrollView release];
    //用for循环添加图片
   for (int i = 1; i < 5; i++) {
       UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(kWidth*(i-1), 0, kWidth, kHeight)];
       scrollView.contentSize = CGSizeMake(kWidth, kHeight);
       //最小缩小比例
       scrollView.minimumZoomScale = 0.5;
       //最大放大比例
       scrollView.maximumZoomScale = 2.0;
       //设置代理
       scrollView.delegate = self;
       //把每一个图片的scrollView添加到大的scrollView上
       [self.scrollView addSubview:scrollView];
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, kWidth, kHeight)];     
        imageView.tag = 110;
        NSString *str = [NSString  stringWithFormat:@"%d.png",i];
        //设置图片
        imageView.image = [UIImage imageNamed:str];
        [scrollView addSubview:imageView];
    }
    //创建pageControl
    self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, kHeight - 40, kWidth, 30)];
    //设置pageControl的页数
    self.pageControl.numberOfPages = 4;
    //未选中页面的颜色
    self.pageControl.pageIndicatorTintColor = [UIColor yellowColor];
    //当前页面的颜色
    self.pageControl.currentPageIndicatorTintColor = [UIColor orangeColor];
    self.pageControl.backgroundColor = [UIColor cyanColor];        

//页面控制条如图所示：

    [self.pageControl addTarget:self action:@selector(pageSelectAction:) forControlEvents:UIControlEventValueChanged];
    [self addSubview:self.pageControl];
    [self.pageControl release];

}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSLog(@"%s %d",__FUNCTION__,__LINE__);
    //第一步：获取scrollView页面的宽度
    CGFloat pageWidth = self.scrollView.frame.size.width;
    //第二步：contentOffSet是当前scrollView距离原点偏移的位置
    CGPoint offset = self.scrollView.contentOffset;
    //第三步：通过偏移量和页面宽度计算出当前页数
    NSInteger pageNum = offset.x/pageWidth;
    //第四步：修改pagecontrol的当前页
    self.pageControl.currentPage = pageNum;

}
//让scrollView的页面跟随pageControl的滚动移动
- (void)pageSelectAction:(UIPageControl *)pageControl{
    //第一步：获取pageControl点击的页面在第几页
    NSInteger pageNum = pageControl.currentPage;
    //第二步：获取页面的宽度
    CGFloat pageWigth = self.scrollView.frame.size.width;
    //让scrollView滚动到第几页
    self.scrollView.contentOffset = CGPointMake(pageNum*pageWigth, 0);

}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    //在scrollView上通过tag值寻找imageView
    UIImageView *zoomImageView = (UIImageView *)[scrollView viewWithTag:110];
    return zoomImageView;
}
@end

页面滚动如图所示：