iPhone开发之UIScrollView滚动组件的使用（二）拖线实现按钮控制大图移动利用contentOffset属性

叁歲伎倆 2022-08-04 12:50 176阅读 0赞

1、@property（nonatomic） CGPoint  contentOffset  
属性含义：  
（1）当UIScrollView内部的内容滚动时，内容相对于UIScrollView左上角的偏移。  
（2）另一种理解方式：内容滚动到了什么位置。  
注意：offset是偏移的意思，相对于某个点坐标的x、y的偏移  
2、UIScrollView内的内容不仅可以用手进行滚动，也可以通过代码进行控制滚动。  
3、实例：  
通过点击按钮，实现大图自动滚动（修改contentOffset）  
步骤如下：  
（1）拖进图片资源到Image.xcassets  
（2）点击Main.storyboard ,拖进一个UIScrollView组件到编辑界面，并设置大小。再往UIScrollView组件内拖进一个画框UIImageView，并进行图片设置，并把UIIMageView的大小设置和图片的大小相同。  
（3）拖线分别为UIIMageView组件和UIScrollView组件添加属性。  
（4）在控制器.m文件的viewDidLoad方法中添加代码，把画框UIImageView的大小frame中的size或画框中图片的大小即image.size告知（赋值）给UIScrollView中的contentSize属性。  
（5）关闭自动布局。  
（6）运行成功能进行移动时，再往编辑界面添加按钮组件，并拖线实现监听方法。  
（7）在控制器按钮的监听方法内进行实现UIScrollView组件的contentOffset属性的修改，为了增加效果还可以添加block动画  
或者直接用动画的方式设置contentOffset属性的值。  
代码如下：  
\-（IBAction）scroll\{  
  CGPoint point=self.scrollView.contentOffset;  
point.x+=150;  
point.y+=150;  
//直接修改contentOffset，没有动画效果  
//self.scrollView.contentOffset=point;  
  
  
// 通过block动画实现滚动  
//\[UIView animateWithDuration:1.0  animations:^\{  
//self.scrollView.contentOffset=point;  
//\}\];  
  
  
//  直接使用动画的方式来设置contentOffset属性的值  
\[self.scrollView  setContentOffset:point animated:YES \];  
\}  
  
  
注意：  
（一）无论是改变空间的位置还是大小都不能直接修改其属性值，都分为三个步骤即——>  
\-获取组件原先的信息属性值  
\-对信息属性值进行修改  
\-把修改后的属性值直接赋给组价相应的属性  
（二）如果不想在拖动完后显示滚动组件的空白内容，可以在控制器的viewDidLoad方法中添加如下代码  
//  隐藏滚动指示器  
self.scrollView.showHorizontalScrollIndicator=NO;  
self.scrollView.showVerticalScrollIndicator=NO;

（scrollView是拖线为UIScrollView组件添加的属性名）

代码示例如下：

步骤一如下图：

![Center][]

步骤二：拖线实现监听方法

![Center 1][]

步骤三：在监听方法内实现控制，编辑控制器的.m文件如下：

//
    //  ViewController.m
    //  datu
    //
    //  Created by apple on 15/8/26.
    //  Copyright (c) 2015年 LiuXun. All rights reserved.
    //
    
    #import "ViewController.h"
    
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
    @property (weak, nonatomic) IBOutlet UIImageView *imageview;
    - (IBAction)scroll;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    	// 方式一：设置UIScrollView内容的大小为画框的大小
        self.scrollView.contentSize=self.imageview.frame.size;
        
        //  方式二：设置UIScrollView内容的大小为画框内图片的大小
        self.scrollView.contentSize=self.imageview.image.size;
        self.scrollView.showsHorizontalScrollIndicator=NO;
        self.scrollView.showsHorizontalScrollIndicator=NO;
    }
    
    - (void)didReceiveMemoryWarning
    {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    - (IBAction)scroll {
        //  通过代码让图片滚动
        CGPoint point=self.scrollView.contentOffset;
        point.x+=150;
        point.y+=150;
        
        // 直接修改contentOffset没有动画效果
       // self.scrollView.contentOffset=point;
        
        // 通过block动画进行实现
        [UIView animateWithDuration:1.0 animations:^{
            self.scrollView.contentOffset=point;
        }];
    //    [self.scrollView setContentOffset:point animated:YES];
    }
    @end

运行结果如下：

![Center 2][]

[Center]: /images/20220731/280b5f7fda834bdea490468af6151837.png
[Center 1]: /images/20220731/f6acaf3d52f54823b06471917db09266.png
[Center 2]: /images/20220731/d2d9b6dfd1af4ed68d9d11d3b7f165c2.png