UI - 关于自动调整内边距问题的细节

最新推荐文章于 2020-06-20 20:19:21 发布

原创最新推荐文章于 2020-06-20 20:19:21 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #控件

UI 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了iOS中控制器`automaticallyAdjustsScrollViewInsets`属性对tableView、collectionView等scrollView子控件的影响。内容包括自动调整内边距的场景，例如导航栏遮盖问题，多个scrollView的处理，以及不同控制器组合时的内边距调整行为。建议在存在多个scrollView时关闭自动调整以避免计算困扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iOS 7 以后 , 苹果推出了控制器 automaticallyAdjustsScrollViewInsets 属性 , 目的在于自动帮我们调整所有继承于 scrollView控件的内边距 ,比如tableView , collectionView . automaticallyAdjustsScrollViewInsets 默认开启 .

具体例子1 :
默认情况下 automaticallyAdjustsScrollViewInsets = YES ,苹果为了使得在scrollView上的子控件能够比较美观的布局 , 而不出现一开始展示就出现了导航栏遮盖控件的现象 , 比如你在scrollView上添加了控件 , Y值小于64 , 那么就会被遮挡 . 所以在有导航栏情况下 , 苹果直接帮我们加了64的内边距 , 咱们写的时候从视觉上看就是导航栏底部是 Y = 0

下述tableView的cell本应从顶部开始布局 , 然后由于自动调整了内边距 ,导致位置下移 . 而滑动时出现穿透效果 , 说明导航栏下面部分也是属于tableView的 , 而并不是将tableView整体下移了64

    UITableView *tableView = [[UITableView alloc]initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
    tableView.delegate = self;
    tableView.dataSource = self;
    [self.view addSubview:tableView];

这里写图片描述

打印结果如下: 顶部内边距为自动调整 64

具体例子2: collectionView也是如此 , item本应在顶部 , 由于自动调整了内边距 , 而整体下移

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    flowLayout.minimumLineSpacing = 10.0;
    flowLayout.minimumInteritemSpacing = 10.0;
    flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
    flowLayout.itemSize = CGSizeMake(100, 100);

    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor whiteColor];
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    [self.view addSubview:collectionView];

这里写图片描述

具体例子3: scrollView

    UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    scrollView.contentSize = CGSizeMake(375, 2000);
    scrollView.backgroundColor = [UIColor yellowColor];

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(100, 0, 200, 50)];
    label.backgroundColor = [UIColor redColor];
    [scrollView addSubview:label];

    [self.view addSubview:scrollView];

这里写图片描述

例子4:同时添加多个scrollView , 观察scrollView子控件自动调整状况

    UIScrollView *scrollView1 = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 100, 100, 100)];
    scrollView1.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1.0];
    [self.view addSubview:scrollView1];


    UIScrollView *scrollView2 = [[UIScrollView alloc]initWithFrame:CGRectMake(120, 100, 100, 100)];
    scrollView2.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1.0];
    [self.view addSubview:scrollView2];


    UIScrollView *scrollView3 = [[UIScrollView alloc]initWithFrame:CGRectMake(240,100, 100, 100)];
    scrollView3.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1.0];
    [self.view addSubview:scrollView3];

    UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(0,0, 50, 50)];
    view1.backgroundColor = [UIColor redColor];
    [scrollView1 addSubview:view1];

    UIView *view2 = [[UIView alloc]initWithFrame:CGRectMake(0,0, 50, 50)];
    view2.backgroundColor = [UIColor redColor];
    [scrollView2 addSubview:view2];

    UIView *view3 = [[UIView alloc]initWithFrame:CGRectMake(0,0, 50, 50)];
    view3.backgroundColor = [UIColor redColor];
    [scrollView3 addSubview:view3];


    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 250, [UIScreen mainScreen].bounds.size.width, 50)];
    label.text = @"这是一个添加到view上的测试label";
    label.textColor = [UIColor blackColor];
    label.backgroundColor = [UIColor grayColor];
    [self.view addSubview:label];

结果如下:

只有第一个添加上去的scrollView上的子控件 , 进行了自动调整 , 而其他的scrollView上的子控件并未进行自动调整 .
所以 , 如果当搭建一个界面 , 如果出现多个scrollView时 , 尽量把 automaticallyAdjustsScrollViewInsets = NO .方便计算

例子5:
当同时拥有导航控制器和tabbar标签栏控制器时 , 苹果会自动将上下的内间距分别调整 64 , 49 .

这里写图片描述

此时 , tableView上的所有控件也不会被底部的tabbar所遮挡 .

例子6:

当只拥有tabbar标签栏控制器时 , 不会自动调整内间距

这里写图片描述

例子7:

当设置了导航栏不透明时 , self.view上的所有控件 , 均从导航栏下为 0 点开始计算 , 且不再自动调整内边距 ~!!!

    self.view.backgroundColor = [UIColor whiteColor];

    //设置不透明
    self.navigationController.navigationBar.translucent = NO;

    self.tableView = [[UITableView alloc]initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.view addSubview:self.tableView];

    UIView *view2 = [[UIView alloc]initWithFrame:CGRectMake(0,0, 50, 50)];
    view2.backgroundColor = [UIColor redColor];
    [self.view addSubview:view2];