您的位置:首页 > 产品设计 > UI/UE

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

2015-08-27 22:15 1111 查看
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组件添加的属性名)

代码示例如下:

步骤一如下图:



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



步骤三:在监听方法内实现控制,编辑控制器的.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


运行结果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: