Understanding Scroll Views 深入理解 scroll view 读书笔记

Understanding Scroll Views 深入理解 scroll view  读书笔记

It may be hard to believe, but a UIScrollView isn't much different than a standard UIView. Sure, the scroll view has a few more methods, but those methods are really just facades of existing UIView properties. Thus, most of the understanding of how a UIScrollView works comes from understanding UIView - specifically, the details of the two-step view rendering process.

Rasterization and Composition

The first part of the rendering process is known as rasterization. Rasterization simply means to take a set of drawing instructions and produce an image.

rasterization 简单的意思就是采用一些列绘图指令 并产生一个image。

UIButtons, for example, draw an image with a rounded rectangle and a title in the center. These images aren't drawn to the screen; instead, they are held onto by their view to be used during the next step.

Once each view has its rasterized image, these images are drawn on top of each other to produce one screen-sized image in a step called composition.

一旦view 有他的rasterized image,这些image绘制在屏幕上称为 composition 组合 。

The view hierarchy plays a big role in how composition occurs: a view's image is composited on top of its superview's image. Then, that composited image is composited on top of the super-superview's image, and so on. The view at the top of the hierarchy is the window and its composited image (which is a composite of every image in the view hierarchy) is what the user sees.

Conceptually, this idea of layering independent images on top of each other to produce a final, flat image should make sense, especially if you have used a tool like Photoshop before. We also have another article in this issue explaining in detail how pixels get onto the screen.

Now, recall that every view has a bounds and frame rectangle.

每个View都有一个bounds and frame

When laying out an interface, we deal with the frame rectangle of a view. This allows us to position and size the view. The frame and bounds of a view will commonly have the same size (though transforms can alter this), but their origin will usually differ.

frame和bounds的size可能相同，但是他们的origin 经常不同

Understanding how these two rectangles work is the key to understanding how UIScrollView works.

理解这两个rectangle 如何工作的，有助于理解UIScrollView

During the rasterization step, a view doesn't care about what is going to happen in the upcoming composition step.

在rasterizaiton 阶段，一个view并不关心如何组合。

That is to say, it doesn't care about its frame (which will be used to position the view's image) or its place in the view hierarchy (which will determine the order in which it is composited).

也就是说并不关心他的frame或在view视图中的位置。

The only thing a view cares about at this time is drawing its own content.

一个View在rasterization 阶段，唯一关系的是绘制它自己的内容。 

This drawing occurs in each view's drawRect: method.

drawing 发生在每个drawRect:方法里面。

Before drawRect: is called, a blank image is created for the view to draw its content in.

This image's coordinate system is the bounds rectangle of the view.

在drawRect:方法调用之前，一个空白图片创建了，用来绘制view 的内容。

这个图片的坐标系就是View的bounds 矩形。

For nearly every view, the bounds rectangle's origin is {0, 0}.

几乎每个View，bounds  rectangle 的origin是{0,0}

Thus, to draw something in the top-left corner of the rasterized image, you would draw at the origin of the bounds, the point {x:0, y:0}. To draw something in the bottom right corner of an image, you would draw at point {x:width, y:height}. If you draw outside of a view's bounds, that drawing is not part of the rasterized image and is discarded.

During the composition step, each view composites its rasterized image on top of its superview's image (and so on).

在组合阶段，每个view 组合它自己的rasterized image 在它的superview image的顶端。

A view's frame rectangle determines where the view's image is drawn on its superview's image - the origin of the frame indicates the offset between the top-left corner of the view's image and its superview's image.

frame 的origin 暗示着在view图片和它的superview的图片 的左上角之间的offset.

So, a frame origin of {x:20, y:15} will create a composited image where the view's image is drawn on top of its superview's image, shifted to the right 20 points and down 15 points. Because the frame and bounds rectangle of a view are always the same size, the image is composited pixel for pixel to its superview's image. This ensures there is no stretching or shrinking of the rasterized image.

Remember, we're talking about just one composite operation between a view and its superview. Once those two views are composited together, the resulting composite image is composited with the super-superview's image and so on: a snowball effect. 

雪球效应

Think about the math behind compositing an image onto another. The top-left corner of a view's image is offset by its frame's origin and then drawn onto its superview's image:

CompositedPosition.x = View.frame.origin.x - Superview.bounds.origin.x;

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Understanding Scroll Views 深入理解 scroll view 读书笔记

关键词：ie