Objective-c——UI基础开发第十天(自动布局)
一、autoresizing 的使用(了解)
只能参照父控件
1、实现横竖屏幕切换,不能把控件的frame血丝,需要进行屏幕适配
2、需要参照父控件
use auto layout禁用
才会出现autoresizing
3、autolayout和autoresizing是互斥的
不通过运行来查看不同尺寸下的情况
preview-》mainstoryboard
4、外侧的四根线勾选,表示该view距离父控件四周的边界的距离保持不变
内侧的两根线表示表示宽度和高度会随着父view 的变化而变化(等比例变化
二、autoresizing代码的实现和弊端
6根线,外侧四根控制与父控件的距离
内侧两个记录与父控件之间的相对变化
autoresizingMask
UIViewAutoresizingFlexibleTopMargin
UIViewAutoresizingNone
UIViewAutoresingFlexibleHeight
去 | 或号
autoresing只适用子view和父view的
子view 和子view直接没法设置
只需要记住6根线的使用
autolayout(使用病掌握)
三、autolayout的基本使用
autolayout核心思想 :参照和约束
可以设置控件和任意控件的约束
创建项目 可以禁用size class
UIStackView 除外,其它都应用autolayout
(align pin (大头钉 有固定的意思)resolve auto layout issues(解决auto layout问题
align上面的一些灰色:针对多个控件的设置
leading edge 左边距(leading头部
Trialling edge 右边距
top edge 上边距
bottom edge 下边距
horizontal centers 水平居中
vertical centers 垂直居中
basinlines 基线,一般表示底部
-——----以上,针对多个控件的对齐方式
horizontal in container
vertically in container
add constraints 增加约束
当显示红线的时候:
表示缺少关键约束
或是约束冲突
————————以上针对align
添加宽高:pin中设置
也有四根线:constraints
表示该控件和其他控件的距离
width:表示本身的宽高
height
灰色:equal widths/equal heights :设置多个控件等宽等高的情况下
——-----————以上真对pin
当显示黄线的时候:
表示约束和实际的位置不相符合
resolve auto layout issues(解决autoolayout问题
selected views
update frame
update constraints
all views in view controller
更新约束只是让它去适应现在的约束
四、autolayout设置边界
使用autolayout的时候,稍不注意容易被添加一些值或者减少一些值 constant会产生偏移
(使用第三方库解决自动布局问题可以推荐)
使用了sutolayout 就不要再使用frame :没有frame的概念
autolayout 要确定宽高和x、y你只需设置约束就好,不需要去计算
五、使用autolayout设置边界
pin中:constant to margins 的勾选是什么?
xcode自动帮你添加的间距
在自己设置的时候,把勾选去掉
当设置上下左右设置间距的时候有问题:是上边距是针对 状态条下方进行设置的距离
解决:点击下选箭头的按钮:出现:top layout guide /view(current distance)
同样点击:bottom layout guide/view(current distance
有什么差别呢:
top layout guide 和bottom layout guide
是针对导航控制器和tabbar 设置的
六、auto layout 设置兄弟view之间的约束
clean constant 可以将约束清空
高度相等,顶部和底部对其
七、autolayout的上下约束设置
核心公式:
被约束view 的width = 参照view 的width * 系数 + 常量
八、autolayout的小技巧
设置图片并添加约束
1、
先添加图片再进行居中显示,红线消失,而不需要设置宽高
一开始居中但没有图片的时候,会出现红线
原因:设置完图片之后,会默认使用图片的宽高
2、拖放小控件的时候,添加上下距离的约束,没设置宽高也不会出现红线:原因是有些控件是有默认宽高的像(switch、button、textfield,虽然有默认宽高,但会出现与实际不符的黄线,因为你需要修改它的宽度,否则默认宽度较短
3、
九、小应用
图片无压缩怎么设置(边界不能设置)
那么就设置中心点(只需设置图片的xy)宽高根据图片而定
1X
2X
使用1x而把图片放在2X图片会放大两倍
把多出来的截掉
垂直或水平居中,再用当前的位置进行计算,也就是说都是相对于中心点的变动
中心点是个相对的位置
上面屏幕的高度是不一样的,所以才以中心点为参照(即便中心点在变,始终是一个相对的位置
十、autolayout代码实现
添加约束的规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上
2)对于两个不同层级的view之间的约束关系,添加到离它们最近的共同父view上
3)对于有层次关系的两个view之间的约束关系,添加到层次较高的view上
高度为什么可以添加到自己身上:因为没有做任何参照
和其他的view有关系的一般要添加到父view上
代码实现
一定要把view 的autoresizing属性给禁用掉(因为是互斥关系
review.translatesAutoresizingMaskIntoConstraints=NO;
否则添加的约束都是没有作用的
1\添加顶部的约束(核心公式
NSLayoutConstraint *blueTop =[NSLayoutCOnstraint constraintWithItem://被约束的view
attribute: NSLayoutAttributeLeft 被约束的属性
relatedBy :NSLayoutRelationGreaterThanOrEqual
toItem:参照的view
attribute:参照view的属性
multiplier:乘
constant:20加
2\设置完约束之后,添加到谁身上
//如果有子view和父view 的关系的话,就添加到父view上
self.view addConstraint:/addConstraints[后面会用到]
3\添加blueview的高度约束
NSLayoutConstraint *height =[NSLAyoutCOnstraint constraintWithItem attribute: toItem:nil attribute:NSLayoutAttributeNotAnAttribute
需要注意设置高度的时候,没有参照view就传nil 属性传NSLayoutNotAnAttribute
注意,右侧传入的constant 要负数
添加到哪?
如果添加到父view上也可以,添加到自己身上也可以 因为没有任何参照
十一、添加红色view
输入法:通用:中文时使用英文标示
注意:
1、千万不要忘记关闭translatesAutoresizingMaskIntoContraints属性
2、一定要保证相关控件都已经在各自的父控件上
3、不要给view设置frame
review的约束,是参照blueview
十二、VFL语言的使用
(可视化格式语言)
语法解释:
@“H:|-20-[review]-20-|”
H:表示水平方向
V:表示垂直方向
|- 边界 左/右(和左侧边界有距离,距离为20)
[review]
@“V:|-20-[review(50)]-20-[purpleview(==redView)”
V:表示垂直方向
|-20-[review(50)]:review 距离顶部的高度是20间距,自身的高度为50
purpleVIew 的高度和review 相等,purpleView距离review 有20的间距
在设置宽度的时候
addConstraints:因为设置约束的时候不止设置一个view
水平方向上红色view和紫色view相等
@“H:[purple view(==redView)]”
==redView*0.5为什么解析不了?
因为:VFL语言不支持乘法除法
所以如果要实现宽度一半的情况只能原先的设置方式
constraintsWithVisualFormat:放置VFL语言
水平方向上要不对top要不对bottom不能左右
垂直方向上只能左右不能上下
metrics:字典@{@“delte”:@20}
view:@{@“redView”:redView}]对应出现的对象
Objective-c——UI基础开发第十天(自动布局)的更多相关文章
- Objective-c——UI基础开发第十二天(相册展示)
一.知识点 模仿新特性 UICollectionViewFlowLayout自定义布局 相册 瀑布流(淘宝购物之类的 二.复习 a.UICollectionView 和 tableview共享一套AP ...
- Objective-c——UI基础开发第十一天(UICollectionView)
一.知识点 1.UICollectionView的dataSource .delegate 2.UICollectionView多组数据和单组数据的展示 3.UICollectionView.UICo ...
- Objective-c——UI基础开发第九天(QQ好友列表)
一.知识点: 1.双模型的嵌套使用 2.Button的对齐方式 3.优化UITableView的加载 4.layoutSubview的使用 5.cell的折叠代理 二.双模型的嵌套定义: 注意是将se ...
- Objective-c——UI基础开发第八天(QQ聊天界面)
一.知识点: QQ聊天界面 双模型的使用(dataModel和frameModel) UITextField的使用 通知的使用 拉伸图片的两种方法(slicing/image对象的resizeable ...
- Objective-c——UI基础开发第七天(自定义UITableView)
一.梗概: 1.自定义:headerView,footerVie,Cell等 2.双模型(遵循单一原则,类或模型实现的功能尽量单一) 3.计算文本的方法(针对不同文本内容而设置的宽高等) 4.设置fo ...
- Objective-c——UI基础开发第六天(UITableView)
一.UITableView的简单使用 显示要素: 1.显示多少给区组 2.显示多少行数据 3.每行显示什么内容 代理不会提醒你有什么方法没调用,但是UITableViewDataSource会 1)用 ...
- iOS开发UI基础—手写控件,frame,center和bounds属性
iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...
- Android UI开发第二十八篇——Fragment中使用左右滑动菜单
Fragment实现了Android UI的分片管理,尤其在平板开发中,好处多多.这一篇将借助Android UI开发第二十六篇——Fragment间的通信. Android UI开发第二十七篇——实 ...
- IOS开发UI基础--数据刷新
IOS开发UI基础--数据刷新 cell的数据刷新包括下面几个方面 加入数据 删除数据 更改数据 全局刷新方法(最经常使用) [self.tableView reloadData]; // 屏幕上的全 ...
随机推荐
- 封装对MongoDB数据库的增删改查访问方法(基于MongoDB官方发布的C#驱动)
本文利用MongoDB官方发布的C#驱动,封装了对MongoDB数据库的增删改查访问方法.先用官方提供的mongo-csharp-driver ,当前版本为1.7.0.4714 编写数据库访问帮助类 ...
- LTE Module User Documentation(翻译13)——频率复用算法(Frequency Reuse Algorithms)
LTE用户文档 (如有不当的地方,欢迎指正!) 19 Frequency Reuse Algorithms(频率复用算法) 本节我们将描述如何在 LTE 仿真中使用频率复用(FR)算法.共有两 ...
- neon指令,注意事项
1. vbic_s8 (int8x8_t a, int8x8_t b) 是 ~(ai & bi),一开始理解成 (~ai )& bi 导致出错 2.uint8x8_t vqshrn ...
- 0020 Linux 文件操作命令
1. 创建文件 touch 文件名 2. 删除文件 rm 文件名 3. 复制文件 cp 源文件 目录 4.剪切文件 mv 源文件 目标文件 5.重命名文件 mv 源文件名 新文件名 6.改变文件权限 ...
- Django1.9开发博客(7)- 实现功能
到目前为止我们已经完成了一个django应用的所有基础部分. 包括url配置.视图.模型和模板.接下来开始继续完善我们的博客系统了. 首先我们需要一个显示每篇文章的详细页面,对不? 文章详情 对于首页 ...
- 导出Excel 有身份证时注意
if (this.GridView1.Rows.Count != 0) { HttpContext.Current.Response.Clear() ...
- JS的学习体会与分享
最近在学习js这门计算机网络的新知识.相比与之前所学习的html和css这两门编程语言,js 还是有很多的不同之处,它相比于前两门知识还是有一定的难度和逻辑性的.今天跟大家分享一篇文章,希望能从中获得 ...
- MySQL 主从热备份(读写分离)
MySQL的主从备份,听个名词很高大上,其实都是MySQL原本就实现的了,你只需要简单配置一下就可以实现. 第一步:保持主从两个数据库是同步的,最好事先手动同步一下: 第二步:停止两个数据库,分别更改 ...
- [Jquery]判断数据类型
typeof [1, 2, 4] === 'object';typeof new Date() === 'object'; typeof null === 'object'; 由于typeof数组. ...
- Java正则匹配数字
包括5种形式,如测试结果 import java.util.Scanner; import java.util.regex.*; public class Com { public static vo ...