老司机带你探究NSScrollView的滚动原理

版权声明:本文由 高小调 创作,转载请带链接,侵权必究! https://blog.csdn.net/gaoben668/article/details/83146483

本文主要讲述如何实现可以控制NSScrollView滚动的Slider,借此来探究、深入理解NSScrollView滚动的原理,最终实现的Demo如下:

Demo

接下来,我将通过以下四部分来由浅入深的探究NSScrollView。

一、NSScrollView的结构。

当我们通过Interface Builder将一个NSScrollView拖拽至某个ViewController时,整个NSScrollView的结构如下:

NSScrollView的结构

  • Bordered Scroll View:NSScrollView的整体结构,由一个Clip View和两个Scroller构成。
  • Clip View:非常重要的一部分,通过改变自身的bounds属性,可以使subview滚动。
  • Child View:整个NSScrollView中最核心的部分,也是整个NSScrollView中展示的部分。
  • Scroller:如图所示,在NSScrollView中有两个Scroller,一个是垂直滚动的滚动条,一个是水平滚动的滚动条。

二、frame与bounds的区别

在每个View中,都有frame与bounds属性,frame与bounds都是用来描述View的位置、大小信息的,但是存在些许差别,在此我只简单的总结一下。
frame:表示在superview坐标系中的位置与大小。
bounds:表示本身坐标系中的位置和大小。
看下图就明白了(还不明白的,仔细看下图,好好琢磨琢磨):

image.png

三、NSScrollView的滚动原理

通过上节,我知道了frame与bounds的区别之后,我们来思考一个问题:如果保持自身frame不变,改变了superview的bounds之后,会发生什么?

frame代表superview坐标系中的位置,若superview的bounds改变,意味着superview的坐标系发生了改变,如果此时frame没有改变的话,那么就意味着,本地坐标系的原点随着superview坐标系的偏移发生了变化。

简而言之:改变superview的bounds就可以使当前view的显示位置发生变化。

我们结合第一部分的图来看,如果我们需要让Child View向右滚动10像素,那么我们需要将其superview也就是Clip View的bounds的x坐标的基础上加10即可,这样就实现了Child View的水平滚动。(啥?你问我向左滚动怎么办?要不你猜猜看???)

可如果我们需要让Child View向上滚动10像素呢?很简单,使Clip View的bounds的y坐标减10即可。

四、通过slider实现滚动NSScrollView

slider设置Contiuous.
image.png

核心代码如下:

__weak IBOutlet NSSlider *slider;

slider.minValue = 0;
slider.maxValue = NSWidth(childView.frame);

- (IBAction)changed:(NSSlider *)sender {
    NSRect bounds = NSMakeRect(sender.doubleValue,
                               NSMinY(clipView.bounds),
                               NSWidth(clipView.bounds),
                               NSHeight(clipView.bounds));
    [clipView setValue:@(bounds) forKey:@"bounds"];
}

五、完整Demo源代码

https://github.com/gaoxiaodiao/mac_sample/tree/master/NSScrollView

猜你喜欢

转载自blog.csdn.net/gaoben668/article/details/83146483