UIScrollView 使用方法总结

前言

为了方便新人学习和交流特把我之前学习UIScrollView时所总结的文档贡献出来,这里有最基础的UIScrollView使用方法,也有UIScrollView使用注意事项。如有不足之处请评论到下方或者私信与我。

UIScrollView 简介

UIScrollView是展示滚动视图的一个类,继承UIView,有UITableView、UITextView等子类。可以展示比屏幕更大的内容,支持上下左右滚动、缩小放大内容。

最简单的使用方法

利用UIScrollView来显示一个比屏幕大的图片。

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) UIImageView *imageView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //创建要显示的图片
    UIImage *image = [UIImage imageNamed:@"glk300.jpg"];
    self.imageView = [[UIImageView alloc] initWithImage:image];

    //将图片的大小设置为UIScrollView要显示的范围
    self.scrollView.contentSize = self.imageView.frame.size;
    [self.scrollView addSubview:self.imageView];
}

运行程序,可以看到图片可以简单显示了。

延伸

当然,这是最简单的方法,标准的做法是利用懒加载的方式,代码如下,当然,这只是延伸部分。可以选择性跳过

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) UIImageView *imageView;
@property (strong, nonatomic) UIImage *image;
@end

@implementation ViewController

//重写image 的setter方法
- (void)setImage:(UIImage *)image
{
    _image = image;
    
    //设定图像视图的内容
    self.imageView.image = image;
    
    //让图像视图自动根据图像调整大小
    [self.imageView sizeToFit];
    
    //告诉scrollView要显示图像的大小
    self.scrollView.contentSize = image.size;
}

//懒加载imageView
- (UIImageView *)imageView
{
    if (_imageView == nil) {
        _imageView = [[UIImageView alloc] init];
        
        //将图像视图加入scrollView
        [self.scrollView addSubview:_imageView];
    }
    
    return _imageView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    /*
      改成懒加载形式
    UIImage *image = [UIImage imageNamed:@"glk300.jpg"];
    self.imageView = [[UIImageView alloc] initWithImage:image];
    self.scrollView.contentSize = self.imageView.frame.size;
    [self.scrollView addSubview:self.imageView];
     */

     //设置要显示的图像
    self.image = [UIImage imageNamed:@"glk300.jpg"];
    
}

注意:本代码示例是先在StoryBoard中拖入UIScrollView控件然后在代码中往UIScrollView中添加UIImageView。如果是直接在StoryBoard中往UIScrollView中添加UIImageView控件则需要关闭autolayout,否则无法滚动。也就是说如果是直接在StoryBoard中往UIScrollView中添加子控件则必须关闭autolayout,否则无法滚动

这时运行程序发现可以滚动查看图片,但是出现一个问题,如下图所示,图片虽然能够显示完整,但是只能用手指向上拖拽时才能看到图片的底部。(注:红色为UIScrollView)


1.gif

这是因为UIScrollView没有做自动布局。
自动布局设置如下:


自动布局.gif

UIScrollView常用属性

常用属性

 @property(nonatomic)       CGPoint                  contentOffset;               
// default CGPointZero。
//在滚轴视图中,contentOffset属性可以跟踪UIScrollView的具体位置,你能够自己获取和设置它,contentOffset的值是你当前可视内容在滚轴视图上面偏移原来的左上角那个点的偏移量,有contentOffset.x和contentOffset.y。

@property(nonatomic)       CGSize                   contentSize;                 
// default CGSizeZero。
//contentSize是内容的大小,也就是可以滚动的大小。默认是0,没有滚动效果。

@property(nonatomic)       UIEdgeInsets              contentInset; 
// default UIEdgeInsetsZero. add additional scroll area aroundcontent
//contentInset增加你在contentSize中指定的内容能够滚动的上下左右区域数量。contentInset.top、contentInset.buttom、contentInset.left、contentInset.right分别表示上面,下面,左边和右边的距离。

如下图所示:


1.png
@property(nonatomic) BOOL bounces;
设置UIScrollView是否需要弹簧效果

@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled; 
设置UIScrollView是否能滚动

@property(nonatomic) BOOL showsHorizontalScrollIndicator;
是否显示水平滚动条

@property(nonatomic) BOOL showsVerticalScrollIndicator;
是否显示垂直滚动条

@property(nonatomic) BOOL bounces;                   
默认是YES,就是滚动超过边界会反弹,有反弹回来的效果。如果是NO,那么滚动到达边界会立即停止

如果UIScrollView无法滚动,可能是以下原因:
没有设置contentSize
scrollEnabled = NO
没有接收到触摸事件:userInteractionEnabled = NO
没有取消autolayout功能(如果在Storyboard中添加了ScrollView的子控件,要想scrollView滚动,必须取消autolayout)

UIScrollView的缩放功能

UIScrollView的缩放功能就是可以通过两手指在屏幕上的捏合来控制图片的缩放,让图片放大或缩小。

实现UIScrollView的缩放功能其实是通过代理来实现的,当UIScrollView检测到屏幕上有手指的捏合动作时会给代理发送一条消息,询问代理要缩放的内容是什么。

  • 实现代理
    self.scrollView.delegate = self;
  • 遵守代理
    @interface ViewController ()<UIScrollViewDelegate>
  • 实现代理方法
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}
  • 设置缩放比例
//设置缩放比例
        self.scrollView.maximumZoomScale = 2.0;
        self.scrollView.minimumZoomScale = 0.2;

ok,完成缩放功能。

代码

github

参考

参考1
参考2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 掌握 UIScrollView的常见属性 UIScrollView的常用代理方法 UIScrollView的缩放 ...
    JonesCxy阅读 2,712评论 1 12
  • - 什么是UISCrollView + 当手机屏幕需要展示的内容较多超出一个屏幕时,用户可以通过滚动手势来查看屏幕...
    Alan张洋阅读 22,031评论 2 19
  • 脑中的思绪飘荡在沉沦里 如尘埃般的你 在那些没日没夜坎坷而漫长的跋涉之后 艰难的抬起头 仰望那倾斜的夕阳 再举目远...
    798书屋阅读 167评论 0 1
  • 最近生活空下来了。其实也不算是最近,离上一段天天外面跑的日子已经过去超过一个月了。 我真的算是一个很容易焦虑的人吧...
    大大懒懒阅读 301评论 0 0