AutoLayout之ZXPAutoLayout布局

来源:互联网 发布:中国美国商会 知乎 编辑:程序博客网 时间:2024/05/21 09:16

现在流行的都是cocoapods导入,我也不多说了,下面也有导入的博客,我直接说它的用法吧。

/// 设置一个背景为半透明红色的view,上下左右都距离superview的距离为10- (void)demo1{    _bgview= [[UIView alloc]init];    [self.view addSubview:_bgview];    _bgview.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.5];    [_bgview zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {        //1.位置和宽度等同self.view//        layout.edgeEqualTo(self.view);        //2.上下左右四边都距离superview的距离为10        layout.edgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));        //也可以如下这行代码来设置,但要同时设置top,left,bottom,right。推荐上面的方法,比较简洁//        layout.topSpace(10).leftSpace(10).bottomSpace(10).rightSpace(10);    }];}/// 设置一个蓝色view,设置在superview里的距离和设置自身的宽高- (void)demo2{   _blueview = [[UIView alloc]init];    [_bgview addSubview:_blueview];    _blueview.backgroundColor = [UIColor blueColor];    [_blueview zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {        layout.topSpace(20); //设置在superview里的上边距        layout.leftSpace(20);        layout.rightSpace(20);        layout.heightValue(100); //设置高度        /**         注意:         1.设置了左边距和右边距,会自动拉伸宽度,所以如上代码并没有设置宽度。         2.如上代码可以写成一行,比如layout.topSpace(20).leftSpace(20)。         3.不推荐全部写在一行,阅读性太差,而且在一行代码里写多了诸多属性也不利于DeBug。         **/    }];}

/// 设置一个灰色view,设置参照于其他的view的距离和等宽等距离属性
- (void)demo3{

_grayview = [[UIView alloc]init];[_bgview addSubview:_grayview];_grayview.backgroundColor = [UIColor grayColor];[_grayview zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {    /*     上边距参照blueView,并加10的距离。     意思就是说上边距在blueview的下边,并加上10的间距。     如果只是想说在blueView的下边没有距离的话,第二个参数写为0即可。     */    layout.topSpaceByView(_blueview,10);    /*     左边距等同于blueView的左边距     第二个参数是距离的值,如果为0就代表左边距和blueView相等     如果不为0,则先相等于blueview的距离,然后加上第二参数的距离     */    layout.leftSpaceEqualTo(_blueview,0);    /*     宽度等同于blueView     mutiplier是倍数,可选属性,如果不写此属性宽度就是等同于blueview     如果写了此属性,如下示例,则宽度等同于blueView的0.5倍     */    layout.widthEqualTo(_blueview,0).multiplier(0.5);    layout.heightValue(40); //设置高度}];

}

/// UILabel的文字自适应,只需要设置autoHeight属性即可
- (void)demo4{

UILabel *label = [UILabel new];[self.view addSubview:label];label.backgroundColor = [UIColor purpleColor];label.textColor = [UIColor whiteColor];label.text = @"这是文字适应,这是文字适应,这是文字适应,这是文字适应,这是文字适应,这是文字适应,这是文字适应,这是文字适应";[label zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {    //设置上边距在grayview的下边,并加10的距离    layout.leftSpaceEqualTo(_grayview,10);    layout.bottomSpace(20); //设置在superview的下边距    layout.widthValue(100); // 设置宽度    layout.autoHeight(); // 自适应高度,只针对UILabel有效}];

}


效果图

/// 等宽并水平对齐的第一种方式- (void)demo5{    UIView *view1 = [UIView new];    [self.view addSubview:view1];    view1.backgroundColor = [UIColor blueColor];    UIView *view2 = [UIView new];    [self.view addSubview:view2];    view2.backgroundColor = [UIColor blackColor];    UIView *view3 = [UIView new];    [self.view addSubview:view3];    view3.backgroundColor = [UIColor blueColor];    [view1 zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {        layout.topSpaceByView(_grayview,10);        layout.leftSpace(20);        layout.heightValue(40);        layout.widthEqualTo(view2,0);    }];    [view2 zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {        layout.topSpaceEqualTo(view1,0);        layout.leftSpaceByView(view1,20);        layout.heightValue(40);        layout.widthEqualTo(view3,0);    }];    [view3 zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {        layout.topSpaceEqualTo(view1,0);        layout.leftSpaceByView(view2,20);        layout.rightSpace(20);        layout.heightValue(40);    }];}
// 等宽对齐的第二种方式:ZXPStackView的使用- (void)demo6{    ZXPStackView *stackView = [ZXPStackView new];    [self.view addSubview:stackView];    stackView.backgroundColor = [UIColor blackColor];    //只需要设置stackView的宽高和位置即可    [stackView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {        layout.topSpaceByView(_grayview,20);        layout.leftSpace(0);        layout.rightSpace(0);        layout.heightValue(100);    }];    UIView *view1 = [UIView new];    [stackView addSubview:view1];    view1.backgroundColor = [UIColor blueColor];    UIView *view2 = [UIView new];    [stackView addSubview:view2];    view2.backgroundColor = [UIColor yellowColor];    UIView *view3 = [UIView new];    [stackView addSubview:view3];    view3.backgroundColor = [UIColor redColor];    //stack的内边距    stackView.padding = UIEdgeInsetsMake(10, 10, 10,10);    //view直接的距离    stackView.space = 10;    //调用此方法会给subviews自动添加约束条件,进行等宽或者等高排列    [stackView layoutWithType:ZXPStackViewTypeHorizontal];}

这里写图片描述

/// 等高垂直对齐- (void)demo7{    ZXPStackView *stackView = [ZXPStackView new];    [self.view addSubview:stackView];    stackView.backgroundColor = [UIColor blackColor];    //只需要设置stackView的宽高和位置即可    [stackView zxp_addConstraints:^(ZXPAutoLayoutMaker *layout) {        layout.topSpaceByView(_grayview,20);        layout.leftSpace(0);        layout.rightSpace(0);        layout.heightValue(100);    }];    UIView *view1 = [UIView new];    [stackView addSubview:view1];    view1.backgroundColor = [UIColor blueColor];    UIView *view2 = [UIView new];    [stackView addSubview:view2];    view2.backgroundColor = [UIColor yellowColor];    UIView *view3 = [UIView new];    [stackView addSubview:view3];    view3.backgroundColor = [UIColor redColor];    //stack的内边距    stackView.padding = UIEdgeInsetsMake(10, 10, 10,10);    //view直接的距离    stackView.space = 10;    //调用此方法会给subviews自动添加约束条件,进行等宽或者等高排列    [stackView layoutWithType:ZXPStackViewTypeVertical];}注意: ZXPStackView的subview不需要添加约束,在调用layoutWithType:方法的时候,内部会自动进行约束的添加。

这里写图片描述

UI控件的宽高 = UI 那边给的图片 的尺寸 / 2,便是你想要的大小了。

0 0