iOS 简单自定义滑动视图(UIScrollView)

好久没写博客了,这段时间事情比较多,心情也不是很美妙,但是代码还是要继续啊!
今天分享的是自定义的一个 ScrollView ,也就是一般在首页 Banner 都可以随处可见的滑动视图,这里做了一个自动滑动和手动滑动平滑过度的 demo。其实原理大家都知道的,以三张图片为例,就是把第一张放在第三张的后面,这样就有四个,已形成无限循环滑动,下面看效果图:

滑动效果图

使用

之前也见过网上的一些 demo ,这里只是自己封装一下,代码应该还是比较清晰的,使用起来也非常简单,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//
//  ViewController.m
//  HWScrollViewDemo
//
//  Created by HenryCheng on 16/1/22.
//  Copyright © 2016年 www.igancao.com. All rights reserved.
//

#import "ViewController.h"
#import "HWScrollView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSArray *imageArray = @[
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/2047158/beerhenge.jpg",
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/2016158/avalanche.jpg",
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1839353/pilsner.jpg",
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1833469/porter.jpg",
                            ];
 
    HWScrollView *scrollV = [HWScrollView scrollViewWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.frame), 120
imageURLArray:imageArray
placeHolderImage:@"pictureHolder"
pageControlShowStyle:PageControlShowStyleCenter];
    self.automaticallyAdjustsScrollViewInsets = NO;
    scrollV.callBackBlock = ^(NSInteger index, NSString *imageURL) {
        NSLog(@"点击了第 %ld 张",index);
    };
    [self.view addSubview:scrollV];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

这里只需要导入 HWScrollView.h 这个头文件即可,然后创建一个 HWScrollView ,设置好 frame、imageArray、placeHolderImage 和 PageControl 的位置即可,直接调用以下这个类方法即可

1
2
3
4
+ (instancetype)scrollViewWithFrame:(CGRect)frame 
imageURLArray:(NSArray *)imageURLArray
placeHolderImage:(NSString *)placeHolder
pageControlShowStyle:(PageControlShowStyle)pageControlShowStyle;

然后就是点击了每个 imageView 后的回调

1
2
3
    scrollV.callBackBlock = ^(NSInteger index, NSString *imageURL) {
        NSLog(@"点击了第 %ld 张",index);
    };

使用上面 callBackBlock 回调,得到 indeximageURL 然后就可以做你想做的事情了。

分析

进入 HWScrollView.h 你可以看到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//
//  HWScrollView.h
//  HWScrollViewDemo
//
//  Created by HenryCheng on 16/1/22.
//  Copyright © 2016年 www.igancao.com. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSUInteger, PageControlShowStyle) {
    
    PageControlShowStyleNone        = 0,
    PageControlShowStyleBottomLeft  = 1 << 0,
    PageControlShowStyleCenter      = 1 << 1,
    PageControlShowStyleBottomRight = 1 << 2,
    PageControlShowStyleTopLeft     = 1 << 3,
    PageControlShowStyleTopRight    = 1 << 4
    
};

typedef void(^tapCallBackBlock)(NSInteger index, NSString *imageURL);

@interface HWScrollView : UIView
/**
 *  自动滑动的时间间隔
 */
@property (assign, nonatomic) NSTimeInterval scrollTime;
/**
 *  是否允许自动滑动
 */
@property (assign, nonatomic) BOOL isAllowAutoScroll;
/**
 *  PageControl的位置
 */
@property (assign, nonatomic) PageControlShowStyle pageControlShowStyle;
/**
 *  点击后的回调
 */
@property (copy, nonatomic) tapCallBackBlock callBackBlock;
/**
 *  创建一个新的HWScrollView
 *
 *  @param frame                frame
 *  @param imageURLArray        要展示的图片链接的数组
 *  @param placeHolder          未加载完成时的替代图片
 *  @param pageControlShowStyle PageControl的显示位置
 *
 *  @return HWScrollView
 */
+ (instancetype)scrollViewWithFrame:(CGRect)frame
imageURLArray:(NSArray *)imageURLArray
placeHolderImage:(NSString *)placeHolder
pageControlShowStyle:(PageControlShowStyle)pageControlShowStyle;

@end

这里所有的属性都注释的比较清楚,用起来会比较方便。

进入 HWScrollView.m 你可以看到

1
2
#import "HWScrollView.h"
#import "UIImageView+YYWebImage.h"

这里加载网络图片的时候我使用的是 YYWebImage,在 demo 里面可以看见,如果你的工程中使用的是 SDWebImage 你也可以把 YYWebImage 换成 SDWebImage ,并把方法替换一下即可

1
    [_leftImageView yy_setImageWithURL:[NSURL URLWithString:_imageURLArray[_leftImageIndex]] placeholder:_placeHolderImage];

关于自定义 PageControl

上面效果图我们可以看到,使用的 PageControl 是自定义的,
未选中状态

选中状态
使用的是上面这两个图片来自定义的 PageControl,查看代码我是这样写的

1
2
3
4
5
6
7
8
9
10
11
@interface HWPageControl : UIPageControl
/**
 *  当前选中的pageControl
 */
@property (strong, nonatomic) UIImage *activeImage;
/**
 *  没有选中的pageControl
 */
@property (strong, nonatomic) UIImage *inactiveImage;

@end

然后实现的时候

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@implementation HWPageControl

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.activeImage = [UIImage imageNamed:@"all_yellow_circle"];
        self.inactiveImage = [UIImage imageNamed:@"border_yellow_circle"];
    }
    return self;
}
- (void)updateDots {
    for (int i = 0; i < [self.subviews count]; i++) {
        UIImageView *imageV = [[UIImageView alloc]initWithFrame:self.subviews[i].bounds];
        [self.subviews[i] addSubview:imageV];
    }
    for (int i = 0; i < [self.subviews count]; i++) {
        UIImageView *imagev = (UIImageView *)self.subviews[i].subviews[0];
        if ([imagev isKindOfClass:[UIImageView class]]) {
            if (i == self.currentPage) {
                imagev.image = _activeImage;
            } else {
                imagev.image = _inactiveImage;
            }
        }
    }
}
- (void)setCurrentPage:(NSInteger)page {
    [super setCurrentPage:page];
    [self updateDots];
}

@end

PageControl 的子视图上加一个 imageView,然后找到这个 imageView 添加自定义的图片,就实现了自定义效果

最后

这里使用的是 YYWebImage,关于使用方法(手动添加和 cocoaPods 添加)可以在这里 YYWebImage 查看,这里使用的是手动添加的方法。
以上所有的代码都可以在 HWScrollViewDemo 看到。

未经作者许可请勿转载!

若您觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏!
------------- 本文结束 感谢您的阅读 -------------