zoukankan      html  css  js  c++  java
  • iOS开发之--Masonry多个平均布局

    使用Masonry平均布局,代码如下:

    其实就是用Masonry提供的两个方法,如下:

    /**
        *  distribute with fixed spacing
        *
        *  @param axisType     横排还是竖排
        *  @param fixedSpacing 两个控件间隔
        *  @param leadSpacing  第一个控件与边缘的间隔
        *  @param tailSpacing  最后一个控件与边缘的间隔
        */
        [tolAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:30 leadSpacing:10 tailSpacing:10];
        
        /**
        *  distribute with fixed item size
        *
        *  @param axisType        横排还是竖排
        *  @param fixedItemLength 控件的宽或高
        *  @param leadSpacing     第一个控件与边缘的间隔
        *  @param tailSpacing     最后一个控件与边缘的间隔
        */
        [tolAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength:30 leadSpacing:10 tailSpacing:10];

    一、水平布局

    1、创建

    //    图片组数
        NSArray *imgAry = @[@"home_icon01",@"home_icon02",@"home_icon03",@"home_icon04"];
    //    文字数字
        NSArray *titleAry = @[@"高额",@"低息",@"灵活",@"便捷"];
        
        NSMutableArray *tolAry = [NSMutableArray new];
        for (int i = 0; i < 4; i ++) {
            HTVerticalButton *btn = [HTVerticalButton buttonWithType:UIButtonTypeCustom];
            [btn setImage:[UIImage imageNamed:imgAry[i]] forState:UIControlStateNormal];
            [btn setTitle:titleAry[i] forState:UIControlStateNormal];
            [btn setTitleColor:[UIColor colorWithHex:@"#333333"] forState:UIControlStateNormal];
            btn.titleLabel.font = [UIFont systemFontOfSize:13];
            btn.imageEdgeInsets = UIEdgeInsetsMake(30, 30, 30, 30);
            [self addSubview:btn];
            [tolAry addObject:btn];
        }

    2、使用Masonry布局

    //水平方向控件间隔固定等间隔
        [tolAry mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:10 tailSpacing:10];
        [tolAry mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(@20);
            make.height.equalTo(@100);
        }];
        
        //水平方向宽度固定等间隔
        [tolAry mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:70 leadSpacing:10 tailSpacing:10];
        [tolAry mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(@75);
            make.height.equalTo(@100);
        }];

    效果如下:

    二、垂直布局,不多阐述,直接上代码:

    UIView *view = [UIView new];
        view.backgroundColor = [UIColor yellowColor];
        [self.view addSubview:view];
        
        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(150);
            make.left.mas_equalTo(15);
            make.centerX.mas_equalTo(self.view);
            make.height.mas_equalTo(50*3);
        }];
        
        
        NSMutableArray *tolAry = [NSMutableArray new];//图片数组
        NSMutableArray *titleAry = [NSMutableArray new];//标题数组
        NSMutableArray *btnAry = [NSMutableArray new];//按钮数组
        
        for (int i = 0; i < 4; i ++) {
            UIImageView *img = [UIImageView new];
            img.backgroundColor = [UIColor redColor];
            [view addSubview:img];
            
            UILabel *lab = [UILabel new];
            lab.backgroundColor = [UIColor purpleColor];
            [view addSubview:lab];
            
            UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
            btn.backgroundColor = [UIColor greenColor];
            [btn setTitle:[NSString stringWithFormat:@"%d",i+90] forState:UIControlStateNormal];
            [view addSubview:btn];
            
            [tolAry addObject:img];
            [titleAry addObject:lab];
            [btnAry addObject:btn];
        }
        
        // 实现masonry垂直方向固定控件高度方法
          //垂直方向
          [tolAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:10 leadSpacing:10 tailSpacing:10];
    
          [tolAry mas_makeConstraints:^(MASConstraintMaker *make) {
                  
             //垂直方向可以设置水平居中
              make.left.mas_equalTo(5);
              make.width.equalTo(@30);
          }];
        
        [titleAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:10 leadSpacing:10 tailSpacing:10];
    
        [titleAry mas_makeConstraints:^(MASConstraintMaker *make) {
                
           //垂直方向可以设置水平居中
            make.left.mas_equalTo(40);
            make.width.equalTo(@60);
        }];
        
        [btnAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:10 leadSpacing:10 tailSpacing:10];
    
        [btnAry mas_makeConstraints:^(MASConstraintMaker *make) {
                
           //垂直方向可以设置水平居中
            make.right.mas_equalTo(-10);
            make.width.equalTo(@30);
        }];

    效果如下图:

    仅做记录!

  • 相关阅读:
    数组中的逆序对 --剑指offer
    第一个只出现一次的字符 --剑指offer
    丑数 --剑指offer
    把数组排成最小的数 --剑指offer
    整数中1出现的次数 --剑指offer
    最小的k个数 --剑指offer
    数组中出现次数超过一半的数字 --剑指offer
    redis击穿,穿透,雪崩,分布式锁,api(jedis,luttuce)
    Java创建数据库新建表及初始化表
    generatorConfig.xml自动生成实体类,dao和xml
  • 原文地址:https://www.cnblogs.com/hero11223/p/10749861.html
Copyright © 2011-2022 走看看