自定义一个简单的ScrollView

一步一步交你做一个自动滚动的ScrollView

UIScrollView 是一个滚动的试图 根据这里我们大概可以确定它拥有哪些熟悉

简单的UIScrollView实现方法一步一步走

1、ScrollView也是一个可以滚懂的视图类似于TableView所以它肯定存在一个第几个视图的属性

@property (nonatomic, assign) NSInteger currentPage;

2、类似于TableView我们得知道它上面有多少个视图所以定义一个方法返回视图个数

- (NSInteger)numberOfPageInScrollView:(MyScrollView *)scrollView;

3、我们需要给它添加点击事件记录我们点击的是第几个视图所以需要一个方法返回值为Nsinteger

- (UIView *)scrollView:(MyScrollView *)scrollView viewAtIndex:(NSInteger)index;

4、既然有数据处理就是控制视图个数等类似tableView定义一个继承自MyScrollViewDataSource的协议

- (NSInteger)numberOfPageInScrollView:(MyScrollView *)scrollView;

5这样的SCrollView上面是不是没有东西呢 所以我们需要再定义一个方法给它添加数据的

-(void)reloadData;

二、接下来就是创建UIScrollView了

1、第一步当然是初始化也就是alloc init；

由于在后面也需要用到 所以我们写在外面及

@interface MyScrollView ()
{
    UIScrollView *_scrollView;
}
@end
@synthesize currentPage = _currentPage;

2、然后就是初始化了

 - (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
        _scrollView.pagingEnabled = YES;
        _scrollView.showsHorizontalScrollIndicator = NO;
        [self addSubview:_scrollView];
    }
    return self;
}

3、当我们点进UIScrollView的时候我们可以看到它有很多的属性详情看下表

属性	作用
CGPoint contentOffSet	监控目前滚动的位置
CGSize contentSize	滚动范围的大小
UIEdgeInsets contentInset	视图在scrollView中的位置
id<UIScrollerViewDelegate> delegate	设置协议
BOOL directionalLockEnabled	指定控件是否只能在一个方向上滚动
BOOL bounces	控制控件遇到边框是否反弹
BOOL alwaysBounceVertical	控制垂直方向遇到边框是否反弹
BOOL alwaysBounceHorizontal	控制水平方向遇到边框是否反弹
BOOL pagingEnabled	控制控件是否整页翻动
BOOL scrollEnabled	控制控件是否能滚动
BOOL showsHorizontalScrollIndicator	控制是否显示水平方向的滚动条
BOOL showsVerticalScrollIndicator	控制是否显示垂直方向的滚动条
UIEdgeInsets scrollIndicatorInsets	指定滚动条在scrollerView中的位置
UIScrollViewIndicatorStyle indicatorStyle	设定滚动条的样式
float decelerationRate	改变scrollerView的减速点位置
BOOL tracking	监控当前目标是否正在被跟踪
BOOL dragging	监控当前目标是否正在被拖拽
BOOL decelerating	监控当前目标是否正在减速
BOOL delaysContentTouches	控制视图是否延时调用开始滚动的方法
BOOL canCancelContentTouches	控制控件是否接触取消touch的事件
float minimumZoomScale	缩小的最小比例
float maximumZoomScale	放大的最大比例
float zoomScale	设置变化比例
BOOL bouncesZoom	控制缩放的时候是否会反弹
BOOL zooming	判断控件的大小是否正在改变
BOOL zoomBouncing	判断是否正在进行缩放反弹
BOOL scrollsToTop	控制控件滚动到顶部

这里不一一实验了

我们选择

_scrollView.pagingEnabled = YES;

_scrollView.showsHorizontalScrollIndicator = NO;
这样控件就能整页翻动并且不现实水平方向的滚动条

然后将它显示在View上面

[self addSubview:_scrollView];

4、接下来就是通过reloadData方法在ScrollView上面添加数据

- (void)reloadData
{
    [_scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    //让数组里面的数据都调用removeFromSuperview这个方法清除之前的视图
    NSInteger count = [_dataSource numberOfPageInScrollView:self];
    //获取ScrollView的最大个数
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
   //设置ScrollView的宽度及显示视图宽度乘上视图的最大个数
    _scrollView.contentSize = CGSizeMake(width * count, height);
   //通过for循环将每个view创建出来并且确定位置
    for (NSInteger i = 0; i < count; i++) {
        UIView *view = [_dataSource scrollView:self viewAtIndex:i];
        view.frame = CGRectMake(i * width, 0, width, height);
     //将View加载到ScrollView上面显示出来 
      [_scrollView addSubview:view];
    }
}

 返回页面的个数

- (NSInteger)currentPage
{
    return _scrollView.contentOffset.x / _scrollView.frame.size.width;
}

Contentoffset是scrollview当前显示区域顶点相对于frame顶点的偏移量

5、接下来在ViewController.m里面

- (void)setCurrentPage:(NSInteger)currentPage
{
    _scrollView.contentOffset = CGPointMa<pre name="code" class="objc"> MyScrollView *myScrollView = [[MyScrollView alloc] initWithFrame:CGRectMake(0, 70, 320, 140)];
    myScrollView.dataSource = self;
    [self.view addSubview:myScrollView];
    
    [myScrollView reloadData];
    myScrollView.currentPage = 1;

ke(_scrollView.frame.size.width * currentPage, 0); _currentPage = currentPage;}
确定有10个页面
-(NSInteger)numberOfPageInScrollView:(MyScrollView *)scrollView

{
    return 10;
}
6、每个视图显示的类容
-(UIView *)scrollView:(MyScrollView *)scrollView viewAtIndex:(NSInteger)index
{
    double value = arc4random() %256;
    UIView *v = [[UIView alloc] init];
    v.backgroundColor = [UIColor colorWithRed:index * 0.1 green:index *0.3 blue:value / 256  alpha:1];
    

    return v;
}

上面就实现了一个简单的ScrollView