首页 > 代码库 > UIScrollVIew和UIPageControl学习使用
UIScrollVIew和UIPageControl学习使用
概要
对于同一个页面需要展示很多图片信息、子视图等的这样的需求,我们可以采用控件
UIScrollVIew
,与之常常一起使用的控件是UIPageControl
,UIScrollVIew
里面可以存放多个子视图,通过设置页模式,以及子页面在UIScrollVIew
的content
位置,可以在滑动控件UIScrollVIew
的时候切换子视图。为了交互友好,常常和控件UIPageControl
一起使用,该控件是一组指示器,一般指示器个数对应于上述的子页面个数,通过改组指示器可以看到当前子页面的位置以及整个UIScrollVIew
的子视图情况。结果展示
流程概要
UIScrollVIew
是存放需要显示的界面的,UIPageControl
指示的是UIScrollVIew
的子视图信息,包括当前页、总页数- 要使得
UIScrollVIew
支持页模式需要将属性pagingEnabled
设为YES,这样滚动都是按页滚动的 - 往
UIScrollVIew
添加页(子视图)的时候需要知道,因为该控件的分页和翻页是根据content区域构建的,所以每个页都有自己的页区域,而且这些也一般设为连续的,所以记得设置子页的frame
为content
的某区域,而且UIScrollVIew
的content
要刚好容纳子页。如果content
过大,导致子页翻完了,还能翻到空白区;小了,则部分视图不会显示了。 - 一开始我通过重写方法
- (void) addSubview:(UIView *)view
添加子页的,不过发现UIScrollVIew
子页数不对,后来才发现有程序自动调用了该方法,导致子页数不对(好像多了两个子页)。所以后来修改方法为- (void) addSubview:(UIView *)view forCurrent:(BOOL)current
。 为了能够手动设置控件
UIScrollVIew
显示的子页,需要使用方法scrollRectToVisible:animated:
,其中rect是指子页的位置,如CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height); /** 移到可视区 */ [self scrollRectToVisible:rect animated:animated];
为了更新控件
UIScrollVIew
和UIPageControl
,需要给他们分别设置代理和方法。给控件UIScrollVIew
设置代理,同时实现方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView
;给控件UIPageControl
添加方法- (void) onChangePage
,如:#pragma 实现协议UIScrollViewDelegate - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSInteger page = scrollView.contentOffset.x / _pageView.pageSize.width; if(page != _pageController.currentPage) { _pageController.currentPage = page; }; } - (void) onChangePage { [_pageView setCurrentPage:_pageController.currentPage animated:YES]; }
主要代码
自定义的UIScrollView
// // PageView.m // PageView 继承自 UIScrollView // // Created by arbboter on 14/12/24. // Copyright (c) 2014年 arbboter. All rights reserved. // #import "PageView.h" @interface PageView () @end @implementation PageView - (id) initWithFrame:(CGRect)frame { if(self=[super initWithFrame:frame]) { /** 页模式 */ self.pagingEnabled = YES; self.pageSize = frame.size; } return self; } /* 默认的addSubview:方法会被调用, 所以为了区分所需的添加照片,重载或者定义其他方法 */ - (void) addSubview:(UIView *)view forCurrent:(BOOL)current { NSInteger nPage = [self.subviews count]; /** 新添加的子页都对应content的某个区域 */ view.frame = CGRectMake(nPage*_pageSize.width, 0, _pageSize.width, _pageSize.height); nPage++; self.contentSize = CGSizeMake(nPage*_pageSize.width, _pageSize.height); [super addSubview:view]; if(current) { [self setCurrentPage:nPage-1 animated:NO]; } } /** 设置页面page可见,需要把视图的content的对应部分移到可视区 */ - (void) setCurrentPage:(NSInteger)page animated:(BOOL)animated { if(page >= [self.subviews count]) { return; } CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height); /** 移到可视区 */ [self scrollRectToVisible:rect animated:animated]; } @end
程序控制类
// // ViewController.m // PageView // // Created by arbboter on 14/12/24. // Copyright (c) 2014年 arbboter. All rights reserved. // #import "ViewController.h" #import "PageView.h" @interface ViewController () <UIScrollViewDelegate> @property (nonatomic, retain) PageView* pageView; @property (nonatomic, retain) UIPageControl* pageController; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. CGRect frame = self.view.frame; PageView* scrollView = [[PageView alloc] initWithFrame:frame]; self.pageView = scrollView; /** 设置代理,使得视图滚动时更新其他控件 */ scrollView.delegate = self; [self.view addSubview:scrollView]; [scrollView release]; frame.origin.y += frame.size.height*7/8; frame.size.height = frame.size.height/8; UIPageControl* pageCtrl = [[UIPageControl alloc] initWithFrame:frame]; self.pageController = pageCtrl; /** 非当前页的指示器颜色 */ pageCtrl.pageIndicatorTintColor = [UIColor blueColor]; /** 当前页的指示器颜色 */ pageCtrl.currentPageIndicatorTintColor = [UIColor greenColor]; [self.view insertSubview:pageCtrl aboveSubview:self.pageView]; /** 页面指示器变化时,scroll更新 */ [pageCtrl addTarget:self action:@selector(onChangePage) forControlEvents:UIControlEventValueChanged]; [pageCtrl release]; /** 加载图片 */ int nImage = 8; NSString* imageName = nil; for (int i=0; i<nImage; i++) { imageName = [[NSString alloc] initWithFormat:@"%d.jpg", i+1]; UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.pageView.frame]; imageView.contentMode = UIViewContentModeScaleAspectFit; imageView.image = [UIImage imageNamed:imageName]; imageView.backgroundColor = [UIColor colorWithRed:(arc4random()%30)/100 green:(arc4random()%30)/100 blue:(arc4random()%30)/100 alpha:1.0]; [self.pageView addSubview:imageView forCurrent:NO]; [imageView release]; [imageName release]; } /** 设置页指示器总个数 */ self.pageController.numberOfPages = [self.pageView.subviews count]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } #pragma 实现协议UIScrollViewDelegate - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSInteger page = scrollView.contentOffset.x / _pageView.pageSize.width; if(page != _pageController.currentPage) { _pageController.currentPage = page; }; } - (void) onChangePage { [_pageView setCurrentPage:_pageController.currentPage animated:YES]; } @end
项目工程
UIScrollVIew和UIPageControl学习使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。