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 ...
随机推荐
- 问得最多的十个JavaScript前端面试问题
我知道有很多人不同意这种类型的面试.其实不管你喜不喜欢,你都得接受.尤其当你是自学的,而且要申请第一份工作时. 我估计很多有人其它方法来证明他自己,像Github/ 项目地址可能是非常理想的证明方 ...
- ASP.NET MVC系列:添加视图
虽然在上一篇文章中我们知道通过控制器可以在浏览器输出HTML页面,但是这不是控制器主要干的事,因为页面上我为还要做很多好看的特效,页面展示的事情当然交给视图来做了:下面我们就来看看如何添加一个视图 添 ...
- The conversion of a varchar data type to a datetime data type resulted in an out-of-range value
刚刚有在程序中,传递一个空值至MS SQL Server数据库,这个值的数据类型为DATETIME执行时,它却发生了如标题提示的异常:The conversion of a varchar data ...
- ab网站压力测试
ab网站压力测试命令的参数.输出结果的中文注解 permalink 以前安装好APACHE总是不知道该如何测试APACHE的性能,现在总算找到一个测试工具了.就是APACHE自带的测试工具AB( ...
- MongoDB管理工具的插件系统
MongoDB管理工具 MongoCola的开发已经进入第三个年头了. 官方对于C#驱动的投入不够导致了很多东西都必须自己实现,但是不管怎么样,工具现在已经很强大了. 最近准备着手插件系统的开发,简 ...
- XMPP客户端开发(1)--连接和登录
Smack可用于XMPP客户端的开发,下载Smack,将相关jar文件导入后,即可以开始XMPP客户端的开发. 以下代码实现了客户端连接Tigase服务器,并根据用户名和密码登录. package X ...
- EasyUI+MVC-搭建后台框架
一.EasyUI简介: jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面. 官方网站:h ...
- Word, PPT和Excel的常用技巧(持续更新)
本文的目的是记录平时使用Word, PowerPoint和Excel的过程中的一些小技巧,用于提升工作效率. 此文会不定期的更新,更新频率完全取决于实际使用遇到的问题的次数. 目录 Word Powe ...
- 对Java并发编程的几点思考
1. Threads 和 Runnables 所有的现代操作系统都通过进程和线程来支持并发.进程是通常彼此独立运行的程序的实例,比如,如果你启动了一个Java程序,操作系统产生一个新的进程,与其他程序 ...
- 线程池之 Callable、Future、FutureTask
java线程中的异步和同步,并不是走路,一定要搞清楚.那么join方法嘛,就是异步变同步.线程阻塞,就再楼下一直等着它想要的状态出现喽.直接上代码,先来看Future获取线程执行结果的使用示例: pu ...