UIScrollView基本使用

1.什么是UIScrollView

移动设备的屏幕大小是极其有限的，因此直接展示在用户眼前的内容也相当有限

当展示的内容较多，超出一个屏幕时，用户可通过滚动手势来查看屏幕以外的内容

普通的UIView不具备滚动功能，不能显示过多的内容

UIScrollView是一个能够滚动的视图控件，可以用来展示大量的内容，并且可以通过滚动查看所有的内容

举例：手机上的“设置”、其他示例程序

1.1UIScrollView的常见属性

@property(nonatomic) CGPoint contentOffset;

这个属性用来表示UIScrollView滚动的位置

@property(nonatomic) CGSize contentSize;

这个属性用来表示UIScrollView内容的尺寸，滚动范围（能滚多远）

@property(nonatomic) UIEdgeInsets contentInset;

这个属性能够在UIScrollView的4周增加额外的滚动区域

1.2.UIScrollView的其他属性

@property(nonatomic) BOOL bounces;

设置UIScrollView是否需要弹簧效果

@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;

设置UIScrollView是否能滚动

@property(nonatomic) BOOL showsHorizontalScrollIndicator;

是否显示水平滚动条

@property(nonatomic) BOOL showsVerticalScrollIndicator;

是否显示垂直滚动条

1.3UIScrollView的使用

.UIScrollView的用法很简单

将需要展示的内容添加到UIScrollView中

设置UIScrollView的contentSize属性，告诉UIScrollView所有内容的尺寸，也就是告诉它滚动的范围（能滚多远，滚到哪里是尽头）

如果UIScrollView无法滚动，可能是以下原因：

没有设置contentSize

scrollEnabled = NO

没有接收到触摸事件:userInteractionEnabled = NO

没有取消autolayout功能（要想scrollView滚动，必须取消autolayout）



利用UIScrollView显示下面的大图片

2.实例

实例1：

//
//  MJViewController.m

#import "MJViewController.h"

@interface MJViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *minionView;
- (IBAction)scroll;

@end

@implementation MJViewController

- (void)viewDidLoad
{
[super viewDidLoad];

// 设置scrollView内容的尺寸(滚动的范围)
//    self.scrollView.contentSize = CGSizeMake(892, 480);
//    self.scrollView.contentSize = self.minionView.image.size;
self.scrollView.contentSize = self.minionView.frame.size; // 总体内容的范围(滚动范围)
// <#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>

self.scrollView.contentInset = UIEdgeInsetsMake(10, 20, 40, 80);

//    self.scrollView.frame.size; // 可视范围
}

- (IBAction)scroll {
//    [UIView animateWithDuration:1.0 animations:^{
//        self.scrollView.contentOffset = CGPointMake(100, 0);
//    }];

//    CGPoint offset = CGPointMake(-100, -100);
CGPoint offset = self.scrollView.contentOffset;
offset.x += 10;
offset.y += 10;
[self.scrollView setContentOffset:offset animated:YES];  //scrollView自带的一个开启动画的方法
}
@end

运行效果

实例2：

1.程序运行效果：



2.实现步骤：
a.设置启动图片



b..配置Contents.json文件

{
"images" : [
{
"orientation" : "portrait",
"idiom" : "iphone",
"extent" : "full-screen",
"minimum-system-version" : "7.0",
"filename" : "Default@2x.png",
"scale" : "2x"
},
{
"orientation" : "portrait",
"idiom" : "iphone",
"extent" : "full-screen",
"minimum-system-version" : "7.0",
"filename" : "Default-568h@2x.png",
"subtype" : "retina4",
"scale" : "2x"
},
{
"orientation" : "portrait",
"idiom" : "iphone",
"extent" : "full-screen",
"filename" : "Default.png",
"scale" : "1x"
},
{
"orientation" : "portrait",
"idiom" : "iphone",
"extent" : "full-screen",
"filename" : "Default-568h@2x.png",
"subtype" : "retina4",
"scale" : "2x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

c.添加6个按钮



d.添加下面的横条



e.添加上面的导航条



f.设置导航条的alpha属性



g.代码：

//
//  MJViewController.m

#import "MJViewController.h"

@interface MJViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
/**
*  最后一个按钮
*/
@property (weak, nonatomic) IBOutlet UIButton *lastBtn;

@end

@implementation MJViewController

- (void)viewDidLoad
{
[super viewDidLoad];

// 设置内容尺寸 (就是最后那个横条按钮的坐标Y值加上这个横条按钮的高度就是这个内容的最大
//    CGFloat contentH = self.lastBtn.frame.origin.y + self.lastBtn.frame.size.height+ 10;
// 10是底部的间距
CGFloat contentH = CGRectGetMaxY(self.lastBtn.frame) + 10; //CGRectGetMaxY这个方法是取得
self.scrollView.contentSize = CGSizeMake(0, contentH);

// 增加额外的滚动区域(在顶部增加64的区域,在底部增加44的区域)
self.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 44, 0);

// 设置一开始的滚动位置(往下滚动64)
self.scrollView.contentOffset = CGPointMake(0, -64);
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

3.总结：

3.1偏移量

@property(nonatomic) CGPoint contentOffset;

内容的左上角和scrollView的左上角相比较，差值就是偏移量

3.2 contentSize

@property(nonatomic) CGSize contentSize;

内容能够到达的区域范围