Masonry的一些等间距布局

  • 控件之间的间距相等,但是控件的宽度是不定的。

  下列的代码:定义间距为10,yellowview的宽度是由redView的宽度计算出来的。

    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(ws.view);
        make.top.mas_equalTo(ws.view);
        make.right.mas_equalTo(ws.view);
    }];

    NSInteger padding = 10;
    UIView *yellowView1 = [[UIView alloc] init];
    yellowView1.backgroundColor = [UIColor yellowColor];
    [redView addSubview:yellowView1];

    UIView *yellowView2 = [[UIView alloc] init];
    yellowView2.backgroundColor = [UIColor yellowColor];
    [redView addSubview:yellowView2];

    UIView *yellowView3 = [[UIView alloc] init];
    yellowView3.backgroundColor = [UIColor yellowColor];
    [redView addSubview:yellowView3];

    [@[yellowView1,yellowView2,yellowView3] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:padding leadSpacing:padding tailSpacing:padding];

    [@[yellowView1,yellowView2,yellowView3] mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(redView).offset(padding);
        make.height.mas_equalTo(yellowView1.mas_width);
        make.bottom.mas_equalTo(redView).offset(-padding);
    }];
  • 控件的宽度是一定的,但是控件之间的间距是不定的。

  下列的代码:定义控件的宽度为22,控件之间的间距是由redView的宽度计算出来的。

    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(ws.view);
        make.top.mas_equalTo(ws.view);
        make.right.mas_equalTo(ws.view);
    }];

    UIView *yellowView1 = [[UIView alloc] init];
    yellowView1.backgroundColor = [UIColor yellowColor];
    [redView addSubview:yellowView1];

    UIView *yellowView2 = [[UIView alloc] init];
    yellowView2.backgroundColor = [UIColor yellowColor];
    [redView addSubview:yellowView2];

    UIView *yellowView3 = [[UIView alloc] init];
    yellowView3.backgroundColor = [UIColor yellowColor];
    [redView addSubview:yellowView3];

    //控件的宽度
    CGFloat viewW = 22;
    CGFloat padding = (SCREENWIDTH - 3*viewW) * 1.0 / 4;

    [@[yellowView1,yellowView2,yellowView3] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:viewW leadSpacing:padding tailSpacing:padding];

    [@[yellowView1,yellowView2,yellowView3] mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(redView).offset(padding);
        make.size.mas_equalTo(viewW);
        make.bottom.mas_equalTo(redView).offset(-padding);
    }];
时间: 2024-10-09 21:06:20

Masonry的一些等间距布局的相关文章

masony应用举例之等间距布局

以下将从几个方面说一下如何使用Masonry 怎样添加约束才能满足一个View, 及masonry的基本使用 如何使用masonry等间隙排布几个View 更新约束动画 ScrolView如何布局 tableViewCell高度动态变化 2. 如何使用masonry等间隙排布几个View 先直接上图, 最终要实现这样一个布局 Paste_Image.png 这里一共三部分, 最上面黄色的中间蓝色的都是用了masonry提供的方法, 适用于等大小的View等间距布局, 最下面的绿色View是自己自

iOS masonry九宫格 单行 多行布局

Masonry是个好东西,在当前尺寸各异的iOS开发适配中发挥着至关重要的作用,由于项目中Masonry布局用的比较多,对于UI布局也有了一些自己的理解,经常会有人问道Masonry布局九宫格要怎么布局呢,单行.多行要怎么做到自动布局呢,之前用frame布局九宫格需要2层for循环,各种判断才可以完成一套九宫格布局,那使用Masonry是不是也这么麻烦呢,答案是否定的!下面把Masonry布局单行,多行的代码贴出来,注释的很详细,有需要的同学可以参考参考,可能对于Masonry的使用会有不一样的

IOS控件布局之Masonry布局框架

前言: 回想起2013年做iOS开发的时候,那时候并没有采用手写布局代码的方式,而是采用xib文件来编写,如果使用纯代码方式是基于window的size(320,480)计算出一个相对位置进行布局,那个时候windows的size是固定不变的,随着iphone5的发布,windows的size(320,568)也发生了变化,而采用autoresizingMask的方式进行适配,到后来iphone 6之后windows size的宽度也随之变化,开始抛弃autoresizingMask改用auto

Masonry 轻量级布局框架的使用

iOS 提供了自动布局的方法,但是原生的方法使用太过麻烦 ,Masonry 框架提供了类似的方法,同样可以实现自动布局 ,代码更加直观,而且容易理解. Masonry 是一个轻量级的布局框架.拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有较高的可读性 ,同时支持iOS和Mac OSX.某种意义上可以取代AutoLayout 1.Masonry配置 使用时只需要导入头文件 (Masonry.h) 2.Masonry 常用的方法 2.1Masonry 给视图添加布局条件的常用方

IOS Masonry的基本使用

Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有高可读性,而且同时支持 iOS 和 Max OS X.Masonry是一个用代码写iOS或OS界面的库,可以代替Auto layout.Masonry的github地址:https://github.com/SnapKit/Masonry 本章内容 - Masonry配置 - Masonry使用 - Masonry实例 Masonry配置 - 推荐使用pods方式引入类库,pod 'Maso

Masonry介绍与使用实践:快速上手Autolayout

以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,568) 这时autoresizingMask派上了用场(为啥这时候不用Autolayout? 因为还要支持ios5呗) 简单

CSS多列布局实现方法介绍

在css教程(http://www.maiziedu.com/course/web/421-5342/)中,使用css实现多列图片等宽等间距布局是很常用的,在进行web前端项目开发时会经常在网页中用到,下面就以三列图片等宽等间距为例讲解实现方法. 每个图片块左浮动,宽30%,左外边距2.5%:  100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%  <!DOCTYPE html>  <html>  <head>  <meta ch

iOS — Autolayout之Masonry解读

前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,568) 这时auto

iOS常用库之Masonry

简单介绍 Masonry 源码地址:https://github.com/Masonry/Masonry Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Mac OS X. ``` pod 'Masonry' ``` 使用Masonry需要导入头文件 `#import  "Masonry.h"`  系统API vs Masonry 系统API NSLayoutConstraint ```ob