码迷,mamicode.com
首页 > 移动开发 > 详细

三张图片轮播器<ios>

时间:2016-01-17 01:14:20      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

三张图片默认摆放如图所示;

实际索引值为0,1,2;

但是为了理解容易,所以设置为对称的模型;我们把图片放在一个数组中

图片默认显示第一张图片,放在索引为1的位置;

当图片往左滚动时,程序会调用cell的方法,在程序内部我们实现索引值为0的位置显示最后一张图片,然后再将图片移动到索引为1的位置,

以此类推,当向右滚动时,同向左一样,不同之处是在于,下一张图片不是显示图片数组上一张图片而是显示图片数组中下一张

具体代码实现如下:(用Main.storyboard制作)技术分享技术分享

HmImgCell.h
#import <UIKit/UIKit.h>

@interface HmImgCell : UICollectionViewCell
@property(nonatomic,strong)NSIndexPath*indexPath;
@property(nonatomic,strong)UIImage*img;
@end
//.m
#import "HmImgCell.h"
@interface HmImgCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@property (weak, nonatomic) IBOutlet UILabel *textView;

@end
@implementation HmImgCell
-(void)setImg:(UIImage *)img{
    _img=img;
    self.iconView.image=img;

}
-(void)setIndexPath:(NSIndexPath *)indexPath{
    _indexPath=indexPath;
    self.textView.text=[NSString stringWithFormat:@"%ld---%ld",indexPath.section,indexPath.item];

}
@end
///ViewController
//.m
#import "ViewController.h"
#import "HmImgCell.h"
#define cnt 9
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UICollectionViewFlowLayout *layout;
@property(nonatomic,assign)NSInteger currentIndex;
@property(nonatomic,strong)NSArray* imgs;
@end
@implementation ViewController

//实现懒加载
-(NSArray*)imgs{
    if (_imgs==nil) {
        NSMutableArray*arr=[NSMutableArray arrayWithCapacity:cnt];
        for (int i=0; i<cnt; i++) {
//            把数据包装
            NSString*imgName=[NSString stringWithFormat:@"%d",i];
            UIImage*img=[UIImage imageNamed:imgName];
            [arr addObject:img];
        }
        _imgs=arr;
    }
    return _imgs;
}
- (void)viewDidLoad {
    [super viewDidLoad];
//设置layout的属性
    self.layout.itemSize=self.collectionView.frame.size;
    self.layout.minimumLineSpacing=0;
    self.layout.scrollDirection=UICollectionViewScrollDirectionHorizontal;
    self.collectionView.pagingEnabled=YES;
    self.collectionView.bounces=NO;
//设置动画
    NSTimer*time=[NSTimer timerWithTimeInterval:2 target:self selector:@selector(nextImg) userInfo:nil repeats:YES];
    NSRunLoop*run=[NSRunLoop currentRunLoop];
    [run addTimer:time forMode:NSRunLoopCommonModes];
//    先让scolleView滚动到索引为一的位置
    NSIndexPath*indexPath=[NSIndexPath indexPathForItem:1 inSection:0];
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
}
//设置下一张图片方法
-(void)nextImg{
//让图片滚动到原来索引为1的位置
    [self.collectionView setContentOffset:CGPointMake(self.collectionView.frame.size.width*2, 0) animated:YES];
}
//确定多少item
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.imgs.count;
}
//确定每行展示的cell
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    HmImgCell*cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"img" forIndexPath:indexPath];
//   获取当前需要展示图片的索引
    
    NSInteger index=(indexPath.item-1+cnt+self.currentIndex)%cnt;
//赋值
    cell.img=self.imgs[index];
    cell.indexPath=indexPath;
    return cell;

}
//当拖拽停止时调用的方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//让图片回到原来的位置
    
//    计算当前偏移量的索引
        NSInteger offsetIndex=(self.collectionView.contentOffset.x)/self.collectionView.frame.size.width-1;
//    当前位置的偏移量
    self.currentIndex=(offsetIndex+cnt+self.currentIndex)%cnt;
    NSIndexPath*index=[NSIndexPath indexPathForItem:1 inSection:0];
    [self.collectionView scrollToItemAtIndexPath:index atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
//关闭动画
    [UIView setAnimationsEnabled:NO];
//    刷新当前图片
    [self.collectionView reloadItemsAtIndexPaths:@[index]];
//开启动画
    [UIView setAnimationsEnabled:YES];
}
//当开启动画停止滚动时用上面的方法
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{

    [self scrollViewDidEndDecelerating:scrollView];
}
@end

  

三张图片轮播器<ios>

标签:

原文地址:http://www.cnblogs.com/ReverseEarth/p/5136660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!