美文网首页
布局方式

布局方式

作者: 强降雨天气 | 来源:发表于2017-06-19 15:55 被阅读0次

绝对布局:frame

相对布局:

1、Autoresizing(启用的方式,局限性大)

2、Auto layout(强制主线程布局,低性能,当view个数大于30时会明显降低性能,简单页面可以使用)

在我们使用 Auto Layout 进行布局时,可以指定一系列的约束,比如视图的高度、宽度是多少等等。而每一个约束其实都是一个简单的线性等式或不等式,整个界面上的所有约束在一起就 明确地(没有冲突) 定义了整个系统的布局。

Auto Layout 的原理就是对 线性方程组或者不等式 的求解。

代码方式:

利用NSLayoutConstraint类创建具体的约束对象

添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;

- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点:

1)要先禁止autoresizing功能,设置view的下面属性为NO

2)view.translatesAutoresizingMaskIntoConstraints = NO;

3)添加约束之前,一定要保证相关控件都已经在各自的父控件上

4)不用再给view设置frame

5)一个NSLayoutConstraint对象就代表一个约束

创建约束对象的常用方法

+(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 :常量

自动布局有个核心公式

obj1.property1 =(obj2.property2 * multiplier)+ constant value

tips:简单的添加动画:

[UIView animateWithDuration:1 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:15 options:UIViewAnimationOptionCurveEaseOut animations:^{ [self.view layoutIfNeeded]; } completion:nil];

3、VFL(全称是Visual Format Language,翻译过来是“可视化格式语言”)

VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

4、第三方自动布局框架

1、masonry(对autolayout的封装)

github地址

其他大神的实用教程传送门

2、

相关文章

  • css中常见的布局方式

    三栏布局 三栏布局是页面中比较常见的布局方式,也有好几种实现方式,分别是flex布局,grid布局,float布局...

  • AutoLayout学习

    iOS布局方式的演变 使用Rect的frame布局方式 autoresizingMask方式 AutoLayout...

  • 【方案】圣杯布局&双飞翼布局

    背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很...

  • 2020-02-03

    六、栅格布局方式Grid 众人云,Grid布局是CSS中最强的布局方式。Grid 布局与 Flex 布局有一定的相...

  • android第四课。

    今天学习了两种布局方式。一种是线性布局,另一种是相对布局。 线性布局: 相对布局: 相对布局 图标要选择对齐方式

  • HTML布局

    1.基础 1.1布局方式 布局方式解释自然布局无任何修饰,自动向左响应布局流动布局,采用浮动方法定位布局相对于di...

  • Java图形化:布局方式

    布局方式 FlowLayout:流布局 BorderLayout:边框布局 GridLayout:网格布局 Flo...

  • 布局方式

    绝对布局:frame 相对布局: 1、Autoresizing(启用的方式,局限性大) 2、Auto layout...

  • 布局方式

    1.标准流排版方式 标准流也称普通流、文档流,该方式时默认排版方式,块级元素垂直排版,行内元素是行内或者行内块...

  • HTML布局问题

    1:html中常见的有3种布局方式: 1:文档流布局(电脑默认的布局方式) 2:浮动布局 3:定位 文档流布...

网友评论

      本文标题:布局方式

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