ios uiscrollView 使用理解

1、 scrollview 常用属性理解

UIScrollVie的常用属性：
contentSize 滚动范围，比scrollview的size大
contentInset 内边距， contentSize和scrollView的边框的一个距离，和div一样，内变距会计算到contentSize中
contentOffset 偏移量, contentSize+padding 距离边框的距离
弹簧效果
滚动指示器
是否可以滚动

功能实现：
ViewController: scrollView常用属性设置
1. 拖入scrollview
2. 拖imageView设置大小和图片大小一致,1024*768
3. 常用属性理解



#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *myscrollview;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    /**
      1.  设置scrollView 414* 736， 设置子View ImageView和图片大小一致 1024*768
                scrollView 设置滚动范围     contentSize
     如果size 为宽度设置为0 ，表示横向不能滚动
       
     */
     self.myscrollview.contentSize= CGSizeMake(1024, 768);
    
    // 2. 设置水平垂直滚动条
    _myscrollview.showsHorizontalScrollIndicator=false;
    _myscrollview.showsVerticalScrollIndicator=false;
    // 3. 弹簧效果，默认Yes
    _myscrollview.bounces=false;
    // 4. 不设置contentSize的时候，弹簧效果开启，依然看不到效果
    // 如果要看到弹簧效果，设置如下
    _myscrollview.bounces=YES;
    _myscrollview.alwaysBounceHorizontal=YES;
    _myscrollview.alwaysBounceVertical=YES;
    
    // 5.内边距
    // 设置padding  和div一样，会加入 content中
    _myscrollview.contentInset= UIEdgeInsetsMake(10, 10, 10, 10);
    
    // 6. content 滚动距离
   // scrollview 滑动  contentoffset.y  累加
    _myscrollview.contentOffset= CGPointMake(10, 10);
    
    /**  7. 不能滚动  原因
     1. contentSize 小于比 scrollView 小
     2.  _myscrollview.userInteractionEnabled=false;
     3. _myscrollview.scrollEnabled=false;
     */
  
}



- (IBAction)scrollTest:(id)sender {
    
     // 1. 取出scrollVie 的 contentSize
    CGPoint offset = _myscrollview.contentOffset;
    
    offset.x= offset.x+10;
    offset.y = offset.y + 10;
    
    // 直接设置没有动画
    [_myscrollview setContentOffset:offset];
    
    // 什么是动画，动画就是属性变化，放入动画函数中
//    [UIView animateWithDuration:2.0 animations:^{
//         [self.myscrollview setContentOffset:offset];
//    }];
    
    // 使用系统自带函数
    [self.myscrollview setContentOffset:offset animated:YES];
    
    // 在滚动的时候 contentSize -> 子View contentSize 内容滚动范围
    // scrollview.frame.size   -> scrollView本身 高度
    NSLog(@"contentSize:%@, frameSize:%@",NSStringFromCGSize(_myscrollview.contentSize),
          NSStringFromCGSize(_myscrollview.frame.size));
}


@end

效果图:

2. UIscrollView在xib中使用滚动监听

UiScrollView

垂直滚动
1、拖入scrollview 设置约束
2、在scrollview中拖入 contentView中设置上下左右约束为0
3、设置高度 contentSize的高度
4、设置水平居中
5. 然后拖入控件在 contentView中布局

水平滚动
1、拖入scrollview 设置约束
2、在scrollview中拖入 contentView 设置上下左右约束为0
3、设置高度 contentSize的宽度
4、设置垂直居中
5. 然后拖入控件在 contentView中布局


#import "ViewController2.h"

@interface ViewController2 ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *myscrollview;

@end

@implementation ViewController2

- (void)viewDidLoad {
    [super viewDidLoad];
    //实际开发中如何确定scrollView contentSize
    //  获取 最后一个控件的  的Y 值
  //  CGFloat lastImageY = CGRectGetMaxY(_lastImage.frame);
  //   _myscrollview.contentSize= CGSizeMake(0, lastImageY);
      // 设置内边距以后，contextSize区域还是在屏幕顶端，padding在屏幕上
      _myscrollview.contentInset= UIEdgeInsetsMake(60, 0, 40 , 0);
    // 向下偏移 -60
      _myscrollview.contentOffset= CGPointMake(0, -60);
      _myscrollview.delegate =self;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    NSLog(@"scrollView滚动时候一直调用：%@",NSStringFromCGPoint(scrollView.contentOffset));
}
// Drag: 拖拽，开始拖拽的时候调用
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"开始拖拽时候调用,只会调用一次");
}
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    
    NSLog(@"停止拖拽时候调用,只会调用一次");
}

@end

效果图：

3. ScrollView 设置图片缩放

按照如下设置即可：
//1. 实际开发中把这里设置为1
_scrollView.minimumZoomScale = 0.3;
_scrollView.maximumZoomScale = 3;
//2. 返回的view将被拉伸（缩放），告诉ScrollView 要缩放哪一个View
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return _imageView;//返回值为需要缩放的对象
}



#import "ScrollViewController.h"

#define kImageCount 5

@interface ScrollViewController ()<UIScrollViewDelegate>


@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ScrollViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
        /**
         minimumZoomScale;   -->图片最小的缩小倍数
          maximumZoomScale;  --> 图片最大的放大倍数
        */
       //1. 实际开发中把这里设置为1
       _scrollView.minimumZoomScale = 0.3;
       _scrollView.maximumZoomScale = 3;
       
       // 设置控制器成为scrollView的代理
       _scrollView.delegate = self;
}

//2.  返回的view将被拉伸（缩放），告诉ScrollView 要缩放哪一个View

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return _imageView;//返回值为需要缩放的对象
}

// 只要图片在放大/缩小的过程中都会一直调用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    NSLog(@"scrollViewDidZoom");
}

// 开始缩放的时候调用
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view {
    NSLog(@"scrollViewWillBeginZooming");
}

// 结束的时候调用
// withView: 进行缩放的view
// atScale: 缩放的倍数
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale {
    NSLog(@"scrollViewDidEndZooming");
}



@end

4. 图片轮播实现

4.1. 设置scrollView 图片显示
_scrollView.contentSize = CGSizeMake(kImageCount * kScrollViewSize.width, 0);

扫描二维码关注公众号，回复： 12683643 查看本文章

4.2. 设置指示器
_pageControl.currentPage = 0;

4.3. 实现拖动页面切换 _pageControl.currentPage
scrollViewDidEndDecelerating：当scrollView停止减速的时候调用，表示页面已经切换，切换指示器_pageControl.currentPage

4.4. 模仿：实现点击按钮滚动页面自动
_pageControl.currentPage = currentPage;
[_scrollView setContentOffset:offset animated:YES];

4.5. 通过定时实现自动轮播
[self initImageTimer];
scrollViewWillBeginDragging: 当拖拽的时候停止定时器
scrollViewDidEndDragging：当停止拖拽的时候恢复定时器

//
//  BannerController.m
//  scrollViewDemo
//
//  Created by 邓安置 on 2020/6/11.
//  Copyright © 2020 邓安置. All rights reserved.
//

#import "BannerController.h"

#define kScrollViewSize (_scrollView.frame.size)

#define kImageCount 5

@interface BannerController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

@property (nonatomic, strong) NSTimer *timer;
@end

@implementation BannerController

- (void)viewDidLoad {
    [super viewDidLoad];
// 下面代码写完,那么就可以滚动了
    //  1. 设置scrollView 图片显示
    // 设置控制器成为scrollView的代理
    _scrollView.delegate = self;
    
      for (int i = 0; i < kImageCount; i++) {
            // 计算imageView的x值
            CGFloat imageViewX = i * kScrollViewSize.width;
            
            UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(imageViewX, 0, kScrollViewSize.width, kScrollViewSize.height)];
            
            // 设置图片
    //        imageView.image =[UIImage imageNamed:@"img_01"];
            // 拼接图片的名称
            NSString *imageName = [NSString stringWithFormat:@"img_%02d",i + 1];
            
            imageView.image = [UIImage imageNamed:imageName];
            
            
            // 添加到scrollView
            [_scrollView addSubview:imageView];
        }
    
    // 设置 scrollView的contentSize
    _scrollView.contentSize = CGSizeMake(kImageCount * kScrollViewSize.width, 0);
    // 隐藏滚动指示器
    _scrollView.showsHorizontalScrollIndicator = NO;
    // scrollView的分页效果 (根据scrollView的宽度进行分页的)
    _scrollView.pagingEnabled = YES;
    
    
    // 2. 设置指示器
    // 设置总共有几个点
       _pageControl.numberOfPages = kImageCount;
       // 设置指示器的颜色
       // 非当前的指示器
       _pageControl.pageIndicatorTintColor = [UIColor grayColor];
       // 设置当前指示器的颜色
       _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
       // 设置当前在第几个点 , 取值范围是 0 .. numberOfPages - 1
       // 设置的currentPage如果超出最大的范围， 就在最后一个显示
       // 设置的currentPage如果超出最小的范围 就在第一个显示
       // 动态 滚动的时候不断改变这点点即可
       _pageControl.currentPage = 0;
    
    
   // 5. 创建计时器
     [self initImageTimer];
}

#pragma mark -
#pragma mark -  当scrollView停止减速的时候调用
// 3. Decelerating 减速
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    // currentPage = scrollView.contentOffset.x / kScrollViewSize.width
    // 通过 currentPage++不行，如果通过currentPage++那么要判断向左滑动还是向右
    // 这里有一个小算法： 判断当前的页，当前坐标除以第一页的坐标
    _pageControl.currentPage = scrollView.contentOffset.x / kScrollViewSize.width;
}


 //4.  模仿： 实现点击按钮滚动
 - (IBAction)didClickButton:(id)sender {
     /**
      1. 取出scrollView的contentOffset
      2. 取出 pagecontroll 的 currentPage
      3. 进行修改
      4. 赋值回去
      */
     
     // 1. 取出 contentOffset
     CGPoint offset = _scrollView.contentOffset;
     
     // 2. currentPage
     NSInteger currentPage = _pageControl.currentPage;
     
     // 3. 进行修改
     
     if (currentPage == 4) {
         // 到了最后一张, 再次点击的时候， 到第一张图片的位置
         // currentPage 修改为0
         currentPage = 0;
         
         // 修改 scrollView的contentOffset
         offset = CGPointZero;
         
     } else {
         
         currentPage += 1;
         
         offset.x += kScrollViewSize.width;
     }
     
     // 4. 赋值回去
     _pageControl.currentPage = currentPage;
     [_scrollView setContentOffset:offset animated:YES];
     
 }



/**
 在开始拖拽的时候， 把计时器停止
 
 invalidate 无效的意思
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 让计时器无效
    [_timer invalidate];
}

/**
 当停止拖拽的时候， 让计时器开始工作
 手指离开scrollView的时候
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
   [_timer fire];
    
    [self initImageTimer];
}

#pragma mark -
#pragma mark -  创建计时器
- (void)initImageTimer {
    /**
     scheduled 计划，安排
     interval : 间隔
     target :  一般指控制器
     selector: 方法
     userInfo : 用户自定义的参数
     repeats: 重复
     
     每隔1秒钟 调用 控制器的  didClickButton： 方法， 传递的参数为nil
     
     一旦创建就会立即生效
     
     在使用timer的时候， 如果调用了 invalidate方法， 那么这个计时器就不会再次生效
     重新创建新的timer
     */
    _timer = [NSTimer scheduledTimerWithTimeInterval:2
                                              target:self
                                            selector:@selector(didClickButton:)
                                            userInfo:nil
                                             repeats:YES];
    
   // [_timer fire];  调用fire ， 这个计时器会立即执行， 不会等待 interval 设置的时间
    /*** 问题： 如果界面有两个scrollview的时候，当滑动另外一个
     *    scrollview当前scrollview可能不会自动滚动，用户交互的scrollview
    *    优先级更高，通过下面设置，把优先级设置成一样高了
    **/
    NSRunLoop *mainLoop = [NSRunLoop mainRunLoop];
    
    
    [mainLoop addTimer:_timer forMode:NSRunLoopCommonModes];
    
}

@end

效果图：

源码目录：

ViewController: scrollView常用属性设置
ViewController2: scrollView 滚动监听
ScrollViewController: 实现图片缩放
BannerController：图片轮播实现

源码地址 :https://download.csdn.net/download/dreams_deng/12514519

ios uiscrollView 使用理解

1、 scrollview 常用属性理解

2. UIscrollView在xib中使用 滚动监听

3. ScrollView 设置图片缩放

4. 图片轮播实现

猜你喜欢

2. UIscrollView在xib中使用滚动监听