【iOS】渐变版无限循环滚动

本文控件主要用在产品的浏览的时候，针对现在一些变态的需求，做了一个无限循环滚动的控件。产品图片的展示浏览，也可以是可以来用的，这个效果比较有个逐渐显示和隐藏的功能在里面，所以在用户滑动的时候，有一种高大上的感觉！

效果如下，看起来有点卡的原因是因为制作的这个gif不行，实际上是很流畅的

图片发自简书App

先直接上代码，然后说明在穿插给上！

使用方法

先导入头文件 #import "PShowView.h"
然后 创建PShowView控件，并添加到相应的视图之上（本文这里是控制器，所以添加到了self.view上了）

这里的PShowItemModel是因为要把数据赋值给每个产品的展示上，所以建立了一个模型，读者可以自己在这个模型中修改成员变量，然后在PShowItem的 -setModel: 方法中进行调整赋值

    NSMutableArray * arr = [NSMutableArray array];
    PShowItemModel * model = [[PShowItemModel alloc] init];
    model.top = @"1";
    model.img = @"1";
    [arr addObject:model];
    model = [[PShowItemModel alloc] init];
    model.top = @"2";
    model.img = @"2";
    [arr addObject:model];
    
    PShowView * psView = [PShowView PShowViewWithFrame:CGRectMake(0, 70, 375, 300) Models:arr];
    psView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:psView];    //添加到视图上
    psView.isCanVertical = NO;           //设置是否允许竖直方向先的拖动
    [psView setBlock:^(PShowItemModel *model) {
        NSLog(@"%s",__func__);
    }];
  • 如果有什么不对的地方，请留言提醒一下！！

接下来是代码的头文件与实现

  • PShowView.h
#import <UIKit/UIKit.h>
#import "PShowItem.h"

typedef void(^clickItem)(PShowItemModel * model);

@interface PShowView : UIView
@property(nonatomic, assign) BOOL isCanVertical;


+ (instancetype)PShowViewWithFrame:(CGRect)frame Models:(NSArray *)arr;

-(void)setBlock:(clickItem)block;

@end
  • PShowView.m
#import "PShowView.h"
@interface PShowView() <UIGestureRecognizerDelegate>

@property(nonatomic, strong) NSArray * models;
@property(nonatomic, strong) PShowItem * view1;
@property(nonatomic, strong) PShowItem * view2;
@property(nonatomic, strong) PShowItem * view3;
@property(nonatomic, strong) PShowItem * view4;
@property(nonatomic, strong) PShowItem * view5;

@property(nonatomic, assign) CGPoint view2Center;
@property(nonatomic, assign) CGPoint view3Center;
@property(nonatomic, assign) CGPoint view4Center;

@property(nonatomic, assign) CGFloat viewWidth;
@property(nonatomic, assign) CGFloat viewHeight;
@property(nonatomic, assign) CGRect bigBounds;

@property(nonatomic, strong) NSMutableArray * dataArr;
@property(nonatomic, assign) int moveCount;
@property(nonatomic, strong) clickItem block;

@end

@implementation PShowView

+ (instancetype)PShowViewWithFrame:(CGRect)frame Models:(NSArray *)arr{
    PShowView * psView = [[PShowView alloc] initWithFrame:frame];
    psView.models = arr;
    return psView;
}

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor lightGrayColor];
        [self addSubview:self.view1 = [[PShowItem alloc] init]];
        [self addSubview:self.view2 = [[PShowItem alloc] init]];
        [self addSubview:self.view3 = [[PShowItem alloc] init]];
        [self addSubview:self.view4 = [[PShowItem alloc] init]];
        [self addSubview:self.view5 = [[PShowItem alloc] init]];
        
        self.dataArr = [NSMutableArray array];
        [self layoutUI];
        UIPanGestureRecognizer * pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
        pan.delegate = self;
        [self addGestureRecognizer:pan];
        
        UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(view3tap)];
        tap.delegate = self;
        [self.view3 addGestureRecognizer:tap];
        
        tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(view2tap)];
        tap.delegate = self;
        [self.view2 addGestureRecognizer:tap];
        
        tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(view4tap)];
        tap.delegate = self;
        [self.view4 addGestureRecognizer:tap];
        
        
    }
    return self;
}

- (void)layoutUI{
    
    self.viewWidth = (CGRectGetWidth(self.frame) - 30) / 2.0;
    CGFloat height = CGRectGetHeight(self.frame);
    if (self.viewWidth > height) {
        self.viewWidth = height;
    }
    CGFloat topSpace = (height - self.viewWidth) / 2.0;
    CGFloat leftSpace = (CGRectGetWidth(self.frame) / 2.0) - self.viewWidth;
    
    self.view1.frame = CGRectMake(leftSpace, topSpace, self.viewWidth, self.viewWidth);
    self.view2.frame = CGRectMake(leftSpace, topSpace, self.viewWidth, self.viewWidth);
    self.view3.frame = CGRectMake(self.viewWidth/2.0 + leftSpace, topSpace, self.viewWidth, self.viewWidth);
    self.view4.frame = CGRectMake(self.viewWidth + leftSpace, topSpace, self.viewWidth, self.viewWidth);
    self.view5.frame = CGRectMake(self.viewWidth + leftSpace, topSpace, self.viewWidth, self.viewWidth);
    self.view3Center = self.view3.center;
    self.view2Center = self.view2.center;
    self.view4Center = self.view4.center;
    
    self.view1.alpha = 0;
    self.view5.alpha = 0;
    self.view2.alpha = 0.5;
    self.view4.alpha = 0.5;
    self.view3.alpha = 1;
    
    //    [self.view3.layer setAffineTransform:CGAffineTransformMakeScale(1.2, 1.2)];
    
    [self bringSubviewToFront:self.view2];
    [self bringSubviewToFront:self.view4];
    [self bringSubviewToFront:self.view3];
    [self sendSubviewToBack:self.view5];
    self.view3.bounds = CGRectMake(0, 0, self.viewWidth * 1.2, self.viewWidth * 1.2);
    self.bigBounds = self.view3.bounds;
}


- (void)setModels:(NSArray *)models{
    _models = models;
    self.moveCount = 0;
    if (models.count > 0) {
        for (int i = self.moveCount; i < self.moveCount + 5; i++) {
            int index = i%models.count;
            [self.dataArr insertObject:_models[index] atIndex:i];
        }
        [self setinfoToItem];
    }
    
}

- (void)setinfoToItem{
    [self.view1 setModel:self.dataArr[0]];
    [self.view2 setModel:self.dataArr[1]];
    [self.view3 setModel:self.dataArr[2]];
    [self.view4 setModel:self.dataArr[3]];
    [self.view5 setModel:self.dataArr[4]];
}

- (void)panAction:(UIPanGestureRecognizer  *)pan{
    CGPoint point = [pan translationInView:pan.view];
    CGFloat MaxM = self.viewWidth/2.0;
    if (fabs(point.x) >= MaxM) {
        point.x = point.x/(fabs(point.x)) * MaxM;
    }
    CGFloat MaxH = (CGRectGetHeight(self.bounds) - self.viewWidth)/2.0;
    if (fabs(point.y) >= MaxH) {
        point.y = point.y/(fabs(point.y)) * MaxH;
    }
    if (!self.isCanVertical) {
        point.y = 0;
    }
    
    self.view3.center = CGPointMake(self.view3Center.x + point.x, self.view3Center.y + point.y);
    CGFloat moveBL = fabs(point.x) / MaxM;
    
    CGRect frame = self.view3.bounds;
    frame.size.width = (1.2- moveBL * 0.2 )*self.viewWidth;
    frame.size.height = (1.2- moveBL * 0.2)*self.viewWidth;
    self.view3.bounds = frame;
    
    if (point.x > 0) {
        self.view2.center = CGPointMake(self.view2Center.x + (point.x * 1), self.view2Center.y + point.y * 0.5);
        self.view4.center = CGPointMake(self.view4Center.x , self.view4Center.y + point.y * 1.0);
        self.view1.alpha = fabs(point.x)/MaxM/2.0;
        self.view2.alpha = 0.5 + fabs(point.x)/MaxM/2.0;
        self.view4.alpha = 0.5 - fabs(point.x)/MaxM/2.0;
        self.view3.alpha = 1 - fabs(point.x)/MaxM/2.0;
        
        CGRect frame = self.view2.bounds;
        frame.size.width = (1 + moveBL * 0.2 )*self.viewWidth;
        frame.size.height = (1 + moveBL * 0.2)*self.viewWidth;
        self.view2.bounds = frame;
        
        if (moveBL > 0.5) {
            [self bringSubviewToFront:self.view2];
        }else{
            [self bringSubviewToFront:self.view3];
            
        }
        
    }else {
        self.view4.center = CGPointMake(self.view4Center.x + (point.x * 1), self.view4Center.y + point.y * 0.5);
        self.view2.center = CGPointMake(self.view2Center.x , self.view2Center.y + point.y * 1.0);
        self.view5.alpha = fabs(point.x)/MaxM/2.0;
        self.view4.alpha = 0.5 + fabs(point.x)/MaxM/2.0;
        self.view2.alpha = 0.5 - fabs(point.x)/MaxM/2.0;
        self.view3.alpha = 1 - fabs(point.x)/MaxM/2.0;
        
        CGRect frame = self.view4.bounds;
        frame.size.width = (1 + moveBL * 0.2 )*self.viewWidth;
        frame.size.height = (1 + moveBL * 0.2)*self.viewWidth;
        self.view4.bounds = frame;
        
        if (moveBL > 0.5) {
            [self bringSubviewToFront:self.view4];
        }else{
            [self bringSubviewToFront:self.view3];
        }
        
    }
    
    
    if (pan.state == UIGestureRecognizerStateEnded) {
        if (moveBL > 0.5) {
            if (point.x < 0) {
                [self view4tap];
            }else{
                [self view2tap];
            }
        }else{
            [UIView animateWithDuration:0.1 animations:^{
                [self layoutUI];
            }];
            
        }
        
    }
    
}


- (void)moveToRight:(BOOL)rightB{
    
    if (_models.count < 1) {
        return;
    }
    
    if (rightB) {
        self.moveCount--;
        if (self.moveCount < 0) {
            self.moveCount = (int)_models.count - 1; //当滑倒-1的时候，相当于所给的数组中最后一个元素添加的时候
        }
        [self.dataArr removeLastObject];
        if (_models.count > 0) {
            int index = (abs(self.moveCount)%_models.count);
            [self.dataArr insertObject:_models[index] atIndex:0];
            [self setinfoToItem];
        }
    }else{
        self.moveCount++;
        [self.dataArr removeObjectAtIndex:0];
        if (_models.count > 0) {
            int index = abs(self.moveCount + 4)%_models.count;
            [self.dataArr addObject:_models[index]];
            [self setinfoToItem];
        }
    }
    
    
}

- (void)view2tap{
    
    [UIView animateWithDuration:0.1 animations:^{
        [self bringSubviewToFront:self.view2];
        self.view2.center = self.view3Center;
        self.view2.bounds = self.bigBounds;
        
        self.view3.center = self.view4Center;
        self.view3.bounds = self.view4.bounds;
        
        self.view1.alpha = 0.5;
        self.view2.alpha = 1;
        self.view3.alpha = 0.5;
        self.view4.alpha = 0;
        
    } completion:^(BOOL finished) {
        [self moveToRight:YES];
        [self layoutUI];
    }];
    
    
    
}
- (void)view4tap{
    [UIView animateWithDuration:0.1 animations:^{
        [self bringSubviewToFront:self.view4];
        self.view4.center = self.view3Center;
        self.view4.bounds = self.bigBounds;;
        
        self.view3.bounds = self.view2.bounds;
        self.view3.center = self.view2Center;
        
        self.view5.alpha = 0.5;
        self.view4.alpha = 1;
        self.view3.alpha = 0.5;
        self.view2.alpha = 0;
        
    } completion:^(BOOL finished) {
        [self moveToRight:NO];
        [self layoutUI];
    }];
}

- (void)view3tap{
    if (self.block) {
        self.block(self.dataArr[2]);
    }
}

@end
  • PShowItem.h
#import <UIKit/UIKit.h>
@interface PShowItemModel : NSObject

@property(nonatomic, strong) NSString * title;
@property(nonatomic, strong) NSString * img;
@property(nonatomic, strong) NSString * top;
@end

@interface PShowItem : UIView

- (void)setModel:(PShowItemModel *)model;
- (void)setInfo:(NSString *)str;

@end
  • PShowItem.m
#import "PShowItem.h"
@implementation PShowItemModel

@end


@interface PShowItem()

@property(nonatomic, strong) PShowItemModel * model;
@property(nonatomic, strong) UITextView * infoTV;
@property(nonatomic, strong) UIImageView * image;

@end

@implementation PShowItem


- (void)setFrame:(CGRect)frame{
    [super setFrame:frame];
    // 让子视图可以随着一起缩放
    [self setAutoresizesSubviews:YES];
    if (!self.image && frame.size.width > 0) {
        self.image = [[UIImageView alloc] initWithFrame:self.bounds];
        
        // 设置图片的随着父视图缩放的参数
        self.image.autoresizingMask =
            UIViewAutoresizingFlexibleLeftMargin    |
            UIViewAutoresizingFlexibleWidth         |
            UIViewAutoresizingFlexibleRightMargin   |
            UIViewAutoresizingFlexibleTopMargin     |
            UIViewAutoresizingFlexibleHeight        |
            UIViewAutoresizingFlexibleBottomMargin  ;
        
        [self addSubview:self.image];
    }

    if (!self.infoTV && frame.size.width > 0) {
        self.infoTV = [[UITextView alloc] initWithFrame:CGRectMake(10, 10, 60, 30)];
        [self addSubview:self.infoTV];
        /*
         在这里添加所需要的控件 以及布局
         */
    }
}


- (void)setModel:(PShowItemModel *)model{
    _model = model;
    [self.image setImage:[UIImage imageNamed:model.img]];
    self.infoTV.text = model.top;
    /*
     在这里对布局的文件进行赋值调整
     */
}

- (void)setInfo:(NSString *)str{
    self.infoTV.text = str;
}

@end
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,752评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,100评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,244评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,099评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,210评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,307评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,346评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,133评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,546评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,702评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,331评论 3赞 319
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2赞 351

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,917评论 25赞 707
  • Android - 收藏集
    用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你...
    hw1212阅读 12,709评论 2赞 59
  • iApp_《ijs》速成开发手册3.0
    《ijs》速成开发手册3.0 官方用户交流：iApp开发交流（1） 239547050iApp开发交流（2） 10...
    叶染柒丶阅读 5,104评论 0赞 7
  • 紧张而充实的一天
    紧张而充实的一天 骑天大胜 焦点少年班坚持分享第二十天 2017.8.13 今天一天都感觉慌慌张张的，好像总觉得...
    骑天大胜阅读 431评论 0赞 0
  • 成功的关键
    组织要倍增，复制是关键 1变2，2变4，4变8，8变16，16变32，这样裂变下去，算起奖金来可开心了，但事实上，...
    宇笔轩言阅读 274评论 0赞 0