iOS编程(双语版)-视图-Autolayout代码初步

一谈到Autolayout,初学者肯定想到的是IB中使用拖拽啊,pin啊各种鼠标操作来进行添加各种约束。

今天我们要聊得是如何利用代码来添加视图间的约束。

我们来看一个例子:

(Objective-C代码)

UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(100, 111, 132, 194)];
v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];
UIView* v2 = [UIView new];
v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];
UIView* v3 = [UIView new];
v3.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
[mainview addSubview: v1];
[v1 addSubview: v2];
[v1 addSubview: v3];

v2.translatesAutoresizingMaskIntoConstraints = NO;
v3.translatesAutoresizingMaskIntoConstraints = NO;

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeLeft
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeLeft
        multiplier:1 constant:0]];

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeRight
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeRight
        multiplier:1 constant:0]];

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeTop
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeTop
        multiplier:1 constant:0]];

[v2 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v2 attribute:NSLayoutAttributeHeight
        relatedBy:0
        toItem:nil attribute:0
        multiplier:1 constant:10]];

[v3 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeWidth
        relatedBy:0
        toItem:nil attribute:0
        multiplier:1 constant:20]];

[v3 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeHeight
        relatedBy:0
        toItem:nil attribute:0
        multiplier:1 constant:20]];

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeRight
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeRight
        multiplier:1 constant:0]];

[v1 addConstraint:
    [NSLayoutConstraint
        constraintWithItem:v3 attribute:NSLayoutAttributeBottom
        relatedBy:0
        toItem:v1 attribute:NSLayoutAttributeBottom
        multiplier:1 constant:0]];

(Swift代码 iOS9)

let v1 = UIView(frame:CGRectMake(100, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView()
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
let v3 = UIView()
v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
v1.addSubview(v3)

v2.translatesAutoresizingMaskIntoConstraints = false
v3.translatesAutoresizingMaskIntoConstraints = false

v1.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Leading,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Leading,
        multiplier: 1, constant: 0)
)

v1.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Trailing,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Trailing,
        multiplier: 1, constant: 0)
)

v1.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Top,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Top,
        multiplier: 1, constant: 0)
)

v2.addConstraint(
    NSLayoutConstraint(item: v2,
        attribute: .Height,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1, constant: 10)
)

v3.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Width,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1, constant: 20)
)

v3.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Height,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1, constant: 20)
)

v1.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Trailing,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Trailing,
        multiplier: 1, constant: 0)
)

v1.addConstraint(
    NSLayoutConstraint(item: v3,
        attribute: .Bottom,
        relatedBy: .Equal,
        toItem: v1,
        attribute: .Bottom,
        multiplier: 1, constant: 0)
)

运行效果:

(竖屏)

(横屏)

 看了以上代码后,你肯定要疯了,那么多约束。。。

下面,我们就来逐一分析:

 我们先来看一下这段代码

OC

v3 = [[UIView alloc] initWithFrame:CGRectMake(v1.bounds.size.width-20,
    v1.bounds.size.height-20,
    20, 20)];

Swift

let v3 = UIView(frame:CGRectMake(
    v1.bounds.width-20, v1.bounds.height-20, 20, 20))

 这段代码很清楚地表达了:v3是宽高各20,并且位置在v1的右下角,其原点距离v1的右下角

坐标x,y各偏移20,也就是我们上图中看到的大红色矩形。

 

约束的API语句有时候是很冗长的,看上去很难懂。

为此,Apple发明了可视化格式(Visual Format)来便于理解。

看看下面的这个例子:

@"V:|[v2(10)]"

上面的表达式中,V:表示是垂直方向上的约束,同理,H:表示水平方向上约束。

管道符|代表父视图。

中括号内是要添加约束的视图变量名。

所以,这里的约束清晰地表达: v2和父视图顶端对齐,并且v2的高度是10。

 

时间: 2024-10-23 22:25:58

iOS编程(双语版)-视图-Autolayout代码初步的相关文章

iOS编程(双语版) - 视图 - 手工代码(不使用向导)创建视图

如何创建一个空的项目,最早的时候XCode的项目想到中,还有Empty Application template这个选项,后来Apple把它 给去掉了. 我们创建一个单视图项目. 1) 删除main.storyboard 2) 删除ViewController相关文件 3) 删除AppDelegate的所有内容   给你的AppDelegate加入如下内容: (Objective-C代码) - (BOOL)application:(UIApplication *)application didF

iOS编程(双语版) - 视图 - 基本概念

1. 什么是视图? 视图显示为手机上的一块矩形区域,管理该区域的所有屏幕显示,它是UIView或者UIView的子类. 视图既可以从xib生成,也可以用代码生成.   2. 窗口 窗口是UIWindow或者它的子类. 视图结构的顶层便是app的窗口. 窗口必须充满设备的屏幕,因此,必须设置窗口的frame为屏幕的bounds. (稍后我会讲解frame和bounds的区别) 代码如下: Objective-C UIWindow* w = [[UIWindow alloc] initWithFra

iOS编程(双语版)-视图-Frame/Bounds/Center

1. Frame 每个视图都有一个frame属性,它是CGRect结构,它描述了视图所在的矩形在其父视图中的位置. (屏幕坐标系默认的原点在左上角,x轴向右伸展,y轴向下伸展) 设置frame通常通过视图的指定初始化器initWithFrame 下面来看个例子,该例子初始化了3个相互叠加的矩形区域 (Objective-C代码) UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)]; v1.backg

iOS编程(双语版) - 视图 - Transform(转换)

视图有一个transform属性,它描述了应该如何绘制该视图. 该属性是CGAffineTransform结构体,它代表了3 x 3的变换矩阵(线性代数). 下面的代码让两个矩形视图旋转45度 (Objective-C代码) UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(113, 111, 132, 194)]; v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1

《iOS编程指南》——2.5节准备你的iOS设备

2.5 准备你的iOS设备 iOS编程指南 在设备上部署应用之前,你需要按照图2-5所示的步骤来做相关配置. 如果你已经加入了iOS开发者计划的标准版或者企业版,你现在就可以生成相应的证书和描述文件(Provisioning Profile)了,通过这个证书和描述文件,你才能把下一章中的测试程序安装到你的iOS设备上. 证书和描述文件 Xcode构建工程的时候需要使用开发证书来对二进制文件进行签名,这个开发证书同时也是你作为iOS开发者的唯一标识.Xcode会从Mac OS X的Keychain

《iOS编程指南》——2.1节注册成为iOS开发者

2.1 注册成为iOS开发者 iOS编程指南 在不久之前,获取Xcode需要先注册为苹果开发者.现在不必了,你从Mac App Store直接就可以下载最新本的Xcode和iOS SDK. 如果你还在使用OS X 10.6(Snow Leopard),那么你需要先注册为苹果开发者,成为iOS开发者计划的一员,然后从iOS Dev Center下载Xcode 4和iOS SDK,因为Mac App Store上提供的Xcode的版本只兼容OS X 10.7(Lion)和10.8(Mountain

IOS实现简易版的QQ下拉列表_IOS

下面我们通过实例代码来一步步看怎么实现, 首先建立了两个模型类, 一个Friend, 一个FriendGroup类. 数据源用的本地的一个plist文件. plist文件中包含了FriendGroup的name,friends数组等属性. Friend.h 示例代码 #import <Foundation/Foundation.h> @interface Friend : NSObject @property (nonatomic, copy) NSString *name; @end Fri

iOS 委托与文本输入(内容根据iOS编程编写)_IOS

•文本框(UITextField) 本章节继续编辑 JXHypnoNerd .文件地址 . 首先我们继续编辑 JXHypnosisViewController.m 修改 loadView 方法,向 view 中添加一个 UITextField 对象: #import "JXHypnosisViewController.h" #import "JXHypnosisView.h" @interface JXHypnosisViewController () @end @

设计-学生在线答疑排队模拟C语言版的程序代码有木有呢?

问题描述 学生在线答疑排队模拟C语言版的程序代码有木有呢? 程序设计思路: 1.主函数main( ),打印输出主控程序菜单选项,并接收用户的选择项 2.定义学生信息(学号.姓名)的数据存储结构 3.设计学生在线答疑排队模拟程序的功能函数EnQueue( ),处理新学生加入排队的情况 4.设计学生在线答疑排队模拟程序的功能函数AnsQ( ),处理队列中第一个学生出队列答疑的情况 5.设计功能函数PrintQ( ),输出队列中所有正在排队的学生信息. 6.当用户退出答疑程序时,检查队列是否为空.如仍