IOS UI UIScrollView+UIPageControl组合使用
2015-08-22 21:52
543 查看
UIScrollView+UIPageControl组合使用在iOS中非常常见,比如淘宝主界面里的滚动广告,这是UIScrollView+UIPageControl组合的一个常见使用,另一种使用就是作为app安装第一次打开得引导页 这个组合的实现并不难,接下来就让我看看这种UI布局该怎么做出来 step1:当然是先创建一个ScrollView,要注意以下几个问题
图片尺寸和scrollView要做对,尤其是scrollView有两个大小,一个是自己的真实大小,另一个是装其他控件的真实大小,即contentSize
这样的组合一般 scrollView的高度是和图片高度相同的,不用理会,但是宽度要小于图片总和宽度,所有要取消掉scrollView下方的小滑条
pagingEnabled和bounces属性分别要设置为YES和NO,pagingEnabled功能是滑动的事后是分页的,不会滑到一半停止类似看大照片的情况,bounces功能是第一张和最后一张右滑和左滑不会露出难看的白色背景(默认是白色)
最后注意一点事设置自己的代理,否则滑动scrollView无法使PageControl跟着变化
_scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds]; //分页滚动 _scrollView.pagingEnabled = YES; _scrollView.bounces = NO; _scrollView.showsHorizontalScrollIndicator = NO; _scrollView.delegate = self; [self.view addSubview:_scrollView]; double w = _scrollView.frame.size.width; double h = _scrollView.frame.size.height; for (int i=0; i<4; i++) { UIImageView *back = [[UIImageView alloc] initWithFrame:CGRectMake(w*i, 0, w, h)]; back.image = [UIImage imageNamed:@"guide_bg.png"]; [_scrollView addSubview:back]; NSString *name = [NSString stringWithFormat:@"guideView_%d.png",i+1]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(w*i, 0, w, h)]; imageView.image = [UIImage imageNamed:name]; [_scrollView addSubview:imageView]; } //设置内容大小 _scrollView.contentSize = CGSizeMake(w * 4, h);
step2:创建一个UIPageControl,很简单,不做太多解释,上代码
CGSize size = self.view.frame.size; _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 0, 100, 20)]; _pageControl.center = CGPointMake(size.width/2, size.height - 40); _pageControl.numberOfPages = 4; [self.view addSubview:_pageControl]; //注意事件类型 [_pageControl addTarget:self action:@selector(dealPage:) forControlEvents:UIControlEventValueChanged];
step3:设置两个关联关系 一个是scrollView滑动会使pageControl圆点位置发生变化,另一个是反过来pageControl圆点位置发生变化会使scrollView发生滑动 这里记得要这个代理<UIScrollViewDelegate>
-(void)dealPage:(UIPageControl *)pc { //把序号转化为滚动视图x的偏移 double x = _scrollView.frame.size.width * pc.currentPage; [_scrollView setContentOffset:CGPointMake(x, 0) animated:YES]; }
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { int index = scrollView.contentOffset.x / scrollView.frame.size.width; _pageControl.currentPage = index; }
做成的效果图如下(只看两张吧 一共四张):
相关文章推荐
- GUI - Web前端开发框架
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 评价ui设计作品好坏的八个标准(界面/交互设计研究)
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 为Yahoo! UI Extensions Grid增加内置的可编辑器
- Cocos2d-x UI开发之文本类使用实例
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
- UI Events 用户界面事件
- 基于jQuery UI CSS Framework开发Widget的经验
- jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
- jQuery UI的Dialog无法提交问题的解决方法
- 关于jQuery UI 使用心得及技巧
- jQuery ui 1.7更新小结
- 从零开始学习jQuery (十) jQueryUI常用功能实战
- jquery ui对话框实例代码