要达到的效果如下:
解释:
诶,这个轮播图呢是做一个相册demo时的一部分,就是点击任何一张图片,就从该图片位置放大到整个屏幕显示这张图片,然后可以滚动并显示其他图片,然后如果单击图片,就会弹出提示框用于退出轮播视图.
分析:
主要是核心部分的实现逻辑,即高效;一般要显示n张图片时,就要创建n个UIImageView添加到scrollView上面来做显示,但事实上最有效的方式只需要三个UIImageView就足够了:
逻辑如下:
如上图,在一个UIScrollView上面添加的三个UIImageView,设一个UIImageView的宽度为w。每次向左或向右滚动后,立即回到b界面(设置UIScrollView的contentOffset.x始终为w),即滚动后将三个UIImageView上的图片重置,由于重置时间极短,所以看起来就像是在向一个方向不停滚动。
核心代码:主要有两个方法:
其一:每次传入当前要显示图片的位置索引index,根据索引设置三个位置的图片显示,注意第一张和最后一张要单独判断
/**
根据当前页判断加载的图片
_imgs[]是存储所有图片的数组
*/
-(void)loadImgsByIndex:(NSInteger)index{
if (index == 0) {
//如果是最左边
_leftView.image = [UIImage imageNamed:_imgs[0]];
_centerView.image = [UIImage imageNamed:_imgs[1]];
_scrollView.contentOffset = CGPointZero;
}else if (index == (_imgs.count - 1)) {
//最后一张
_rightView.image = [UIImage imageNamed:_imgs[index]];
_centerView.image = [UIImage imageNamed:_imgs[index - 1]];
_scrollView.contentOffset = CGPointMake(2 * zWidth, 0);
}else{
//处于中间
_leftView.image = [UIImage imageNamed:_imgs[index - 1]];
_centerView.image = [UIImage imageNamed:_imgs[index]];
_rightView.image = [UIImage imageNamed:_imgs[index + 1]];
_scrollView.contentOffset = CGPointMake(zWidth, 0);
}
}
然后是每次滚动后要改变index的值,第一张和最后一张也要单独判断
//每次滑动后的判断
//这是UIScrollViewDelegate的方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if (scrollView.contentOffset.x == 0) {
//向左边滑动
if (_presentPage != 0) {
_presentPage -- ;
}
}else if (scrollView.contentOffset.x == 2*zWidth){
//向右滑动
if (_presentPage != (_imgs.count - 1)) {
//如果不是最后一页
_presentPage ++;
}
}if (scrollView.contentOffset.x == zWidth) {
//如果是最后一页或者最前一页
if (_presentPage == (_imgs.count - 1)) {
_presentPage --;
}else if (_presentPage == 0){
_presentPage ++;
}
}
[self loadImgsByIndex:_presentPage];
}