美文网首页
自动布局

自动布局

作者: Mr_董 | 来源:发表于2016-04-25 12:01 被阅读15次

使用代码实现Autolayout的方法1

  • 创建约束
+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;
* view1 :要约束的控件
* attr1 :约束的类型(做怎样的约束)
* relation :与参照控件之间的关系
* view2 :参照的控件
* attr2 :约束的类型(做怎样的约束)
* multiplier :乘数
* c :常量
  • 添加约束
- (void)addConstraint:(NSLayoutConstraint *)constraint;
//这个是添加的一个约束数组
- (void)addConstraints:(NSArray *)constraints;
  • 注意
    • 一定要在拥有父控件之后再添加约束
    • 关闭Autoresizing功能
    view.translatesAutoresizingMaskIntoConstraints = NO;
    

使用代码实现Autolayout的方法2 - VFL

  • 使用VFL创建约束数组
// 间距
    NSNumber *margin = @20;
    
    // 添加水平方向的约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
    //下面这个宏是生成对应的字典类型
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加竖直方向的间距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:[blueView(height)]-margin-|";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(NSDictionary *)views;
* format :VFL语句
* opts :约束类型
* metrics :VFL语句中用到的具体数值
* views :VFL语句中用到的控件
  • 使用下面的宏来自动生成views和metrics参数
NSDictionaryOfVariableBindings(...)

使用代码实现Autolayout的方法3 - Masonry

  • 使用步骤
    • 添加Masonry文件夹的所有源代码到项目中
    • 添加2个宏、导入主头文件
    // 只要添加了这个宏,就不用带mas_前缀
    #define MAS_SHORTHAND
    

// 只要添加了这个宏,equalTo就等价于mas_equalTo

define MAS_SHORTHAND_GLOBALS

// 这个头文件一定要放在上面两个宏的后面

import "Masonry.h"

```
  • 添加约束的方法
// 这个方法只会添加新的约束
 [view makeConstraints:^(MASConstraintMaker *make) {

 }];

// 这个方法会将以前的所有约束删掉,添加新的约束
 [view remakeConstraints:^(MASConstraintMaker *make) {

 }];

 // 这个方法将会覆盖以前的某些特定的约束
 [view updateConstraints:^(MASConstraintMaker *make) {

 }];
  • 约束的类型
1.尺寸:width\height\size
2.边界:left\leading\right\trailing\top\bottom
3.中心点:center\centerX\centerY
4.边界:edges

相关文章

  • iOS开发之 自动布局

    iOS开发之自动布局AutoLayout 目录: 1 iOS自动布局简介2 iOS自动布局AutoLayout(代...

  • 【OC梳理】自动布局

    自动布局基础篇 关于自动布局的基本使用,参考网上的文章即可,如:iOS开发-自动布局篇:史上最牛的自动布局教学! ...

  • iOS 布局方案

    布局方案 绝对布局 自动布局

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • 通过storyboard来自动布局ScrollView(不依靠代

    在做自动布局之前首先大家都知道一个自动布局,自动布局在我理解就是为了适配任何的屏幕。每一个控件的自动布局都是为了确...

  • iOS原生布局简介

    自动布局核心公式 自动布局构造函数 自动布局类函数 VFL可视化格式语言 H 水平方向 V 垂直方向 | 边界 [...

  • Flex——告别CSS布局

    Flex 布局可以实现空间自动分配、自动对齐Flex 适用于简单的线性布局,复杂布局使用 Grid 布局注意:设为...

  • 最轻巧的自动布局--ZXPAutoLayout框架

    最轻巧的自动布局--ZXPAutoLayout框架 最轻巧的自动布局--ZXPAutoLayout框架

  • IOS开发 自动布局子视图

    本节学习内容: 1.自动子视图布局的概念 2.自动布局视图的创建 3.自动布局子视图的实现 【ViewContro...

  • App架构方方面面

    布局 揭秘 iOS 布局 Masonry源码解析 自动布局&绝对布局autolayoutautolayout 动画...

网友评论

      本文标题:自动布局

      本文链接:https://www.haomeiwen.com/subject/byzfrttx.html