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];

因此上面代碼執行的結果是


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示例
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容