LinearLayout之初级学习 （二） ScrollView

上一篇文章 

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