美文网首页
三个UIImageView的轮播图

三个UIImageView的轮播图

作者: by小杰 | 来源:发表于2016-09-20 15:21 被阅读30次
    工程结构.png

    *封装的ScrollView文件

    #import "OrderView.h"
    
    @interface OrderView ()<UIScrollViewDelegate>
    
    //三个字符串, 存放图片的名字
    @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的轮播图

          本文链接:https://www.haomeiwen.com/subject/bbroettx.html