Autolayout 自动布局

Autolayout

字数715  阅读273  评论7 

在Autolayout之前,Autoresizing可以作屏幕适配,但局限性较大有些任务根本无法完成
相比之下,Autol'ayout的功能比Autoresizing强大很多

什么是Autolayout


1.Autolayout是一种“自动布局”技术,专门用来布局UI界面的
2.Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广
3.自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升
4.苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
5.Autolayout能很轻松地解决屏幕适配的问题

Autolayout的2个核心概念
           1. 参照
           2. 约束

Autolayout常用面板
01-约束处理


Snip20150821_36.png

02-相对

Snip20150821_37.png

03-对齐

Snip20150821_38.png

Autolayout的警告和错误

    - 警告:
       控件的frame不匹配所添加的约束,
       比如约束控件的宽度为100, 而控件现在的宽度是110
       如下图所示:

Snip20150821_40.png
    - 错误:
       缺乏必要的约束, 
       比如只约束了宽度和高度, 没有约束具体的位置
       如下图所示:

Snip20150821_39.png
   - 两个约束冲突,:
       比如1个约束控件的宽度为100, 1个约束控件的宽度为110
       如下图所示:

Snip20150821_39.png

通过代码添加Autolayout

但首先需要先了解一个类(NSLayoutConstraint)

一个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

代码实现Autolayout的步骤

- 利用NSLayoutConstraint类创建具体的约束对象 
- 添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点 

 - 要先禁止autoresizing功能,设置view的下面属性为NO
`view.translatesAutoresizingMaskIntoConstraints = NO;`
 - 添加约束之前,一定要保证相关控件都已经在各自的父控件上不用再给view设置frame

添加约束的规则

在创建约束之后,需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上


Snip20150821_41.png

2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上


Snip20150821_42.png

3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上


Snip20150821_43.png

    • 0
      点赞
    • 0
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    在Unity 2D中,可以通过代码来实现自动布局,其中可以使用Unity的RectTransform组件来控制UI元素的位置和大小。以下是一个简单的例子: 首先,我们需要在Unity中创建一个空的GameObject,并且将其命名为“AutoLayout”。 然后,在脚本中,我们可以通过以下方式来实现自动布局: ```csharp using UnityEngine; public class AutoLayout : MonoBehaviour { public RectTransform[] elements; // 需要自动布局的UI元素数组 void Start() { AutoArrangeElements(); } void AutoArrangeElements() { float totalWidth = 0f; // UI元素的总宽度 float spacing = 10f; // 间距 // 计算所有UI元素的总宽度 foreach (RectTransform element in elements) { totalWidth += element.sizeDelta.x + spacing; } // 设置第一个UI元素的初始位置 float currentX = -totalWidth / 2; // 遍历所有UI元素并设置其位置 foreach (RectTransform element in elements) { Vector2 newPosition = new Vector2(currentX + element.sizeDelta.x / 2, 0); element.anchoredPosition = newPosition; currentX += element.sizeDelta.x + spacing; } } } ``` 在这个例子中,我们首先创建了一个空的GameObject,并且将上述脚本附加到该GameObject上。在脚本中,我们定义了一个包含需要自动布局的UI元素的数组。然后在Start()方法中调用AutoArrangeElements()方法来执行自动布局AutoArrangeElements()方法首先计算出所有UI元素的总宽度,然后根据计算出的位置来设置每个UI元素的位置,实现了自动布局的效果。 通过这种方式,可以通过代码来实现Unity 2D中的自动布局,从而提高UI的灵活性和可扩展性。

    “相关推荐”对你有帮助么?

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值