0000 0000 0000 0011
写于2015.04.05 19:23
1.frame bounce
这两天被UIScroll View 搞的晕头转向,主要还是几个问题没有完全搞懂,总在以为搞定它们时候,又被一个demo否定。目前可能对frame 和 bounce还算理解吧。因此特地写下来记录下。
首先它们的存储都是(x,y,width,height),要分为两个部分看(x,y)和(width,height)。前者是origin,后者是size,分别表示点和尺寸。
1-1.frame
frame
,从层级关系上来说就是,视图View
在父视图SuperView
上的位置。
决定子视图(
subView
)在父视图(superView
)上的位置有两个条件,分别是origin(一个点)和size(视图的尺寸)。我这么想,面前有一块画布,画个矩形,总得有个起笔的地方,那是origin;画多少大,即宽多少,高多少,就绝对了最后在画图中怎么呈现那个矩形。
灰色视图的bounce
是(0,0,400,600)
。注意不是frame,后面会谈到为什么是bounce 而且点取(0,0)
和取别的点有啥不同。
现在我要在灰色视图上绘制我的绿色View,前面说过,我要定一个起始点和尺寸。这里点为(100,60)
,大小是100 * 100,有了点(point
)还不行,在灰色视图中我得有个参考坐标系,否则我怎么知道哪个点是(100,60)
。这时候bounce
中的(0,0)
起了关键性作用,它表示视图最左上角代表(0,0)
(已在图中标出这里很重要,我说的是灰色View的左上角那个点表示(0,0))。横向向右是x轴正方向,纵向向下是y轴正方向。
如此我就知道点(100,60)
在哪个位置,定下点后画多少大多少高就是一个简单的问题。
写到这,基本和用百度 谷歌搜到的东西差不多。
假如我修改绿色视图的frame(200,200,50,50),由于改变了点(point
)的位置,那么相应起笔的位置也不同了,绿色视图最后向右下角移动。
到目前为止,这些都是初学者都知道的。讲完frame 讲下bounce。
1-2.bounce
还是接着上面图片来讲,为什么我要强调灰色视图刚才的bounce
中的orgin
是(0,0)
。因为在scrollView中这个bounce会改变(当然这里我还不想涉及太多)。
要知道平常我们在使用视图的时候会顺手打印下bounce,一般origin
都是(0,0),
你有想过这个点代表什么?改变它的值会怎么样?
现在给出另外一幅图:
画得粗糙了,以后以后自己回过头还能看懂orz。首先 白色视图(view1
)是父视图,然后灰色视图(view2
)add到上面,最后绿色视图(view3
)add到灰色视图上。至于蓝色框框,请暂时忽略。
主要还是灰色视图,首先灰色视图在白色视图位置是定的,然后修改灰色视图的bounce
中的origin
,正如图中所看到的,设为(10,20)。
正如你看到的,bounce的origin 就是视图左上角的点的坐标,换个通俗暴力的说话,我指定左上角那个点就是(10,20),也许下一刻我就指定它为(100,200)了,谁知道呢?
回到刚才话题,既然现在左上角那个点是(10,20)了,那么原来的原点坐标(0,0)在哪里?这就是我为什么要用蓝框标出来了,正如你所看到的图上的(0,0)。不过我们在屏幕中看到的仍然是灰色那块区域!
问题这会影响什么?
我在学习过程中看其他朋友的博客,基本可以概括为两句话:有一个视图ViewA
,它的frame
就是viewA
在父视图的位置;它的bounce
决定了在ViewA
中的子视图布局位置。
而我目前理解是,在灰色视图中要绘制我的绿色视图,必然是要设置绿色视图的frame
的起点(也就是绿色视图左上角箭头标注出的位置)。假如说现在我设置为(200,200),那么这个点是相对于原点(0,0)来说的,正如蓝色框框所标出的原点。 当然你也可以说根据左上角那个点(10,20),我也能知道(200,200)点在哪里。这也是ok的。
关键你要理解我们修改了灰色视图的bounce
中的origin
,就是在指定灰色视图左上角那个点表示多少!
2.当决定了子视图在父视图的位置,改变父视图的bounce
还是接着上图,不过这里可能需要我一点想象力。首先灰色视图bounce
为(0,0,320,568)
,在上面添加一个绿色子视图frame=(200,50,50,50)
。
现在重新设置bounce为(40,40,320,568)
。正如上文所提到的灰色视图左上角那个坐标点为(40,40)。那么原点(0,0)应该在我们看不到的左上角 对吧(想象下)?那么绿色视图的(200,50)位置也要跟着改变,应该向左上角移动。
如果还不清楚,那么这么干:
首先灰色视图左上角点从(0,0)改为(40,40),你知道(200,50)这个点在灰色视图中的位置吗?
不知道?那么这么干
既然灰色视图左上角点坐标是(40,40),那么原点(0,0)在哪里?当你标注出原点之后,在标出(200,50)这个点。你会发现它的位置较原来向左上角移动了!
接下来还得整contentInset 和 contentOffset 。。。。。。