IOS 图片切换展示的实现
2015-02-27 10:51
162 查看
先看看我们的效果
这种图片切换经常出现商城或者论坛的首页用于展示
分析
这里我用了UIScrollView和pageControll实现了一种平铺导航,涉及到两种操作:1 点击pageControl换页
2 换页转换pageControll
实现
#import "ViewController.h" #define WEIGHT [UIScreen mainScreen].bounds.size.width #define HEIGHT [UIScreen mainScreen].bounds.size.height @interface ViewController ()<UIScrollViewDelegate> @end @implementation ViewController @synthesize topDisplayScroller; @synthesize page; - (void)viewDidLoad { [super viewDidLoad]; [self createTopIndex]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } #pragma mark- 创建主页上方滑动视图 /* * 原理:创建一个分page的,scrollView , 在创建一个浮在上面的pageController————滑动展示 */ -(void)createTopIndex { topDisplayScroller.contentSize=CGSizeMake(WEIGHT*5, topDisplayScroller.frame.size.height); topDisplayScroller.pagingEnabled=YES;//允许分页滑动 for (int i=0; i<5; i++) { UIImageView *ImagePage=[[UIImageView alloc]initWithFrame:CGRectMake(WEIGHT*i, 0, WEIGHT, topDisplayScroller.frame.size.height)]; ImagePage.image=[UIImage imageNamed:@"1"]; [topDisplayScroller addSubview:ImagePage]; } /* * 注明:添加pageControl,但是不能添加到scroller的内容视图上,为啥呢?因为添加到上面去以后pageControl会随之滑动 */ page=[[UIPageControl alloc]initWithFrame:CGRectMake(WEIGHT/6, 20+topDisplayScroller.frame.size.height*2/3, 50, 20)]; page.numberOfPages=5; page.currentPageIndicatorTintColor=[UIColor orangeColor]; page.pageIndicatorTintColor=[UIColor whiteColor]; [self.page addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged]; [self.view addSubview:page]; } /* * 功能:滑动scroller,带动pageControl */ -(void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint offset=scrollView.contentOffset; self.page.currentPage=offset.x/WEIGHT; } /* * 功能:点击pageControll,动画 */ - (void)changePage:(id)sender { [UIView animateWithDuration:0.3f animations:^{ NSInteger whichPage = self.page.currentPage; topDisplayScroller.contentOffset = CGPointMake(WEIGHT* whichPage, 0.0f); }]; } @end
源代码:
https://git.oschina.net/zhengaoxing/IOS_TopIndex本文原创,转载请注明出处:http://blog.csdn.net/zhenggaoxing/article/details/43965373
相关文章推荐
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- [Android UI]可自动切换、无限滑动的图片广告展示栏的实现分享(续1)
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动
- IOS UIScroView 实现循环滚动 实现固定相框切换图片
- iOS全屏展示图片(三种情况实现)
- iOS开发之实现图片自动切换(类似android画廊效果)
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动 - 郭晓
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动
- ImageView 实现简单 图片切换展示
- iOS开发之实现图片自动切换(类似android画廊效果)
- jQuery实现图片渐入渐出切换展示效果
- iOS-利用UIScrollView实现展示图片的无限滚动及自动滚动
- iOS uitableview自定义相册(实现拍照并保存在指定目录以相册的形式展示图片)
- jQuery实现图片渐入渐出切换展示效果
- iOS实现图片自动轮播展示
- IOS APP 国际化(实现不跟随系统语言,不用重启应用,代码切换stroyboard ,xib ,图片,其他资源)
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- iOS开发中实现新闻图片的无限循环展示的方法
- 实现图片滑动切换展示效果
- Ajax无刷新实现图片切换特效