一、先解释相关API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 *  distribute with fixed spacing
 *
 *  @param axisType     横排还是竖排
 *  @param fixedSpacing 两个控件间隔
 *  @param leadSpacing  第一个控件与边缘的间隔
 *  @param tailSpacing  最后一个控件与边缘的间隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
/**
 *  distribute with fixed item size
 *
 *  @param axisType        横排还是竖排
 *  @param fixedItemLength 控件的宽或高
 *  @param leadSpacing     第一个控件与边缘的间隔
 *  @param tailSpacing     最后一个控件与边缘的间隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

两个API,分为固定间隔不固定宽高,固定宽高不固定间隔,根据具体需求使用相应的即可。

需要注意的是: 横排的时候要相应设置控件数组的垂直约束,竖排的时候要相应设置控件数字的水平约束。

二、具体实践测试

首先做准备工作,先生成四个View(需要被排列的),代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (NSMutableArray *)masonryViewArray {
    if (!_masonryViewArray) {
         
        _masonryViewArray = [NSMutableArray array];
        for (int i = 0; i < 4; i ++) {
             
            UIView *view = [[UIView alloc] init];
            view.backgroundColor = [UIColor redColor];
            [self.view addSubview:view];
            [_masonryViewArray addObject:view];
        }
    }
     
    return _masonryViewArray;
}

1、水平方向排列、固定控件间隔、控件长度不定

测试代码如下

1
2
3
4
5
6
7
8
9
10
11
- (void)test_masonry_horizontal_fixSpace {
    // 实现masonry水平固定间隔方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:30 leadSpacing:10 tailSpacing:10];
     
    // 设置array的垂直方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
     
        make.top.equalTo(150);
        make.height.equalTo(80);
    }];
}

测试结果如下:

2、水平方向排列、固定控件长度、控件间隔不定

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
- (void)test_masonry_horizontal_fixItemWidth {
     
    // 实现masonry水平固定控件宽度方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:80 leadSpacing:10 tailSpacing:10];
     
    // 设置array的垂直方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
         
        make.top.equalTo(150);
        make.height.equalTo(80);
    }];
}

测试结果如下:

3、垂直方向排列、固定控件间隔、控件高度不定

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
- (void)test_masonry_vertical_fixSpace {
     
    // 实现masonry垂直固定控件高度方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:30 leadSpacing:10 tailSpacing:10];
     
    // 设置array的水平方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
         
        make.left.equalTo(150);
        make.width.equalTo(80);
    }];
}

结果如下:

4、垂直方向排列、固定控件高度、控件间隔不定

1
2
3
4
5
6
7
8
9
10
11
12
- (void)test_masonry_vertical_fixItemWidth {
     
    // 实现masonry垂直方向固定控件高度方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength:80 leadSpacing:10 tailSpacing:10];
     
    // 设置array的水平方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
         
        make.left.equalTo(150);
        make.width.equalTo(80);
    }];
}

结果如下:

iOS Masonry控件等比例布局的更多相关文章

  1. iOS 开发 ZFUI framework控件,使布局更简单

    来自:http://www.jianshu.com/p/bcf86b170d9c 前言 为什么会写这个?因为在iOS开发中,界面的布局一直没有Android布局有那么多的方法和优势,我个人开发都是纯代 ...

  2. android 仿ios开关控件

    ios一些控件还是挺美丽的,可是对android程序猿来说可能比較苦逼,由于ios一些看起来简单的效果对android来说可能就没那么简单了,可是没办法非常多产品都是拿ios的一些控件叫android ...

  3. 79.iOS 设备的UI规范和iOS各控件默认高度

    iOS设备的UI 规范 iPhone界面尺寸 iPhone图标尺寸 iPad的设计尺寸 iPad图标尺寸 iPhone设备尺寸分辨率比例 iPhone各设备 launch image iOS 各种控件 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. 初识IOS,Label控件的应用。

    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...

  6. IOS—UITextFiled控件详解

    IOS—UITextFiled控件详解 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGR ...

  7. [iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表"练习)

    A.概述      在"[iOS基础控件 - 4.4] APP列表 进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能      1.按钮点击后,显示为“已下载”,并且不 ...

  8. Qt基本控件及三大布局

    Qt基本控件及三大布局 来源: http://blog.csdn.net/a2604539133/article/details/73920696 Qt基本模块 一.Qt的三大布局 QHBoxLayo ...

  9. c#学习笔记之使用 TableLayoutPanel 控件设置窗体布局

    使用 TableLayoutPanel 控件设置窗体布局 在 Visual Studio IDE 左侧,找到“工具箱”选项卡. 选择“工具箱”选项卡,随即将显示工具箱.(或者,在菜单栏上,依次选择“视 ...

随机推荐

  1. C++标准模板库(STL)之Priority_Queue

    1.Priority_Queue的常用用法 priority_queue:优先队列,底层是使用堆来实现的.优先队列中,队首元素一定是当前队列中优先级最高的哪一个. a (优先级3),b(优先级4),c ...

  2. 在Linux服务器非root权限下搭建TensorFlow框架(Anaconda)

    今天终于动手折腾实验室的服务器啦!由于权限原因,只能在自己的路径下安装TensorFlow. 1. 下载安装Anaconda 官网下载地址:https://www.anaconda.com/downl ...

  3. day 03 数据类型

    1.作业讲解 2.数据类型 什么是数据类型? (1)int 1,2,3用于计算. (2)bool:True,False,用户判断. (3)str:存储少量数据,进行操作 'fjdsal' '二哥',' ...

  4. 微信里iphone后退不刷新问题解决方案

    $(function() { pushHistory(); }); function pushHistory() { window.addEventListener("popstate&qu ...

  5. angular6 input节流

    一直以为   pipe(debounceTime(1000), distinctUntilChanged())  不起作用 原因:使用方法错误 <input type="text&qu ...

  6. 6种纯css实现loading效果

    1. <div id="loadingWrap1"> <span></span> <span></span> <s ...

  7. MySQL— pymysql模块(防止sql注入),可视化软件Navicat

    一.Pymysql import pymysql #python2.X 中是 mysqldb 和 pythonmysql 用法是一模一样的 #pymysql可以伪装成上面这两个模块 user = in ...

  8. C#UDP广域网,局域网通信-原理分析

    一.UDP局域网通信. 这个比较简单,关于局域网中的2台或者更多的计算机之间的UDP通信,网络上一大把,直接复制粘贴就可以使用,原理也非常简单.所以,本文不做详细介绍. 二.UDP广域通信(包括路由器 ...

  9. 微信浏览器无法跳转到apk下载链接 微信屏蔽了我的APP下载链接如何处理

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时,界面显示一片空白,容易误导以为在下载呢 <!DOCTYPE html><html>&l ...

  10. presto 判断数据量是否大于一个比较小的值的优化

    问题来源于以下场景: 我们需要对一张数据表做导出文件操作,需要判断如果数据量不多的时候,直接导出提供下载,如果数据量超过一定数值,则异步处理导出和下载. 这里就引入一个问题,如果我们直接count一张 ...