适配----Autolayout

AutLayout 相对布局,根据参照视图的位置 来定义自己的位置。通过约束视图和视图之间的关系来分配屏幕上的位置,通常与VFL语言配合使用

VFL(visual format language)视觉格式化语言,通过字符串来约束字符和字符之间的关系

使用AutLayout必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用frame  原点  自身的尺寸 来确定 自身位置。而autoLayout  根据参照视图的位置  来定义自己的位置

autoLayout是相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置

使用VFL(Visual Format Language  视觉格式语言)通过添加字符串 来约束视图和视图之间的关系

使用autoLayout 必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用

相对布局是找一个参照物 拿参照物当做基础,设置他和参照物的相对距离 来设置自己的位置

VFL 须有 横竖 两个方向的约束

H:表示: 横向

V: 表示:竖向

| 表示他的父视图

-50- 表示后面视图 与前面视图的距离 (后面视图是textField,前面视图是他的父视图)

[]表示是一个视图

[textField(>=200)] 要约束视图的宽  (>=200)允许最小的宽度是200  如果是竖向  就是允许最小的高度

@"H:|-50-[textField(>=200)]-50-|"

距离坐边原点距离50   右边边界距离50    允许视图的最小宽度是200

使用autoLayout适配的时候以最小尺寸设备 为基准

/*//    VFL  横向 竖向布局

//    @"H:" 设置横向布局

//    @"V:" 设置竖向布局

//    设置横向布局 距离参照视图的左侧边距

//    @"H:|-20-"

//    @"H:[view]-20-"

//    @"H:|-20-[view(200)]" view的宽  永远是200

//    @"H:|-20-[view(otherView)]" view的宽  与otherView的宽相同

//    @"H:|-20-[view(>=200)]" 设置横向布局 距离参照视图的左侧边距 设置view横向的尺寸 不能低于200

//    @"H:|-20-[view(>=200)]-20-|" 设置横向布局 距离参照视图的左侧边距 设置view横向的尺寸 不能低于200 设置右侧与参照视图之间的间距

*/

//    视图 使用属性的时候   绑定key  需要绑定它真实的名字  _titleLable

//    self.titleLable = _titleLable

下面是代码:

1.使用Autolayout布局一个视图

在viewDidLoad写入以下代码:

UIView *view = [[UIView alloc]init];

//使用Autolayout必须禁用translatesAutoresizingMaskIntoConstraints

view.translatesAutoresizingMaskIntoConstraints =NO;

view.backgroundColor =[UIColor redColor];

[self.view addSubview:view];

NSDictionary *views =NSDictionaryOfVariableBindings(view);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|"  options:0 metrics:nil views:views]];

2.使用Autolayout布局两个视图:

UIView *view = [[UIView alloc]init];

view.translatesAutoresizingMaskIntoConstraints =NO;

view.backgroundColor =[UIColor redColor];

[self.view addSubview:view];

UIView *view1 = [[UIView alloc]init];

view1.translatesAutoresizingMaskIntoConstraints =NO;

view1.backgroundColor =[UIColor yellowColor];

[self.view addSubview:view1];

NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:|-40-[view(>=50)]" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:  @"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];

3.使用Autolayout布局多个视图

NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor],[UIColor greenColor]];

for (int i=0; i<3; i++) {

UIView *view =[[UIView alloc]init];

view.backgroundColor = colorList[i];

view.tag = 30+i;

view.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:view];

}

UIView *redColorview = [self.view viewWithTag:30];

UIView *yellowColorview = [self.view viewWithTag:31];

UIView *greenColorview = [self.view viewWithTag:32];

NSDictionary * views = NSDictionaryOfVariableBindings(yellowColorview,redColorview,greenColorview);

NSArray * HList = @[@"H:|-20-[redColorview(>=200)]-20-|",@"H:|-20-[yellowColorview(>=100)]-10-[greenColorview(yellowColorview)]-20-|"];

//    红色视图与黄色视图竖向关系和红色视图和绿色视图竖向关系

NSArray *VList = @[@"V:|-40-[redColorview(50)]-10-[yellowColorview(redColorview)]",@"V:|-40-[redColorview(50)]-10-[greenColorview(redColorview)]"];

for (int i =0; i<VList.count; i++) {

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:HList[i] options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VList[i] options:0 metrics:nil views:views]];

}

时间: 2024-10-19 01:34:20

适配----Autolayout的相关文章

屏幕适配/autoLayout autoresizingMask

#pragma mark-- 屏幕适配/autoLayout autoresizingMask 1> 发展历程 代码计算frame -> autoreszing(父控件和子控件的关系) -> autolayout(任何控件都可以产生关系) -> sizeclass 2> sizeclass * 仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout * 不再有横竖屏的概念, 只有屏幕尺寸的概念 * 不再有具体尺寸的概念, 只有抽象尺寸的概念 * 把宽度和高度各

iOS 适配/ autoLayout基本知识

适配历史 iPhone3GS.iPhone4\4s:没有屏幕适配最早开发里面的程序全部都是写死的iPad 旋转出来之后 Autoresizing问世iPhone5\5c\5s兼容各种不同的情况 系统适配 ios版本适配ios6 7 8 9 屏幕适配 iPhone3.5 4.0 4.7 5.5 iPad 7.9 9.7 开发面向点去开发 5s = 320 * 480 6 = 375 * 667 6p = 414 * 736autoResizing 必须关闭autolayout.sizeclass才

【iOS开发】多屏尺的自动适配 AutoLayout (纯代码方式)

关于AutoLayout,最早从iOS6开始引入使用. 主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换. 网上大量的资料都在介绍xib和storyboard,如何使用AutoLayout,说纯代码使用AutoLayout进行UI布局的越来越少.对于我这个习惯了代码UI布局的人,写个备忘: AutoLayout是什么? 使用一句Apple的官方定义的话 AutoLayout是一种基于约束的,描述性的布局系统. Auto Layout Is a Constraint-Based, De

纯代码添加约束,autolayout 适配

IOS AutoLayout 代码约束—VFL 2014-12-22 22:19:43http://my.oschina.net/carson6931-Carson6931-点击数:2148 IOS 提供了两种添加约束的方法 第一种: +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2

iOS开发UI篇—屏幕适配autoResizing autoLayout和sizeClass图文详解

1. autoResizing autoresizing是苹果早期的ui布局适配的解决办法,iOS6之前完全可以胜任了,因为苹果手机只有3.5寸的屏幕,在加上手机app很少支持横屏,所以iOS开发者基本不用怎么适配布局,所有的ui控件只要相对父控件布局就可以了,没错autoResizing就是一个相对于父控件的布局解决方法:注意:它只能相对父控件布局:***在xcode中可以通过可视化的界面调整也可以通过代码去控制 在用autoResizing的时候需要关闭autoLayout和sizeclas

AutoLayout自动适配(转载)

使用AutoLayout注意事项: (1)设置控件的translatesAutoresizingMaskIntoConstraints为NO. (2) constraintWithItem:(添加约束的控件) attribute:(设置限制的属性,如左,右,高度,宽度等) relatedBy:(大于,等于,小于) toItem:(第二个控件约束,如果无,nil) attribute:(第二个控件的约束属性) multiplier:(乘数,如1.0) constant:(增加的常量); (3)用V

代码适配(Autolayout)

关于AutoLayout,最早从iOS6开始引入使用. 主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换. 网上大量的资料都在介绍xib和storyboard,如何使用AutoLayout,说纯代码使用AutoLayout进行UI布局的越来越少.对于我这个习惯了代码UI布局的人,写个备忘: AutoLayout是什么? 使用一句Apple的官方定义的话 AutoLayout是一种基于约束的,描述性的布局系统. Auto Layout Is a Constraint-Based, De

屏幕适配Autoresizing / Autolayout / Mansory / 自定义Frame实现

1. 什么是适配: 适应.兼容不同版本不同尺寸的移动智能设备 iPhone尺寸:3.5.4.0.4.7.5.5inch iPad尺寸:7.9.9.7inch,横竖屏适配 2. 点与像素 非retaina屏:1个点 = 1个像素 retain屏:1个点 = 4个像素 3. 什么是Autolayout 1>  是一种“自动布局”技术,专门用来布局UI界面的 2> 自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广 3> 自iOS 7(Xcode 5)开始,Autolay

Autolayout屏幕适配——代码实现(苹果公司 / VFL语言 / 第三方框架Masonry)

在讲解如何通过代码来实现屏幕适配前,先来了解一下,屏幕适配中用到的约束添加的规则. 在创建约束之后,需要将其添加到作用的view上 在添加时要注意目标view需要遵循以下规则: 1. 约束规则    1> 添加约束的规则(一) 对于两个同层级view之间的约束关系,添加到它们的父view上 2> 添加约束的规则(二) 对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上 3> 添加约束的规则(三) 对于有层次关系的两个view之间的约束关系,添加到层次较高的父view