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; 

内容能够到达的区域范围