iOS学习笔记-019.UIScrollView的基本属性和用法

UIScrollView的基本属性和用法

---

一、UIScrollView的作用

• 1.用于显示超出应用程序窗口大小的内容
• 2.允许用户通过拖动手势滚动查看视图中的内容
• 3.允许用户通过捏合手势缩放视图中的内容

---

二、UIScrollView的属性

1. UIScrollView的常见属性

CGSize contentSize：设置UIScrollView的滚动范围
CGPoint contentOffset：UIScrollView当前滚动的位置
UIEdgeInsets contentInset：增加滚动视图四周的增加滚动范围

2. UIScrollView的其他属性

pagingEnabled  为YES,可用来实现分页

BOOL bounces 是否有弹簧效果

BOOL scrollEnabled 是否能滚动

BOOL showsHorizontalScrollIndicator   是否显示水平方向的滚动条

BOOL showsVerticalScrollIndicator   是否显示垂直方向的滚动条

UIScrollViewIndicatorStyle indicatorStyle   设定滚动条的样式

BOOL dragging   是否正在被拖拽

BOOL tracking   按住手指还没有开始拖动的时候值是YES，否则NO

BOOL decelerating   是否正在减速

BOOL zooming   是否正在缩放

---

三、ScrollView的常见属性示意图

---

四、ScrollView的手势缩放步骤

设置UIScrollView的id delegate代理对象
设置minimumZoomScale：缩小的最小比例
设置maximumZoomScale：放大的最大比例
让代理对象实现以下方法，返回需要缩放的视图控件,必须设置，否则不能缩放

  - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

与缩放相关的方法还包括：

// 正在缩放时调用的方法
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
// 缩放完成时调用的方法
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale

---

五、一些属性和缩放的实例

1. 代码

//
//  ViewController.m
//  03_UIView07_UIScrollView01
//
//  Created by 杞文明 on 15/12/25.
//  Copyright © 2015年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
    UIScrollView * _scrollView;
    UIImageView * _imageView;
}

@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    //UIScrollView的创建和设置
    [self createUIScrollView];
    //创建上下左右控件
    [self createUIButton];
}

/**UIScrollView的创建和设置*/
-(void)createUIScrollView{
    //1.创建UIScrollView 并添加到view中
    _scrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
    [self.view addSubview:_scrollView];

    //2.创建图片
    NSString* imagePath = [[NSBundle mainBundle]pathForResource:@"001.jpeg" ofType:nil];
    UIImage * image = [UIImage imageNamed:imagePath];

    //3.创建UIImageView 对象，把图片点击到ImageView中
    _imageView = [[UIImageView alloc]initWithImage:image];

    //4.把UIImageView 对象添加到UIScrollView中
    [_scrollView addSubview:_imageView];

    //5.设置UIScrollView的一些属性
    //5.1 设置滚动范围
    [_scrollView setContentSize:image.size];
    //5.2添加四周的滚动范围
    UIEdgeInsets edgeInsets = UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0);
    [_scrollView setContentInset:edgeInsets];
    [_scrollView setBackgroundColor:[UIColor grayColor]];

    //6.缩放设置
    //6.1设置缩放的最小比例
    [_scrollView setMinimumZoomScale:0.2f];
    //6.2设置缩放的最大比例
    [_scrollView setMaximumZoomScale:2.0f];
    //6.3加入缩放的代理   必须加这个，否则缩放无效
    [_scrollView setDelegate:self];

    //7.去掉滚动条
    [_scrollView setShowsHorizontalScrollIndicator:NO];
    [_scrollView setShowsVerticalScrollIndicator:NO];
}

/**创建上下左右控件*/
-(void)createUIButton{
    //1.创建一个数组，存储控件上得文字
    NSArray * titles = @[@"向左",@"向上",@"向下",@"右"];
    //2.计算控件的宽度的间隔
    //2.1控件的宽度我们设为100
    NSInteger WIDTH = 60;
    NSInteger HEIGHT = 40;
    CGFloat margin = (self.view.bounds.size.width - 4 * WIDTH)/5;//间隔
    //3.使用for循环生成四个控件
    for (NSInteger i=0; i<4; i++) {
        //4.计算位置
        NSUInteger startX = margin + (WIDTH+margin)*i;
        //5.创建控件
        UIButton * button = [[UIButton alloc]initWithFrame:CGRectMake(startX, self.view.bounds.size.height-100, WIDTH, HEIGHT)];
        //6.设置标题
        NSString * str = titles[i];
        [button setTitle:str forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
        [button setBackgroundColor:[UIColor whiteColor]];

        //7.设置tag
        [button setTag:i];

        //8.添加点击事件
        [button addTarget:self action:@selector(moveButtonLocation:) forControlEvents:UIControlEventTouchUpInside];
        //9.把控件添加到view中
        [self.view addSubview:button];
    }
}
    /**点击按钮的代理方法*/
-(void)moveButtonLocation:(UIButton*)button{
    NSInteger tag = button.tag;
    CGPoint offset = [_scrollView contentOffset];
    switch (tag) {
        case 0:
            offset.x -=50;
            break;
        case 1:
            offset.y -=50;
            break;
        case 2:
            offset.y +=50;
            break;
        case 3:
            offset.x +=50;
            break;

        default:
            break;
    }
    // 需要做一个位置的修正
    // 水平方向，注意在修正左边位置时，需要使用edge的-left
    UIEdgeInsets edge = _scrollView.contentInset;
    if (offset.x < -edge.left) {
        offset.x = -edge.left;
    } else if (offset.x > _scrollView.contentSize.width - _scrollView.bounds.size.width + edge.right) {
        offset.x = _scrollView.contentSize.width - _scrollView.bounds.size.width + edge.right;
    }
    // 垂直方向，注意在修正顶部位置时，需要使用edge的-top
    if (offset.y < -edge.top) {
        offset.y = -edge.top;
    } else if (offset.y > _scrollView.contentSize.height - _scrollView.bounds.size.height + edge.bottom){
        offset.y = _scrollView.contentSize.height - _scrollView.bounds.size.height + edge.bottom;
    }
    [_scrollView setContentOffset:offset animated:YES];
}

/**UIScrollView 缩放代理 本代理方法的返回值就是“要缩放的视图对象”*/
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    return _imageView;
}


@end

2. 图示