iOS入门-15UIScrollView

概述

iOS的UIScrollView：

• 既可以横向滚动又可以竖向滚动；
• 可以连续的滚动又可以设置成以页为单位的翻页滚动；

重点：

• UIScrollView的属性设置，达到不同的目的效果；
• 滚动状态，滚动参数的监听；
• UIScrollView内容滚动的指定位置；
• UIImage,UIImageView的使用；
• 图片资源在工程目录中的放置；

图片资源在工程目录中的放置

注意：

• 日常正式的开发过程中我们为了适配不同的屏幕，基本图片会提供1x,2x,3x三种规格的图片（1倍，2倍，3倍图）;
• 放置的路径为Assets.xcassets->新建文件夹，文件夹的名称自己定，层级可以很深用来区分不同用途，不同模块的图片方便查找归类;
• 当然为了演示，我们后面的演示图不可能都去弄一套图（1倍，2倍，3倍）所以偷懒将图片放在同级根目录中。（开发中不要这么做）;

示例

• 第一个示例：UIScrollView的基本用法 （类似于常见app的安装引导页面）
• 第二个示例：UIScrollView的高级用法（竖向滚动，点击滚动回顶部）

仔细看代码中注释

第一个示例

先看图

示例代码

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIScrollView* sv = [UIScrollView new];
    //展示窗口大小
    sv.frame = [UIScreen mainScreen].bounds;
    //是否按照整页滚动
    sv.pagingEnabled = YES;
    //是否开启滚动效果
    sv.scrollEnabled = YES;
    //屏幕宽
    int width = [UIScreen mainScreen].bounds.size.width;
    //屏幕高
    int height = [UIScreen mainScreen].bounds.size.height;
    //窗口内部滚动部分尺寸,1242*2688px是11promax屏幕尺寸
    sv.contentSize = CGSizeMake(width*5, height);
    //边缘的弹动效果
    sv.bounces = YES;
    //横向弹动
    sv.alwaysBounceHorizontal = NO;
    //竖向弹动
    sv.alwaysBounceVertical = NO;
    //横向滚动条
    sv.showsHorizontalScrollIndicator = YES;
    //竖向滚动条
    sv.showsVerticalScrollIndicator = NO;
    //背景色
    sv.backgroundColor = [UIColor orangeColor];
    
    //横向排列五张图
    for (int i=0; i<5; i++) {
        //获取图片的名称
        //iOS中要将图片的后缀也就是格式也带上
        NSString* strName = [NSString stringWithFormat:@"bg%d.png",i+1];
        //创建UIImage实例
        UIImage *image = [UIImage imageNamed:strName];
        //UIImageView控件实例
        UIImageView* iv = [[UIImageView alloc] initWithImage:image];
        //设置图片在UIImageView中展示模式（这里点进去都看一下各种模式，并试一下不同模式下的展示效果）
        iv.contentMode = UIViewContentModeScaleToFill;
        //注意iOS中默认单位是pt（point），转化px到pt
        iv.frame = CGRectMake(width*i, 0, width, height);
        
        [sv addSubview:iv];
    }
    
    [self.view addSubview:sv];
}
@end

第二个示例

先看图

示例代码

ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
    //定义成员变量
    UIScrollView* _sv;
}
@end

ViewController.m

#import "ViewController.h"
//ViewController作为UIScrollView的代理实现类，ViewController中就可以回调各种事件函数了
@interface ViewController () <UIScrollViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    _sv = [UIScrollView new];
    //屏幕尺寸
    int width = [UIScreen mainScreen].bounds.size.width;
    int height = [UIScreen mainScreen].bounds.size.height;
    
    //控件窗口尺寸大小
    _sv.frame = CGRectMake(0, 0, width, height);
    //边缘弹性效果
    _sv.bounces = NO;
    //控件内容尺寸
    _sv.contentSize = CGSizeMake(width, height*5);
    //控件背景色
    _sv.backgroundColor = [UIColor orangeColor];
    
    //5张竖向图片
    for (int i=0; i<5; i++) {
        NSString* str = [NSString stringWithFormat:@"timg_%d.jpg",i+1];
        
        UIImage* image = [UIImage imageNamed:str];
        
        UIImageView* iv = [UIImageView new];
        
        iv.image = image;
        
        iv.frame = CGRectMake(0, height*i, width, height);
        
        iv.contentMode = UIViewContentModeScaleToFill;
        
        [_sv addSubview:iv];
    }
    //scrollView内部偏移量
    _sv.contentOffset = CGPointMake(0, 0);
    
    //解决初始化之后UIScrollView可能向下滚动一段距离
    [_sv setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
    
    [self.view addSubview:_sv];
    
    //设置代理监听滚动状态
    _sv.delegate = self;
    
    //添加一个按钮，点击使UIScrollView返回顶部
    UIButton* btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn.frame = CGRectMake(50, 50, 100, 50);
    [btn setTitle:@"返回顶部" forState:UIControlStateNormal];
    [btn setBackgroundColor:[UIColor greenColor]];
    [btn addTarget:self action:@selector(toTop:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

//滚动视图只要滚动之后，都会调用
-(void) scrollViewDidScroll:(UIScrollView *)scrollView{
    NSLog(@"y=%f",scrollView.contentOffset.y);
}

//开始拖拽
-(void) scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"will begin drag");
}

//将要结束
-(void) scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    NSLog(@"will end drag");
}

//结束拖拽
-(void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    NSLog(@"did end drag");
}

//开始减速
-(void) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
    NSLog(@"will begin decelerte");
}

//结束减速
-(void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSLog(@"did end decelerate");
}

-(void)toTop:(UIButton*)btn{
    //第一种方法：直接控制偏移量，很生硬的改变滚动位置
    //_sv.contentOffset = CGPointMake(0, 0);

    //屏幕尺寸
    int width = [UIScreen mainScreen].bounds.size.width;
    int height = [UIScreen mainScreen].bounds.size.height;
    //第二种方法：使用scrollRectToVisible方法
    //采用动画的方式调整滚动控件的位置，原路滚动回去
    [_sv scrollRectToVisible:CGRectMake(0, 0, width, height) animated:YES];
}

@end