iOS中View的位置和大小
frame bounds center
frame bounds center是View的属性,定义了View的位置和大小。
frame bounds是一个结构体,包含位置和带下。Center是一个坐标。
给一个View设置frame时,以父View的
struct CGRect // frame和bounds都属于这一类型
{
CGPoint origin; //坐标位置
CGSize size;//形状大小
};
struct CGPoint // 坐标位置中包含x坐标和y坐标
{
CGFloat x;
CGFloat y;
};
struct CGSize// 形状大小指的是矩形的长和宽
{
CGFloat width;
CGFloat height;
};
frame
frame设置了每个View相对于父View顶点的位置和自身的大小。
UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 250, 250)];
backView.backgroundColor = [UIColor redColor];
[self.view addSubview:backView];
UIView *midView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 150, 150)];
backView.backgroundColor = [UIColor greenColor];
[backView addSubview:midView];
UIView *frontView = [[UIView alloc] initWithFrame:CGRectMake(35, 35, 80, 80)];
frontView.backgroundColor = [UIColor blueColor];
[midView addSubview:frontView];
frame示例
bounds
子View的frame会以父View的顶点为原点,建立坐标系,计算子View的位置。
当给一个View设置bounds时,会把自己当作一个容器。设置View的bounds,会改变以自身定点的位置。
如下代。backView.bounds = CGRectMake(50, 50, 250, 250)表示对于midView来说,backView的左上角坐标变为(50,50)。因此,midView和backView的左上角对齐。
UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 250, 250)];
backView.backgroundColor = [UIColor redColor];
backView.bounds = CGRectMake(50, 50, 250, 250);
[self.view addSubview:backView];
UIView *midView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 150, 150)];
midView.backgroundColor = [UIColor greenColor];
[backView addSubview:midView];
UIView *frontView = [[UIView alloc] initWithFrame:CGRectMake(35, 35, 80, 80)];
frontView.backgroundColor = [UIColor blueColor];
[midView addSubview:frontView];
因此上面代码执行的结果是
bounds示例
center
center.x = frame.origin.x + frame.size.width / 2
center.y = frame.origin.y + frame.size.height / 2
总结
frame设置自身相对于父View的位置和自身大小。
bounds设置子View的位置和自身的大小
frame和bounds的关系.png
frame和center的关系.png
bounds和center的关系.png
contentSize contentInset contentOffset
contentSize contentInset contentOffset是scrollView的三个属性
1.contentSize
The size of the content view. 这个size表示滚动视图可以滚动的大小,也就是scrollView内容的大小。如果scrollView.contentSize大于scrollView.frame.size,则有滑动效果。小于或等于滚动视图的frame.size,这时候滚动视图是不可以滚动的,连橡皮筋效果都没有。
假如frame = (0 ,0 ,320 ,480) contentSize = (640 ,480),代表你的scrollview可以横向滚动320的宽度。
contentSize
CGFloat scrollViewWidth = 300;
CGFloat scrollViewHeight = 500;
CGFloat pageWidth = 200;
CGFloat pageHeight = 500;
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, pageWidth, pageHeight)];
view1.backgroundColor = [UIColor redColor];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(pageWidth, 0, pageWidth, pageHeight)];
view2.backgroundColor = [UIColor greenColor];
UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(pageWidth * 2, 0, pageWidth, pageHeight)];
view3.backgroundColor = [UIColor blueColor];
self.scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - scrollViewWidth) / 2, 50, scrollViewWidth, scrollViewHeight)];
self.scrollview.scrollEnabled = YES;
self.scrollview.pagingEnabled = NO;
self.scrollview.contentSize = CGSizeMake(3 * pageWidth, pageHeight);
[self.scrollview addSubview:view1];
[self.scrollview addSubview:view2];
[self.scrollview addSubview:view3];
[self.view addSubview:self.scrollview];
contentSize示例
2.contentOffset
contentOffset是scrollView的contentView的顶点相对于frame定点的偏移量。
CGFloat scrollViewWidth = 300;
CGFloat scrollViewHeight = 500;
CGFloat pageWidth = 200;
CGFloat pageHeight = 500;
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, pageWidth, pageHeight)];
view1.backgroundColor = [UIColor redColor];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(pageWidth, 0, pageWidth, pageHeight)];
view2.backgroundColor = [UIColor greenColor];
UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(pageWidth * 2, 0, pageWidth, pageHeight)];
view3.backgroundColor = [UIColor blueColor];
self.scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - scrollViewWidth) / 2, 50, scrollViewWidth, scrollViewHeight)];
self.scrollview.contentOffset = CGPointMake(pageWidth, 0);
self.scrollview.scrollEnabled = YES;
self.scrollview.pagingEnabled = NO;
self.scrollview.contentSize = CGSizeMake(3 * pageWidth, pageHeight);
[self.scrollview addSubview:view1];
[self.scrollview addSubview:view2];
[self.scrollview addSubview:view3];
[self.view addSubview:self.scrollview];
contentOffset示例
3.contentInset
可以看做是给contentView四周设了一圈范围,top,left正数增大其范围,top,left负数缩小其范围)画个图可能更容易理解
CGFloat scrollViewWidth = 300;
CGFloat scrollViewHeight = 500;
CGFloat pageWidth = 200;
CGFloat pageHeight = 500;
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, pageWidth, pageHeight)];
view1.backgroundColor = [UIColor redColor];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(pageWidth, 0, pageWidth, pageHeight)];
view2.backgroundColor = [UIColor greenColor];
UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(pageWidth * 2, 0, pageWidth, pageHeight)];
view3.backgroundColor = [UIColor blueColor];
self.scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - scrollViewWidth) / 2, 50, scrollViewWidth, scrollViewHeight)];
self.scrollview.contentInset = UIEdgeInsetsMake(30, 40, 50, 60);// 相当于可滚动区域上边增加30,左边增加40,底边增加50,右边增加60
// 可滚动范围是 -30 -> contentSize.height + 50 -40 -> contentSize.width + 60
self.scrollview.scrollEnabled = YES;
self.scrollview.pagingEnabled = NO;
self.scrollview.contentSize = CGSizeMake(3 * pageWidth, pageHeight);
[self.scrollview addSubview:view1];
[self.scrollview addSubview:view2];
[self.scrollview addSubview:view3];
[self.view addSubview:self.scrollview];
contentInset示例