手写代码自动实现自动布局,即Auto Layout的使用

手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下。

这里要注意几点:

    1. 对子视图的约束,若是基于父视图,要通过父视图去添加约束。

    1. 对子视图进行自动布局调整,首先对UIView的一个属性设置,这是因为如果我们用Interface Builder,勾选Ues Autolayout,这时autoresizingMask就会被Auto Layout 取代,在手写代码时,我们就需要手动控制,代码如下

      [_shadow setTranslatesAutoresizingMaskIntoConstraints:NO]

    1. 在添加约束前,要先将子视图添加到父视图上。

      以下为例,oneImgView 上添加子视图shadow,对shadow进行约束

@property (nonatomic, strong) UIImageView *shadow;
@property (nonatomic, strong) UIImageView *oneImgView;
[_shadow setTranslatesAutoresizingMaskIntoConstraints:NO]; // 使用自动布局
        [self.oneImgView addSubview:_shadow]; // 添加约束前要先将子视图添加到父视图上
        NSLayoutConstraint *constraint = [NSLayoutConstraint
                                          constraintWithItem:_shadow
                                          attribute:NSLayoutAttributeWidth
                                          relatedBy:NSLayoutRelationEqual
                                          toItem:self.oneImgView
                                          attribute:NSLayoutAttributeWidth
                                          multiplier:1
                                          constant:0];
        [self.oneImgView addConstraint:constraint];

        constraint = [
                      NSLayoutConstraint
                      constraintWithItem:_shadow
                      attribute:NSLayoutAttributeBottom
                      relatedBy:NSLayoutRelationEqual
                      toItem:self.oneImgView
                      attribute:NSLayoutAttributeBottom
                      multiplier:1.0f
                      constant:0.0f
                      ];
        [self.oneImgView addConstraint:constraint];
        constraint = [
                      NSLayoutConstraint
                      constraintWithItem:_shadow
                      attribute:NSLayoutAttributeHeight
                      relatedBy:NSLayoutRelationEqual
                      toItem:nil
                      attribute:NSLayoutAttributeHeight
                      multiplier:1.0f
                      constant:58.0f
                      ];
        [self.oneImgView addConstraint:constraint];
        constraint = [
                      NSLayoutConstraint
                      constraintWithItem:_shadow
                      attribute:NSLayoutAttributeLeft
                      relatedBy:NSLayoutRelationEqual
                      toItem:self.oneImgView
                      attribute:NSLayoutAttributeLeft
                      multiplier:1.0f
                      constant:0.0f
                      ];
        [self.oneImgView addConstraint:constraint];

关于函数

    +(instancetype)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation
toItem:(id)view2 attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier     constant:(CGFloat)c;

苹果的官方文档是这么描述的。

/* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant"
 If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
 */

所以你只需要记住view1.attr1 = view2.attr2 * multiplier + constant就可以了

  可视化格式语言约束(VFL)

除此之外iOS 8推出了一种新的约束方式——可视化格式语言约束,这种约束方式和中国古代的象形文字很相似。它可以一次添加多个约束,而且很直观,但不是所有的约束都可以满足的,维护也有一定的难度

代码为例,如果我要实现shadow 距离父视图左边界为20,宽为40,距离顶部20,高度最小30,不能超过100

     
     NSArray *constraints = nil;
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[_shadow(==40)]|" options:NSLayoutFormatAlignAllLeft metrics:nil views:NSDictionaryOfVariableBindings(_shadow)];
        [self.oneImgView addConstraints:constraints];
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[_shadow(>=58)@100]" options:NSLayoutFormatAlignAllLeft metrics:nil views:NSDictionaryOfVariableBindings(_shadow)];
        [self.oneImgView addConstraints:constraints];
    1. format:这里是你的VFL语句,比如:@”H:|[_shadow]|”(注意“-”默认父子视图之间表示20px,同级视图之间表示8px,但是如果是“-10-”则表示前后相距10,短线距离忽略)
    1. options:默认写0,跟据需求去选择你想要的枚举
    1. metrics:
      字典,
      你的VFL语句中使用了动态参数时,将参数名和对应的值为键值对写在字典中,比如:@”H:|-[_shadow(==width)]-|”,表示这个
      _shadow的宽度为width,这是字典里面找到key对就的值,如果没有找到这个值,app就会crash.
    1. views:字典,你的VLF语句中使用到得所有view,用这个宏去添加NSDictionaryOfVariableBindings(view1,view2,view3…)

      上面代码中VFL语句为:@”H:|[_shadow]|”,其中“|”表示父视图的边界

以下为VLF语句

|: 表示父视图

-:表示距离

V: :表示垂直

H: :表示水平

>= :表示视图间距、宽度和高度必须大于或等于某个值

<= :表示视图间距、宽度和高度必须小宇或等于某个值

== :表示视图间距、宽度或者高度必须等于某个值

@ :>=、<=、== 限制 最大为 1000

以下为例

|-[view]-|: 视图处在父视图的左右边缘内

|-[view] : 视图处在父视图的左边缘

|[view] : 视图和父视图左边对齐

-[view]- : 设置视图的宽度高度

|-30.0-[view]-30.0-|: 表示离父视图 左右间距 30

[view(200.0)] : 表示视图宽度为 200.0

|-[view(view1)]-[view1]-| :表示视图宽度一样,并且在父视图左右边缘内

V:|-[view(50.0)] : 视图高度为 50

V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示到父视图左边的距离为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。

[wideView(>[email protected])] :视图的宽度为至少为60 不能超过 700

如果没有声明方向默认为 水平 V:

时间: 2024-10-12 23:43:47

手写代码自动实现自动布局,即Auto Layout的使用的相关文章

UI到底应该用xib/storyboard完成,还是用手写代码来完成?

UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 参考文章: <关于代码手写UI,xib和StoryBoard> http://blog.csdn.net/likendsl/article/details/38731333 <代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧> ht

手写代码UI,xib和StoryBoard间的的优劣比较

在UI制作方面,逐渐分化三种主要流派:使用代码手写UI:使用单个xib文件组织viewController或者view:使用StoryBoard来通过单个或很少的几个文件构建UI.三种方式各有优劣,也各有自己最适用的场合. 一.手写代码UI 1.优势 √  适合大型项目大规模使用,利于版本管理.追踪改动以及代码合并 √  最好的代码重用性 2.遗憾 √  慢,开发周期长,维护代码复杂 √  自动布局AutoLayout困难 二.xib文件组织viewController或者view 1.优势 √

自己手写的自动完成js类

在web开发中,为了提高用户体验,会经常用到输入框的自动完成功能,不仅帮助用户进行快速输入,最重要的是帮助那些“记不全要输入什么”的用户进行选择.这个功能有很多插件已经实现了,为了适应项目的特殊需求,决定自己编写一个具备通用性.扩展性和灵活性的自动完成类,就当是边写边学习了,一举两得.该功能是比较简单的,核心是数据获取方式和导航的实现,简单写了一个,经测试非常好用,还有很多地方需要修改和改进,例如:在原型中只暴露init方法即可,其他方法都需要放到私有空间内,不让用户访问到,这个以后再完善吧.啥

我要好offer之 str/mem系列手写代码

1. str*系列手写代码 a. 一定要注意末尾'\0'的处理,切记切记 b. 一定要对输入做有效性判断,多用断言就是了 int Strlen(const char* str) { assert(str != NULL); const char* tmp = str; while (*tmp != '\0') { ++tmp; } return tmp - str; } char* Strcpy(char* dst, const char* src) { assert(dst != NULL &

如果选择构建ui界面方式,手写代码,xib和StoryBoard间的博弈

代码手写UI这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用. 大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代码UI可以说具有最好的代码重用性.如果你的目的是写一些可以高度重用的控件提供给其他开发者使用,那毫无疑问最好的选择应该是使用代码来完成UIView的子类.这样进一步的修改和其他开发者在使用时,都会方便不少.使用代码也是最为强大的,会有xib或者StoryBoard做不了的事情,但是使用代码最终一定能

.netER的未来路,关于基础是否重要和应该自己手写代码吗?

http://www.cnblogs.com/onepiece_wang/p/5558341.html#!comments 引用"基础知识的学习,一开始可能是背书,但是在后续若干年的工作过程中,在写代码时有没有想过为什么代码要写成这样子." 谁没有去想过呢?我深究过,但后来放弃了,原因很简单,因为我深究后发现,1+1等于2 苹果就是叫苹果.我去思考1+1为什么等于2 苹果为什么叫苹果.研究透后才发现只是多此一举,很浪费时间也没有实质性的作用.因为他就叫那个苹果名字,1+1就是等于2,我

iOS UICollectionView手写代码实现步骤

// //  ViewController.h //  collectionView手写代码 // //  Created by yangxiuying on 14/11/28. //  Copyright (c) 2014年 lanjiying. All rights reserved. // #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UICollectionViewDataSource,U

Appium初始化设置:手写代码连接手机、appium-desktop连接手机

一.包名获取的三种方式 1)找开发要2)mac使用命令:adb logcat | grep START win使用命令:adb logcat | findstr START 查看包名和入口如下: 3)通过aapt命令查看 cmd到你的android-sdk-windows\build-tools\28.0.3路径下,可以看到aapt 注意:mac使用ls,win使用dir命令 win使用命令  aapt dump badging C:\Users\Yangfan\Desktop\mobileqq

iOS6 自动布局 入门–Auto Layout

目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会发生了-对于iPhone与iPad IOS6 带来了一个非常了不起的特征:自动布局. 自动布局不仅能给你的应用带来各种屏幕尺寸设计的支持,做为额外的惊喜,它还能使设计中的各种小事比如多语言环境支持.你从此不必再为你想要支持的各种语言重新设计nibs和storyboards文件,当然这也包括一些从右至左书写的语言比如说希伯来文和阿拉伯语. 这篇教程将向你展示的是如何开始使用