三个UIImageView的轮播图

三个UIImageView的轮播图_第1张图片
工程结构.png

*封装的ScrollView文件

#import "OrderView.h"

@interface OrderView ()

//三个字符串, 存放图片的名字
@property (nonatomic, copy) NSString *leftImageNamed;
@property (nonatomic, copy) NSString *centerImageNamed;
@property (nonatomic, copy) NSString *righImageNamed;

//三个UIImageView, 存放图片
@property (nonatomic, strong) UIImageView *centerImageView;
@property (nonatomic, strong) UIImageView *leftImageView;
@property (nonatomic, strong) UIImageView *rightImageView;

//一个ScrollView
@property (nonatomic, strong) UIScrollView *scrollView;

//存放图片数据源的数组
@property (nonatomic, strong) NSMutableArray *dataArray;

@end


@implementation OrderView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.dataArray = [NSMutableArray array];
        
        for (int i = 0; i < 10; i++) {
            NSString *string = [NSString stringWithFormat:@"ima_%d.jpg", i];
            
            [self.dataArray addObject:string];
        } 
        #布局轮播效果
        [self createView];
    }
    return self;
}

- (void)createView
{
    self.scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
    
    self.scrollView.pagingEnabled = YES;
    
    self.scrollView.bounces = NO;
    
    self.scrollView.delegate = self;
    # 设置滚动范围
    self.scrollView.contentSize = CGSizeMake(self.frame.size.width * 3, self.frame.size.height);
    
    [self addSubview:self.scrollView];
    
    //赋值图片
    self.centerImageNamed = self.dataArray.firstObject;
    self.leftImageNamed = self.dataArray.lastObject;
    self.righImageNamed = self.dataArray[1];
   
     #注意三个imageView的偏移量
    //初始化中间的imageView
    self.centerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width, 0, self.frame.size.width, self.frame.size.height)];
    
    self.centerImageView.image = [UIImage imageNamed:self.centerImageNamed];
    
    [self.scrollView addSubview:self.centerImageView];
    
   
    //初始化左边的imageview
    self.leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    
    self.leftImageView.image = [UIImage imageNamed:self.leftImageNamed];
    
    [self.scrollView addSubview:self.leftImageView];
    
    
    //初始化右边的imageView
    self.rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width * 2, 0, self.frame.size.width, self.frame.size.height)];
    
    self.rightImageView.image = [UIImage imageNamed:self.righImageNamed];
    
    [self.scrollView addSubview:self.rightImageView];
    
    # 设置初始化偏移量(目的让中间的imageView显示)
    [self.scrollView setContentOffset:CGPointMake(self.frame.size.width, 0)];
    
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //向右滑动(偏移量减小到0)
    if (scrollView.contentOffset.x == 0) {
        
        self.righImageNamed = self.centerImageNamed;
        
        self.centerImageNamed = self.leftImageNamed;
        
        NSInteger index = [self imageIndex:self.leftImageNamed];
        //判断是最后一张还是第一张
        if (index == 0) {
            self.leftImageNamed = self.dataArray.lastObject;
        } else {
            self.leftImageNamed = self.dataArray[index - 1];
        }

        self.centerImageView.image = [UIImage imageNamed:self.centerImageNamed];
        self.leftImageView.image = [UIImage imageNamed:self.leftImageNamed];
        self.rightImageView.image = [UIImage imageNamed:self.righImageNamed];
        
        //交换图片后, 立马更改偏移量, 在将中间的显示出来
        [self.scrollView setContentOffset:CGPointMake(self.frame.size.width, 0)];
        
    }
    
    // [scrollView.panGestureRecognizer translationInView:scrollView];
    //向左滑动(偏移量增加到2陪的宽度)
    if (scrollView.contentOffset.x == self.frame.size.width * 2) {
        
        self.leftImageNamed = self.centerImageNamed;
        
        self.centerImageNamed = self.righImageNamed;
        
        NSInteger index = [self imageIndex:self.righImageNamed];
        
        if (index == self.dataArray.count - 1) {
            self.righImageNamed = self.dataArray.firstObject;
        } else {
            self.righImageNamed = self.dataArray[index + 1];
        }
                
        self.centerImageView.image = [UIImage imageNamed:self.centerImageNamed];
        
        self.leftImageView.image = [UIImage imageNamed:self.leftImageNamed];
        self.rightImageView.image = [UIImage imageNamed:self.righImageNamed];
        
        [self.scrollView setContentOffset:CGPointMake(self.frame.size.width, 0)];
    }
}

- (NSInteger)imageIndex:(NSString *)imageNamed
{
    return [self.dataArray indexOfObject:imageNamed];
}
@end```

你可能感兴趣的:(三个UIImageView的轮播图)