博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AutoLayout——何为intrinsic content size
阅读量:7021 次
发布时间:2019-06-28

本文共 1735 字,大约阅读时间需要 5 分钟。

上一篇说到了约束就是等式和不等式。仅仅知道其原理还是没法拉出符合需求的线。所以这一篇主要看来什么是intrinsic content size,以及它有什么用。

在Xcode中,差点儿全部控件或视图,都有这个属性。在size inspector界面

Xcode中的intrinsic content size

开发中用到的一些控件或视图,本身就自带大小,比方UIButton控件,设置完title后就能知道这个UIButton是文字的大小再加上两个固定的button margin。

像这样的控件或视图本身就带有的高度、宽度。就叫做intrinsic content size(固定内容尺寸)。

一些经验分享?

普通情况下,我是通过四种操作来设置布局的。

- 右键拉线。
- Align面板做对齐操作(position)
- pin面板做边距或尺寸操作(size)
- Resolve面板用来更新约束或者更新边框
后三种就是xib或storyboard界面的右下角的三个小button
三个小button

自己拉约束的时候,总会碰到Xcode报红色或黄色的错(例如以下图),曾经怎么拉都没办法拉好约束。乃至于将全部该加的都加上了。但还是没能达到想要的效果。这让人非常恼怒。

只是当你懂了一点英语,知道报的错是什么意思,基本就都能够攻克了。

红色或黄色错误

像以下这样的,将鼠标放在Icon上(报错的地方),就会有提示,不得不说Xcode这个IDE已经相当好用了。除了偶尔崩溃受不了。

错误的提醒
提示已经说得非常明显了。AutoLayout须要Icon的Y轴位置或者高度才干完毕对其位置或尺寸的判断。所以咱们通过加Y轴的位置或者高度就能够了。当然详细要加Y轴位置还是高度得看你的需求。最好还是都试一试。非常easy就能懂的。

固定内容尺寸究竟什么用?

一个关于button的样例:

在下图中出现的黄色线,这是什么意思呢?刚開始我也看不明确,Xcode都报warning了。

依照提示去改动的话又达不到我想要的效果,由于黄色线是想要我把中间这个button的大小调整到黄色框的大小。这明显不符合我的须要。

好吧说说为什么会出现黄色虚线框,这就是固定内容尺寸的原因。我给中间这个MidButton设置的背景图的大小是75*75的。而如今MidButton被我缩小到35*35,这时候Xcode是依据图片的原大小来判断MidButton的固定内容尺寸的。

这时候就坑爹了。执行后的结果例如以下。

似乎唯一的方法仅仅能是调整图片的大小了。

黄色线

执行后的效果

妥协的解决的方法:设定MidButton的宽和高。

![Uploading Paste_Image_791544.png …]

加上宽度和高度的约束后,就能够临时攻克了。只是却没办法依据不同机型的宽度去适配。

所以。看到这里应该就明确固有内容尺寸是什么了。要用AutoLayout的话这个概念非常关键。之前跟着斯坦福视频的老头子做过一阵子的matchismo。一种相似卡牌的游戏。里面有16个button。当时用AutoLayout做真是太烦躁了,全然没法做适配,由于仅仅有一种素材,而AutoLayout去渲染后默认出现的是控件或图片的固有内容尺寸,所以当时仅仅能做一种机型的布局。去github逛了一圈也是有这个问题存在。所以用AutoLayout的话,button图片的大小非常重要,特别是要适配的时候。一定要配套每种机型的素材。

什么控件有固定内容尺寸?

它就用于辅助系统计算布局。以下看看有哪一些控件或视图是自带固定内容尺寸的。

控件或视图

  • UIView和NSView(OSX)没有固定内容尺寸
  • Sliders 在iOS中仅仅定义了宽度,而在OSX中则有可能是宽度、高度或两者
  • Labels ,buttons,switches。text fields,都有高度和宽度
  • Text views 和image views 固定内容宽度可变

总结

假设你有非常多有背景图片的button须要布局的话,autolayout慎用,不然当你调不出想要的效果又不知道原因在哪的时候回特别抓狂。总之你要随便调整控件或视图的内容,不依照固有内容尺寸的话。是不大可能的了。苹果这么去规定也是有其道理的。毕竟人家都给出了UI的设计规范了嘛。依照规范来,通过审核也easy。

转载地址:http://ulbxl.baihongyu.com/

你可能感兴趣的文章
关于GIT的使用心得
查看>>
拖拽文件夹上传 一(基于Vue的文件夹上传组件)
查看>>
git 解决文件上传超过100m不能上传的问题
查看>>
华尔街见闻基于istio的服务网格实践
查看>>
Swift Error 的介绍和使用
查看>>
TCP/IP和HTTP之间的联系
查看>>
spring框架快速入门笔记
查看>>
了解JavaScript原型链
查看>>
这里写一个金钱大小写转换的 js代码
查看>>
报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritte
查看>>
RabbitMQ使用教程(一)RabbitMQ环境安装配置及Hello World示例
查看>>
java二十三种设计模式(二)——行为型(十一分之六)
查看>>
npm 常用命令
查看>>
以Terminal历史记录来提高Linux操作效率
查看>>
设计模式——构造模式
查看>>
用 scrapy 爬微信公众号的内容
查看>>
2019年如何撸一个Cloud Studio插件?
查看>>
python3+requests+unittest接口自动化实例讲解
查看>>
feignclient设置头信息
查看>>
Activity管理类AppManager
查看>>