Swift教程

iOS UIScrollView基本使用和按页滚动

本文主要是介绍iOS UIScrollView基本使用和按页滚动,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

要让一组视图View一起滚动,就需要滚动视图。在Android上提供了ScrollView,而iOS则提供了UIScrollView。UIScrollView比Android上的ScrollView多出3种特性:

  1. 原生支持内容视图超出自身大小范围外。
  2. 原生支持拖动越界回弹的功能。
  3. 支持按页滚动视图。

前2个特性是Android项目中一直费尽心思想实现的功能,但都不理想,或者还有手势冲突等问题。第三个特性一般用ViewPager来做,而不是用ScrollView,并且还自带复用功能。那UIScrollView可以算是没有复用功能的ViewPager了。本篇就来看看这个牛逼的UIScrollView吧。

效果截图.png

UIScrollView创建

  • UIScrollView通过alloc和init进行创建和初始化,UIScrollView除了要设置frame外,还需要设置contentSize,代表内滚动的范围,就是因为这个属性,才能有内容视图超过自身大小范围的能力。
#import "ViewController.h"

@interface ViewController ()

/**
 * 滚动视图
 */
@property(retain,nonatomic) UIScrollView* scrollView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //获取控制器View的宽、高
    CGFloat vcViewWidth = self.view.frame.size.width;
    CGFloat vcViewHeight = self.view.frame.size.height;
    
    //创建UIScrollView
    _scrollView = [[UIScrollView alloc] init];
    //设置UIScrollView的位置和宽高为控制器View的宽高
    _scrollView.frame = CGRectMake(0, 0, vcViewWidth, vcViewHeight);
    //设置画布大小,一般比frame大,这里设置横向能拖动4张图片的范围
    _scrollView.contentSize = CGSizeMake(vcViewWidth * 4, vcViewHeight);
    
    //将ScrollView添加到控制器的View上
    [self.view addSubview:_scrollView];
}

@end
复制代码

添加内容

经过上面的设置,我们的UIScrollView已经添加到屏幕中了,但是还没有内容,接下来我们给UIScrollView添加4张图片,分别横向排列。

  1. 我们往项目中放4张图片,文件名分别为1、2、3、4.jpg。

UIScrollView的4张图片.png

  1. 实例化4个ImageView,添加到UIScrollView中。
//创建图片ImageView添加到ScrollView中
for(int i = 0; i < 4; i++) {
    NSString* imgName = [NSString stringWithFormat:@"%d.jpg", i + 1];
    UIImage* img = [UIImage imageNamed:imgName];
    UIImageView* imgView = [[UIImageView alloc] initWithImage:img];
    imgView.frame = CGRectMake(vcViewWidth * i, 0, vcViewWidth, vcViewHeight);
    [_scrollView addSubview:imgView];
}
复制代码

UIScrollView的其他设置

  • 开启、禁用滚动,默认为YES
_scrollView.scrollEnabled = YES;
复制代码
  • (特性一)是否可以边缘弹动效果,默认为YES,能让内容超过自身大小
_scrollView.bounces = YES;
复制代码
  • (特性二)开启、禁用纵向、横向弹动,这2个属性控制不同方向的越界拖动、回弹,默认都为YES
//开启横向弹动效果
_scrollView.alwaysBounceHorizontal = YES;
//关闭纵向弹动效果
_scrollView.alwaysBounceVertical = NO;
复制代码
  • (特性三)是否按照整页滚动,默认为NO,设置为YES就是按页来滚动
_scrollView.pagingEnabled = YES;
复制代码
  • 显示、隐藏滚动进度条,默认为YES
//隐藏横向滚动条
_scrollView.showsHorizontalScrollIndicator = NO;
//隐藏竖向滚动条
_scrollView.showsVerticalScrollIndicator = NO;
复制代码

UIScrollView设置代理

UIScrollView的代理,就是设置UIScrollView上的事件回调的协议,一般我们让当前控制器来实现协议。

  1. 视图控制器实现UIScrollView的代理协议UIScrollViewDelegate。
文件:ViewController.h

@interface ViewController : UIViewController<UIScrollViewDelegate>

@end
复制代码
  1. 给UIScrollView设置代理,并复写代理方法。代理方法都在代码里,就不一一列举了。
文件:ViewController.m

#import "ViewController.h"

@interface ViewController ()

/**
 * 滚动视图
 */
@property(retain,nonatomic) UIScrollView* scrollView;

@end

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //...省略上面提到的设置
 
	 //将ScrollView添加到控制器的View上
    [self.view addSubview:_scrollView];
    //设置代理
    _scrollView.delegate = self;   
}

//滚动视图移动时回调
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    NSLog(@"视图移动 x: %f", scrollView.contentOffset.x);
}

//滚动视图结束拖动时回调
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    NSLog(@"视图结束拖动");
}

//滚动视图即将开始拖动时回调
- (void) scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    NSLog(@"滚动视图即将开始拖动");
}

//滚动视图结束拖动时回调
- (void) scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    NSLog(@"滚动视图结束拖动");
}

//视图即将减速时调用
- (void) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
    NSLog(@"视图即将减速");
}

//视图已经结束减速时回调
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSLog(@"视图已经结束减速");
}

@implementation ViewController
复制代码

让UIScrollView滚动到指定位置

  1. 马上让ScrollView滚动到指定位置,没有缓慢滚动的效果。
self.scrollView.contentOffset = CGPointMake(0, 0);
//或者
[self.scrollView scrollRectToVisible:CGRectMake(0, 0, 300, 400) animated:NO];
复制代码
  1. 支持缓慢的动画滚动效果。
[self.scrollView scrollRectToVisible:CGRectMake(0, 0, 300, 400) animated:YES];
复制代码
这篇关于iOS UIScrollView基本使用和按页滚动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!