contentSize,contentOffset,conten

2020-03-22  本文已影响0人  鄂北

NOTE:UITableView和UICollectionView是继承于UIScrollView的,所以下面所讲的contentSize,contentOffset,contentInset都是适用于UIScrollView, UITableView和UICollectionView的。下面小编讲的UIScrollView就统指为UIScrollView, UITableView,UICollectionView三者了。

UIScrollView为什么能滑动
下面是小编所理解:

UIScrollView.001.jpeg

每个控件都有一个frame的属性来设置控件的大小和位置。在UIScrollView上有一个显示区域用来显示内容的,当内容区域大于显示区域时,因为要展示的内容比显示的区域要大,那多余的内容怎么显示呢,那就只能滑动内容了,只有内容在显示的区域里了才能显示,没在显示的区域里就不显示了。如上图所示,紫色的区域就是UIScrollView的大小,也就是内容的显示区域。蓝色的就是要显示的内容。图中的蓝色(内容)的高是要大于显示区域的高,两者的宽是相等的。所以内容不能全部在UIScrollView的显示区域上显示出来,想要将内容全部看完就只能拖动内容上下滑动在显示区域上显示。

contentSize:是UIScrollView的一个属性用来设置内容的大小的,frame是设置UIScrollView的大小。只有当内容大小大于UIScrollView的大小时才能滑动(如果宽相等,内容高大于UIScrollView的高,则能上下滑动。如果高相等,内容宽大于UIScrollView的宽,则能左右滑动。如果宽和高都大于,则上下左右都能滑动)

//设置UIScrollView的大小和位置
scrollview.frame = CGRectMake(0, 0, 200, 400);
//设置内容大小
scrollview.contentSize = CGSizeMake(200, 800);

contentOffset:是用来设置内容的偏移。这里的偏移以UIScrollview的左上顶点为参照点(0,0),向上y轴为正,向下y轴为负,向左x轴为正,向右x轴为负如下图所示

UIScrollView003.001.jpeg

图中紫色为UIScrollview的显示区域,蓝色的为内容。图中很明显内容的顶部是超出了UIScrollview的顶部,这就是内容偏移了。内容的滑动也就是内容在相对于UIScrollview进行偏移。

下面这行代码是设置了内容向左偏移0(也就是向左不偏移),向下偏移100(负为向下偏移,正为向上偏移)

scrollview.contentOffset = CGPointMake(0, -100);

contentInset:上面说到,在UIScrollView上我们可以认为有一个显示区域,这个显示区域默认为UIScrollView的大小,其作用就是用来显示内容的(这是所小编理解的,因为这样理解更直观明了)。contentInset的作用就用来设置显示区域的上、左、下、右相对于UIScrollView的偏移。显示区域左边的偏移是相对于UIScrollView的左边来说的,显示区域的左边往UIScrollView左边偏移,则偏移量为负,往右边偏移则为正。同理,其他三个方向分别以各自方向为参照点,显示区域往UIScrollView内偏移的话偏移量就为正
往外偏移就为负。

scrollview.contentInset = UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>);

在上面的代码中可以看到UIEdgeInsetsMake就是用来设置上、左、下、右的偏移的。


UIScrollView003.002.jpeg

NOTE:当显示区域某个方向偏移出了UIScrollView(也就某个方向超出了UIScrollView的大小,比如显示区域的上边超出了UIScrollView的上边),那么超出UIScrollView的部分将无法显示。而因为内容总是在显示区域显示,所以内容也会在某个方向无法显示出来。在下面的contentInset与contentOffset的区别中,我将贴上动图,供大家更直观的理解

contentInset与contentOffset的区别:两者都是设置偏移的,contentInset是设置显示区域的偏移,contentOffset是设置内容偏移。内容总是在显示区域显示

在下面的两个动图中(动图中是用的UITableView),小编都分别设置了contentInset的顶部偏移-200

self.tableview.contentInset = UIEdgeInsetsMake(-200, 0, 0, 0);

和contentOffset的Y轴偏移200

self.tableview.contentOffset = CGPointMake(0, 200);

contentInset设置显示区域的偏移

contentInset.gif

大家可以看到在contentInset设置顶部偏移-200前,内容是可以全部显示,而当设置了顶部偏移-200后顶部有一部分看不到了,就算往下拉tableview,内容也会自动回去隐藏一部分。这是因为我们设置了显示区域的顶部偏移了-200,显示区域的顶部有一部分超出了tableview,超出的显示区域将不会在tableview上显示,而内容总是在显示区域里显示的,所以内容就会一部分被隐藏了。

contentOffset设置内容的偏移

contentOffset.gif

大家可以看到在contentOffset设置了Y轴偏移200后,内容是向上偏移的,偏移后内容是可以往下拉的,偏移的内容不会被隐藏,可以在tableview上全部显示。这是因为显示区域全部在tableview上,所以内容能全部在tableview被显示

上一篇下一篇

猜你喜欢

热点阅读