IOS开发之UI布局
前言:本篇随笔会经常更新,随着本人对布局的深入学习,会不断补充新的知识、新的使用技巧、新的认识等等。
1、Autoresizing(在代码中使用)
先简单的看看下面的代码,以及左边运行出来的效果,然后后面就会对iPhone模拟器进行旋转,再看看效果,然后结合代码中的autoresizingMask属性来体会一下:
横屏之后,说明竖屏默认的frame(0,0,100,500)换到横屏之后会默认在中间一些的位置,但是因为上面设置autoresizingMask属性是左边和上边自动伸缩:
以上就是基本的autoresizing在代码中的使用。
2、Autolayout的使用(代码中使用)
在Autolayout之前,有Autoresizing可以做屏幕适配,但是局限性很大,有些任务根本无法完成(Autoresizing只能设置自身和父控件之间的相对关系)。
相比之下,Autolayout的功能就比Autoresizing的功能就强大的多,它能解决任何控件之间的关系。
AutoLayout的2个核心概念:
①约束:通过给控件添加约束,来决定控件的位置和尺寸。
使用AutoLayout就需要创建约束类创建约束对象:
NSLayoutConstraint *leftLC = [NSLayoutConstraint constrainWithItem:......];
②参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)。
如果会使用Autolayout就可以不需要考虑Frame值了。
在实际开发中,如果要使用AutoLayout,要注意一个问题,有的苹果Cocoa框架提供UIView或者自定义的UIView可能默认设置了相关Autoresizing,那么可能会和你后面添加的AutoLayout代码相互冲突,所以就需要下面的代码,将Autoresizing自动转换为AutoLayout:
代码实现Autolayout的步骤
- 利用NSLayoutConstraint类创建具体的约束对象
- 添加约束对象到相应的view上
- - (void)addConstraint:(NSLayoutConstraint *)constraint;
- - (void)addConstraints:(NSArray *)constraints;
然后下面代码来使用AutoLayout,我们来实现下面的效果,当然旋转成竖屏还是要这样的布局哦,不然自动布局还有啥意义:
在代码实现之前,我需要补充几个知识:
使用自动布局是需要遵守一些约束的规则的:
添加约束的规则(1)
在创建约束之后,需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上
添加约束的规则(2)
2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
添加约束的规则(3)
3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
在下面展示全部的代码中,我抽取一部分来理解上面约束添加规则的意思:
接着再补充这个约束的类和创建对象的各个参数的意义:
一个NSLayoutConstraint对象就代表一个约束。
创建约束对象的常用方法
view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
下面展示实现的完整代码:
- (void)viewDidLoad {
[super viewDidLoad];
// 1.创建蓝色的view
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
// 禁止autoresizing自动转为autolayout的约束
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView]; // 2.创建红色的view
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
// 禁止autoresizing自动转为autolayout的约束
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView]; // 设置约束
/*****蓝色view的约束****/
// 左边的约束
// 左边约束
NSLayoutConstraint *leftlc_b = \
[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:];
[self.view addConstraint:leftlc_b]; // 底部约束
NSLayoutConstraint *bottomlc_b = \
[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-];
[self.view addConstraint:bottomlc_b]; // 右边约束
NSLayoutConstraint *rightlc_b = \
[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:-];
[self.view addConstraint:rightlc_b]; // 宽度约束
NSLayoutConstraint *wlc_b = \
[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:];
[self.view addConstraint:wlc_b]; // 高度约束
NSLayoutConstraint *hlc_b = \
[NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:0.0
constant:];
[blueView addConstraint:hlc_b]; /*****红色view的约束****/
// 右边约束
NSLayoutConstraint *rightlc_r = \
[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:-];
[self.view addConstraint:rightlc_r]; // 顶部对齐
NSLayoutConstraint *toplc_r = \
[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:];
[self.view addConstraint:toplc_r]; // 底部对齐
NSLayoutConstraint *bottomlc_r = \
[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:];
[self.view addConstraint:bottomlc_r]; }
补充:
IOS开发之UI布局的更多相关文章
- (1) iOS开发之UI处理-预览篇
不管是做iOS还是Android的开发,我想UI这块都是个大麻烦,任何客户端编程都是如此,我们要做的就是尽量减少我们工作的复杂度,这样才能更轻松的工作. 在iOS开发中Xcode虽然自带了强大的IB( ...
- (3) iOS开发之UI处理-UIView篇
在UIView作为许多子控件的容器的时候,首先我们需要动态的计算出UIView下的所有子控件的高度,并布局排列好,然后我们还要把作为容器的UIView的高度调整到刚好包裹着所有子控件,不会过矮,也不会 ...
- (2) iOS开发之UI处理-UILabel篇
我们经常要根据内容去动态计算控件的高度,比如一个UILabel控件,常常要显示多行内容,并且计算出总高度,如果每个UILabel要多行显示,都要写这么一段代码是非常痛苦的,看代码如下: 我想大 ...
- iOS 开发之Block
iOS 开发之Block 一:什么是Block.Block的作用 UI开发和网络常见功能的实现回调,按钮事件的处理方法是回调方法. 1. 按钮事件 target action 机制. 它是将一 ...
- 李洪强iOS开发之iOS好文章收集
李洪强iOS开发之iOS好文章收集 该文收集朋友们转发或自己的写的技术文章,如果你也有相关的好文章,欢迎留言,当好文章多的时候,我会对这些好文章进行分门别类 文章 简述 日期 直播服务配置 使用 ng ...
- 李洪强IOS开发之iOS好项目收集
李洪强IOS开发之iOS好项目收集 在这里收集一些最近出现的比较实用好玩的框架或者项目,会不断更新 项目 简述 日期 SCTableViewCell 类似与QQ侧滑删除Cell的Demo 201501 ...
- iOS 开发之 GCD 基础
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- iOS开发之MVVM在项目中的应用
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...
- iOS开发之Socket通信实战--Request请求数据包编码模块
实际上在iOS很多应用开发中,大部分用的网络通信都是http/https协议,除非有特殊的需求会用到Socket网络协议进行网络数 据传输,这时候在iOS客户端就需要很好的第三方CocoaAsyncS ...
随机推荐
- Android 手机上获取物理唯一标识码[转]
所有添加有谷歌账户的设备可以返回一个 ANDROID_ID 所有的CDMA设备对于 ANDROID_ID 和 TelephonyManager.getDeviceId() 返回相同的值(只要在设置时添 ...
- 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
原文网址链接:http://ourjs.com/detail/54e18c51232227083e000034Bootstrap 和 Angular 都是人们大量使用的工具.在很多项目中,它们需要 ...
- 炉石传说 C# 开发笔记 (源代码整理公开)
源代码已经整理过了,去除了不需要的项目. 注意:以前文章中出现过的Git已经变更过了,请以前关注过,Fork过的朋友,重新Fork一下. GitHub地址 卡牌XML文件的做成:(Git上面是没有XM ...
- Autofac Container 的简单的封装重构
为了使用方便,对Autofac container的简单封装,记录如下,备以后用或分享给大家,欢迎讨论! using Autofac; using Autofac.Core.Lifetime; usi ...
- 孙鑫MFC学习笔记16:异步套接字
16 1.事件对象 2.CreateEvent创建事件对象 3.SetEvent设置事件对象为通知状态 4.ResetEvent设置事件对象为非通知状态 5.InitializeCriticalSec ...
- luogg_java学习_03_流程控制及循环结构
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! 程序流程控制 顺序结构 分支结构:if-else,sw ...
- 禅道PMS兼容redmine用户认证接口
项目地址:https://github.com/web3d/zentao-redmine-userauth zentao-redmine-userauth 做了一个基本的用户认证接口,兼容redmin ...
- 泛函编程(33)-泛函IO:Free Functor - Coyoneda
在前几期讨论中我们终于推导出了Free Monad.这是一个Monad工厂,它可以把任何F[A]变成Monad.可惜的是它对F[A]是有所要求的:F必须是个Functor.Free Monad由此被称 ...
- Java基础学习 -- Java(OOP)程序的设计原则
避免代码复制.解决方案:函数.父类: 封装.尽量private每个类的成员变量,用操作封装数据,减少类与类之间成员变量的直接调用,而是调用method,降低耦合: 可扩展性最大化.尽量使用框架+数据的 ...
- HTML中网页超链接设计
一.超链接的概念: 1>用<a>标签实现.href属性设置了要链接的网址. 链接路径URL:Uniform Resource Locator的缩写.统一资源定位符. 4部分组成:协议 ...