效果图
需求:
实现手动图片轮播的功能
点击,进入/跳过,直接进入主界面!
思路:
- 显示图片(纯代码显示图片)
创建imageView -> 创建image -> 设置imageView的frame -> 添加到self.view上面. - 实现轮播效.
- 设置contentSize属性
self.scrollView.contentSize = CGSizeMake(self.imgW * self.pageSum, 0);
- 设置多张图片的frame和显示图片
for (int i = 0; i< self.pageSum; i++) { self.image = [UIImage imageNamed:[NSString stringWithFormat:@"guide%d",i+1]]; self.imageView = [[UIImageView alloc]initWithImage:self.image]; self.imageView.frame = CGRectMake(i*self.imgW, 0, self.imgW, self.imgH); [self.scrollView addSubview: self.imageView]; }
- 设置分页效果
直接启用UIScrollView的分页,那么UIScrollView就会根UIScrollView自身的宽度,来实现分页得!
UIScrollView的宽度 == 分页的宽度
self.scrollView.pagingEnabled = YES; // 启动分页
- 实现分页控件(UIPageControl)
1. 创建分页控制器 UIPageControl * pageControl = [[UIPageControl alloc]init]; 2.分页控制器总共多少页 pageControl.numberOfPages = self.pageSum; 3.分页控制器的frame pageControl.frame = CGRectMake(0, self.imgH*0.72, self.imgW, 28); 4.未选中分页的颜色和选中分页的颜色 pageControl.pageIndicatorTintColor = [UIColor blackColor]; pageControl.currentPageIndicatorTintColor = [UIColor redColor]; 5.先创建UIScrollView,再创建UIPagControl(否则会被UIScrollView遮住) [self.view addSubview:self.scrollView]; [self.view addSubview:pageControl];
- 让UIPageControl跟随UIScrollView动起来!(代理方法)
- scrollViewDidScroll(scrollView代理方法 - 滚动时调用)
- 获取偏移量,计算出当前的页数(偏移量/每页的宽度).加0.5是因为,如果在两页之间,则pageControl控件会动!
- currentPage(现在页数)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{ double page = scrollView.contentOffset.x/scrollView.frame.size.width; self.pageControl.currentPage = (int)(page+0.5); }
- 设置contentSize属性
- 实现“跳过”“,“进入”的功能
1.判断当前是第0-2页/最后一页
2.创建按钮, 设置按钮的frame, 给按钮添加点击事件
3.将按钮添加到self.imageView上面1. [[UIButton alloc]init] 2. skipBtn.frame = CGRectMake(self.imgW*0.5-75, skipBtnY, 150, 35); 3. [skipBtn addTarget:self action:@selector(didSkipBtnClick) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:skipBtn];
- 优化
- 状态栏(无线,电池...)内容隐藏, info.plist里面配置2个键值对!
Status bar is initially hidden-YES (状态栏最初隐藏 - YES)View controller-based status bar appearance-NO (视图控制器状态栏外观 - NO ) - 弹簧效果,UIScrollView自带动画效果
self.scrollView.bounces = YES; //弹簧效果
self.scrollView setContentOffSet: animated; //自带动画效果(滚动的时候,不会太生硬,古板!)
- 状态栏(无线,电池...)内容隐藏, info.plist里面配置2个键值对!