免费开源的iOS开发学习平台

UIScrollView滚动视图:1-基本使用

由于移动设备的屏幕大小有限,所以不能像PC一样显示很多内容,因此,必须通过手指滚动来查看更多的内容。UIScrollView是一个能够在上下左右四个方向滚动的控件,我们常见的UITableView,UICollectionView也是继承自UIScrollView。

UIScrollView简介

UIScrollView的继承关系如下所示,UIScrollView也是UIView的子类,因此也具有UIView的所有属性和方法,例如,可以设置UIScrollView的背景颜色,并且可以在UIScrollView对象上添加子视图。

UIScrollView用于显示超出屏幕大小的内容,一般需要配合其他控件来使用,如添加一个UIImageView子控件,可以用来显示更大的图片。UITableView、UICollectionView以及UITextView这些可以滑动显示更多内容的控件都是UIScrollView的子类。例如,在实际应用开发中,常见的图片轮播期就是使用UIScrollView来实现的。

UIScrollView的常用属性

UIScrollView继承自UIView, 所以UIView拥有的属性UIScrollView都有,此外它还有一些自己的特定属性。

UIScrollView在使用过程中有如下3个核心属性:

  • contentSize:表示UIScrollView内容的尺寸(即可滚动区域),一般会大于屏幕大小;
@property(nonatomic) CGSize contentSize;  // 默认大小为0

  • contentOffset: 当前屏幕显示区域的原点(即左上角原点),在UIScrollView的位置;
@property(nonatomic) CGPoint contentOffset;  // 默认从原点开始

  • contentInset: 可以在UIScrollView内容的四周增加额外的滚动区域(设置的值为:上、左、下、右)。
@property(nonatomic) UIEdgeInsets contentInset;  //默认为0

除此之外,UIScrollView还有如下几个常用的属性。

  • bounces:当UIScrollView滚动到边界时,再继续滚动会有个反弹的效果(通常设置为YES)。注意:如果不设置contentSize,bounces的效果是显现不出来的,除非将alwaysBounceVertical和alwaysBounceHorizontal属性设置为YES;
  • showsHorizontalScrollIndicator: 显示水平指示器 (YES为显示);
  • showsVerticalScrollIndicator:显示垂直指示器;
  • pagingEnabled:分页效果(是否整页翻动);
  • scrollEnabled:UIScrollView是否可以滚动;
@property(nonatomic) BOOL bounces; //默认为YES
@property(nonatomic) BOOL showsHorizontalScrollIndicator; //默认为YES
@property(nonatomic) BOOL showsVerticalScrollIndicator;//默认为YES
@property(nonatomic,getter=isPagingEnabled) BOOL pagingEnabled ; //默认为NO
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled; 默认为YES

示例代码

下方的示例代码中创建了一个UIImageView对象,并且把该对象添加到一个UIScrollView对象上,UIScrollView对象的大小与UIImageView中image图片的大小保持一致,我们在选择图片时,尽量选择一张大一些的图片,从而可以看到滑动显示的效果。

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建一个UIImageView对象
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
    //创建一个与屏幕等宽等高的滚动视图
    UIScrollView *myScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    //设置滚动区域的大小
    myScrollView.contentSize = imageView.bounds.size;
    //设置滚动视图的其他属性
    myScrollView.backgroundColor = [UIColor redColor];
    myScrollView.contentOffset = CGPointMake(0, 0);
    myScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
    //添加子视图
    [myScrollView addSubview:imageView];
    [self.view addSubview:myScrollView];
}

运行结果如下,可以向屏幕四周滑动,从而显示这张比屏幕大的图片。

示例代码

https://github.com/99ios/8.1.1