UIScrollView 循环滚动,代码超简单

现在很多应用里面多多少少都用到了循环滚动,要么是图片、要么是view,或者是其他,我总结一下,写了个demo分享给大家。

先看代码之后在讲原理:

1.创建一个空的项目(这个我就不多说了)。

2.添加一个ViewController。

3.在appdelegate添加:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    ViewController *vc = [[ViewController alloc] init];
    self.window.rootViewController = vc;
    
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

4.看看ViewController.m里面的文件:

<span style="font-size:14px;">#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *readCannelScrollView;
@property (nonatomic, strong) UILabel *pageOneView;
@property (nonatomic, strong) UILabel *pageTwoView;
@property (nonatomic, strong) UILabel *pageThreeView;

@end

@implementation ViewController

- (void)dealloc
{
    _readCannelScrollView = nil;
    _pageOneView = nil;
    _pageTwoView = nil;
    _pageThreeView = nil;
}

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //容器的属性设置
    self.readCannelScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.readCannelScrollView];
    CGSize size = self.readCannelScrollView.contentSize;
    size.width = 320*3;
    self.readCannelScrollView.contentSize = size;
    self.readCannelScrollView.pagingEnabled = YES;
    self.readCannelScrollView.showsHorizontalScrollIndicator = NO;
    self.readCannelScrollView.delegate = self;
    self.readCannelScrollView.contentOffset = CGPointMake(0, 0);
    //end
    
    //添加页面1
    self.pageOneView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, self.view.bounds.size.height)];
    self.pageOneView.backgroundColor = [UIColor lightGrayColor];
    self.pageOneView.text = @"1";
    self.pageOneView.font = [UIFont systemFontOfSize:80];
    self.pageOneView.textAlignment = NSTextAlignmentCenter;
    [self.readCannelScrollView addSubview:self.pageOneView];
    
    //添加页面2
    self.pageTwoView = [[UILabel alloc] initWithFrame:CGRectMake(320, 0, 320, self.view.bounds.size.height)];
    self.pageTwoView.backgroundColor = [UIColor greenColor];
    self.pageTwoView.text = @"2";
    self.pageTwoView.font = [UIFont systemFontOfSize:80];
    self.pageTwoView.textAlignment = NSTextAlignmentCenter;
    [self.readCannelScrollView addSubview:self.pageTwoView];
    
    //添加页面3
    self.pageThreeView = [[UILabel alloc] initWithFrame:CGRectMake(640, 0, 320, self.view.bounds.size.height)];
    self.pageThreeView.backgroundColor = [UIColor grayColor];
    self.pageThreeView.text = @"3";
    self.pageThreeView.font = [UIFont systemFontOfSize:80];
    self.pageThreeView.textAlignment = NSTextAlignmentCenter;
    [self.readCannelScrollView addSubview:self.pageThreeView];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark -
#pragma mark - scroll delegate
<span style="color:#996633;">- (void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"scrollView.contentOffset.x=%f",scrollView.contentOffset.x);
    CGFloat pageWidth = scrollView.frame.size.width;
    int currentPage = floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1;
    
    if (currentPage == 0)
    {
        UILabel *tmpTxtView = self.pageThreeView;
        self.pageThreeView = self.pageTwoView;
        self.pageTwoView = self.pageOneView;
        self.pageOneView = tmpTxtView;
    }
    
    if (currentPage == 2)
    {
        //换指针
        UILabel *tmpTxtView = self.pageOneView;
        self.pageOneView = self.pageTwoView;
        self.pageTwoView = self.pageThreeView;
        self.pageThreeView = tmpTxtView;
 }

    //恢复原位
    self.pageOneView.frame = (CGRect){0,0,self.pageOneView.frame.size};
    self.pageTwoView.frame = (CGRect){320,0,self.pageTwoView.frame.size};
    self.pageThreeView.frame = (CGRect){640,0,self.pageThreeView.frame.size};
    self.readCannelScrollView.contentOffset = CGPointMake(320, 0);
    
}

@end</span>


5.原理说明,小伙伴我们一起想一下,如何让一个scrollview实现循环滚动,看下图:



 a.用三个View进行循环滚动,上图P1、P2、P3(程序中的pageOneView、pageTwoView、pageThreeView)


 b.(开始运行除外,那是的contentoffset.x = 0)始终让P2在中间是实现循环滚动的关键。


 c.P2此时在中间(如上图)即contentoffset.x = 320,此时再向左滑动,P3在中间页面,即contentoffset.x = 640。


 d.这时候,肯定会想,是不是把P1移动到TEMP0的位置,小伙伴你真聪明。但是为了写成一个通用方法,光是移动位置是不对的,那能不能保证P1、P2、P3这个顺序永远不变,答案是YES。


 e.1>永远保持P1、P2、P3顺序,同时,位置(frame)也要相同  2>让P2用于居中。


 f.满足e中两条,如何做到:首先e的第一条看上图,滑动后的界面最右边有个红色虚拟的框框,如果假设(实际上没有移动)我把P1放到那个位置,顺序就是P2\P3\P1(TEMP0),为了保证顺序,我需要交换指针,但是如果我直接把指针P1=P2,在执行P3=P1时候,会有问题的,你懂的,在进行换值的时候需要借助临时指针变量的。


 g.指针换完了,但是位置没有变contentoffset.x = 640,我们需要scrollView.contentoffset.x = 320。


 h.上述是想左滑动,向右滑动,即是同理。


 6.程序分析说明:

  

<span style="font-size:14px;">CGFloat pageWidth = scrollView.frame.size.width;
int currentPage = floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1;</span>

floor计算 的出来是0、1、2,可以利用是0还是2进行判断用户是向左滑动,还是向右滑动,从而实现循环滚动,后台在配合数组的使用,就可以实现图片等循环滚动啦!



点击下载源代码


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值