iOS

iOS中View的位置和大小

2021-11-02  本文已影响0人  小怪兽大作战

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示例
上一篇下一篇

猜你喜欢

热点阅读