美文网首页
5.3 UIScrollView滚动视图

5.3 UIScrollView滚动视图

作者: 草根小强 | 来源:发表于2019-04-15 16:47 被阅读0次

    UIScrollView滚动视图

    #import "ViewController.h"
    
    #define SCREEN_SIZE [[UIScreen mainScreen] bounds].size
    
    @interface ViewController () <UIScrollViewDelegate>
    
    @end
    
    @implementation ViewController {
        //滚动视图
        UIScrollView * _scrollView;
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        //创建滚动视图
        [self createScrollView];
        //添加子视图
        [self addSubViews];
        //滚动视图的其他属性和设置
        [self makeScrollView];
    }
    
    - (void)createScrollView {
        _scrollView = [[UIScrollView alloc] initWithFrame:[self.view bounds]];
        //滚动视图代理
        _scrollView.delegate = self;
        
        //滚动视图本身的大小:屏幕宽 * 屏幕高
        [self.view addSubview:_scrollView];
    }
    
    - (void)addSubViews {
        //子视图
        UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 2 * SCREEN_SIZE.width, 2 * SCREEN_SIZE.height)];
        imageView.image = [UIImage imageNamed:@"logo_bg"];
        [_scrollView addSubview:imageView];
        //包含内容的大小
        _scrollView.contentSize = CGSizeMake(2 * SCREEN_SIZE.width, 2 * SCREEN_SIZE.height);
        //contentOffset是一个点,这个点表示了子视图中处于(0, 0)的位置
        _scrollView.contentOffset = CGPointMake(100, 0);
    }
    
    - (void)makeScrollView {
        //设置滚动视图能否滚动
        _scrollView.scrollEnabled = YES;
        //能否自动滚动到顶部
        _scrollView.scrollsToTop = YES;
    //    //滚动条相关
    //    //滚动条样式
        _scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    //    //修改滚动条与边界的距离
        _scrollView.scrollIndicatorInsets = UIEdgeInsetsMake(0, 0, 30, 30);
    //    //是否显示滚动条
        _scrollView.showsHorizontalScrollIndicator = NO;
        
    //    _scrollView.showsVerticalScrollIndicator = NO;
        
    //    //滚动条设置是否能够超出子视图滚动
        _scrollView.bounces = YES;
    //    //假如子视图的横向并没有超出滚动视图本身大小,在横向方向上是否能够滚动(前提为bounces属性为YES)
        //纵向
        _scrollView.alwaysBounceHorizontal = YES;
        //横向
    //    _scrollView.alwaysBounceVertical = YES;
        //滚动视图的内边距 就是 上 左 下 右边距
    //    _scrollView.contentInset = UIEdgeInsetsMake(20, 10, 0, 0);
        
        //是否按页滚动
        //一页:表示单倍滚动视图大小
    //    _scrollView.pagingEnabled = NO;
        
        //减速速率
        //滚动视图在发生滚动整个过程中包括这几个过程:1.用户拖拽(Drag) 2.减速阶段(Decelerate)
        //取值范围 (0 ~ 无穷大),0表示减速很快,无穷大表示减速很慢,但是超出1之后影响就不明显了
        _scrollView.decelerationRate = 1;
        //滚动视图是否在减速
        BOOL isDecelerating = _scrollView.isDecelerating;
        
        //1.设置缩放比
        _scrollView.minimumZoomScale = 0.5;
        _scrollView.maximumZoomScale = 2;
    //    //2.实现缩放协议方法
    }
    
    #pragma mark - UIScrollViewDelegate
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
        //滚动视图发生滚动就会出发该方法
        NSLog(@"滚动视图发生滚动了..");
    }
    //
    //即将被拖拽 -> 即将结束拖拽 -> 已经结束拖拽 -> 即将减速 -> 减速结束
    
    //这个方法是重点
    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
        NSLog(@"滚动视图即将被拖拽");
    }
    //
    - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
        //velocity CGPoint 滚动视图将以该速度进行减速
        //targetContentOffset 滚动视图子视图停止的位置
        
        //    targetContentOffset->x = 0;
        //    targetContentOffset->y = 0;
        
        NSLog(@"滚动视图即将结束拖拽");
    }
    //
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
        NSLog(@"滚动视图已经结束拖拽");
    }
    
    - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
        
        NSLog(@"滚动视图将要开始减速");
    }
    
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
        
        //scrollView.contentOffset = CGPointMake(0, 0);
    //    [scrollView setContentOffset:CGPointMake(100, 100) animated:YES];
        
        NSLog(@"滚动视图已经减速结束减速");
    }
    
    - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView {
        
        //scrollView.scrollsToTop = YES;
        return YES;
    }
    
    - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView {
        NSLog(@"滚动视图已经滚动到顶部");
    }
    //这个方法是重点
    - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
        // called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating
        
        NSLog(@"滚动视图结束滚动动画");
    }
    //
    #pragma mark - 缩放协议方法
    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
        //返回被缩放的子视图
        return scrollView.subviews[0];
    }
    
    - (void)scrollViewDidZoom:(UIScrollView *)scrollView {
        NSLog(@"只要子视图发生缩放,就会触发");
    }
    
    - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view {
        NSLog(@"将要开始缩放,参数view表示被缩放的子视图");
    }
    - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale {
        NSLog(@"已经结束缩放,参数view表示被缩放的子视图,scale表示缩放比");
    }
    @end
    

    scrollView属性contentSize、contentInset、contentOffset的区别

    在ios项目中经常要用到scrollView控件中的contentSize、contentInset、contentOffset这3个属性,时间一长了也很容易弄混,因此做一个笔记。

    想要搞清楚这三个属性的区别,需要先了解frame 与 bounds 、center属性这几个属性是什么意思,先看下面的图片:

    区别.png
    frame 是 x、y、width、height 相当于 左边图:(40、40、240、380)
    
    bounds 是 width、height  x与y 默认都是0  相当于 右边图 (0、0、240、380)
    
    center 是一个View的中心,默认是这个view对应的superview 坐标的中间值 
    
    相当于上面的左边图:(160、230)
    
    **说完了上面的 该说正题了。**
    
    **contentSize:**
    
    contentSize是scrollview可以滚动的区域,比如frame = (0 ,0 ,320 ,480) contentSize = (320 ,960),代表你的scrollview可以上下滚动,滚动区域为frame大小的两倍。
    
    **contentInset:**
    
    contentInset的单位是UIEdgeInsets,默认值为UIEdgeInsetsZero,也就是没有扩展的边。
    
    UIEdgeInsets 设置包围tableView的坐标:
    
    typedef struct UIEdgeInsets {
    
    CGFloat top, left, bottom, right;  
    
    } UIEdgeInsets;
    
    代表 上、 左、 下、 右 四个方向扩展出去的值。
    
    **contentOffset:**
    
    contentOffset是UIScrollView当前显示区域的顶点相对于frame顶点的偏移量,例如上面的例子如果拉到最下面,则contentOffset就是(0, 480),也就是y偏移了480。
    

    相关文章

      网友评论

          本文标题:5.3 UIScrollView滚动视图

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