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

页面滚动如图所示：