LinearLayout之初级学习（二） ScrollView

最新推荐文章于 2022-01-25 11:49:30 发布

ahuboyuan

最新推荐文章于 2022-01-25 11:49:30 发布

阅读量356

点赞数

分类专栏： iOS 第三方库

本文链接：https://blog.youkuaiyun.com/ahuboyuan/article/details/51249952

版权

iOS 第三方库专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了UIScrollView的自动布局实现，包括如何初始化ScrollView并添加不同类型的子视图，如UILabel和UITextField，并详细说明了如何通过创建共同的布局来管理这些视图。此外，还展示了如何在ScrollView中组织多个布局，例如纵向排列的Label和TextField，以及横向排列的多个Label实例。通过代码示例，清晰地展示了如何通过自定义LinearLayout来实现复杂布局的管理。

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

上一篇文章

MyLinearLayout 之初级学习经验

介绍了，关于UILabel 的自动布局

这一片文章主要介UIScrollView 的自动布局

第一步为UIScrollView 初始化，

    UIScrollView *scrollView = [UIScrollView new];
    scrollView.backgroundColor = [UIColor whiteColor];
    self.view = scrollView ;
    MyLinearLayout *linearLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];
    linearLayout.wrapContentHeight = YES ;
    linearLayout.myLeftMargin = linearLayout.myRightMargin = 0 ;
    linearLayout.padding = UIEdgeInsetsMake(10, 10, 10, 10) ;
    [self.view addSubview:linearLayout];

（1）在ScrollView 中添加一个Vertical 形式的一个子布局

效果如下

分析： 1. 子视图类型 UILabel 和 UITextField

2. 排列方式竖直排列 (Vertical) 对应MyLinearLayout 的类型是 MyLayoutViewOrientation_Vert

3. 为Label 和TextField 添加一个共同的layout，这样比较好管理

代码实现：

先新建一个共同的Layout 如下

    MyLinearLayout *vertical1 = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];
    vertical1.myMargin = 0 ;
    vertical1.wrapContentWidth = NO ;
    vertical1.wrapContentHeight = YES ;
    [layout addSubview:vertical1];

在layout 中添加Label

UILabel *label = [[UILabel alloc] init];
    label.myMargin = 0 ;
    label.text = @"编号" ;
    label.flexedHeight = YES ;
    [label sizeToFit] ;
    [vertical1 addSubview:label];

在layout 中添加UITextField

UITextField *textField = [[UITextField alloc] init];
    textField.borderStyle = UITextBorderStyleRoundedRect ;
    textField.myTopMargin = 10 ;
    textField.myLeftMargin = textField.myRightMargin = 0 ;
    textField.myHeight = 30 ;
    textField.placeholder = @"这里输入编号" ;
    [vertical1 addSubview:textField];

(2) 年龄和下面的整体是一个layout类型为例如

分析：1. 三个等间距等宽的label，横向排列（MyLayoutViewOrientation_Horz）叫暂时称为horizLayout

2. 年龄和 horizLayout 纵向排列

先定义了一个总的Layout

MyLinearLayout *ageLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert]; // 定义纵向排列
    ageLayout.layer.borderColor = [UIColor blackColor].CGColor; // 定义边线的颜色
    ageLayout.layer.borderWidth = 1 ; // 定义边线的宽度
    ageLayout.layer.cornerRadius = 5 ; // 定义圆角的大小
    ageLayout.myTopMargin = 10 ; // 定义上边界
    ageLayout.myLeftMargin = ageLayout.myRightMargin = 0 ; // 定义左边界和右边界
    ageLayout.wrapContentHeight = YES ;   // 定义约束的高度是自适应的
    ageLayout.padding = UIEdgeInsetsMake(5, 5, 5, 5) ; // 定义约束的内边距

添加一个labe

    UILabel *age = [[UILabel alloc] init];
    age.text = @"年龄" ;
    [age sizeToFit]; // 自适应宽度
    age.flexedHeight = YES ; // 自适应宽度
    age.myLeftMargin = age.myTopMargin = 0 ; // 定义左边界和上边界
    [ageLayout addSubview:age];

在添加一个横向布局的约束用来装三个label

   MyLinearLayout *coLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Horz];
    coLayout.myTopMargin = 5 ;
    coLayout.subviewMargin = 5 ;
    coLayout.myLeftMargin = coLayout.myRightMargin = 0 ;
    coLayout.wrapContentHeight = YES ;
    [ageLayout addSubview:coLayout];

添加三个label 设置weight = 1 这样label 的宽度会根据margin 来均分剩余的宽度

  UILabel *l1 = [[UILabel alloc] init];
    l1.text = @"20" ;
    l1.flexedHeight = YES ;
    l1.textAlignment = NSTextAlignmentCenter ;
    l1.weight = 1;
    l1.backgroundColor = [UIColor redColor];
    [coLayout addSubview:l1];

    UILabel *l2 = [[UILabel alloc] init];
    l2.text = @"30" ;
    l2.weight = 1;
    l2.textAlignment = NSTextAlignmentCenter ;
    l2.flexedHeight = YES ;
    l2.backgroundColor = [UIColor redColor];
    [coLayout addSubview:l2];


    UILabel *l3 = [[UILabel alloc] init];
    l3.text = @"40" ;
    l3.weight = 1 ;
    l3.textAlignment = NSTextAlignmentCenter ;
    l3.flexedHeight = YES ;
    l3.backgroundColor = [UIColor redColor];
    [coLayout addSubview:l3];