iOSStoryBord百分比布局

    xiaoxiao2021-12-14  18

    iOS AutoLayout 百分比布局

    标签: iosautolayout 4327人阅读 评论(1) 收藏 举报 本文章已收录于: 分类: iOS(14) 作者同类文章 X

    目录(?)[+]

    ViewWidth 占其 SuperviewWidth 的百分比ViewLeading 与 SuperviewLeading 间距占 SuperviewWidth 的百分比ViewTrailing 与 SuperviewTrailing 间距占 SuperviewWidth 的百分比ViewLeading 与 SuperviewCenterX 间距占父视图 SuperviewWidth 的百分比限定View的宽高比以 SuperviewWidth 宽度的某一百分比为 View 之间的间隔

    欢迎到个人博客: liumh.com查看本文。

    本文为原创,未经允许勿转载


    本文记录如何在 UIStoryboard 或者 xib 中进行百分比布局,包括

    View.Width 占其 Superview.Width 的百分比View.Leading 与 Superview.Leading 间距占 Superview.Width 的百分比View.Trailing 与 Superview.Trailing 间距占 Superview.Width 的百分比View.Leading 与 Superview.CenterX 间距占父视图 Superview.Width 的百分比限定View的宽高比以 Superview.Width 宽度的某一百分比为 View 之间的间隔

    在 iOS NSLayoutConstraint priority 一文中提到过 multiplier, 上述提到的百分比布局都是基于 multiplier 实现的,下面来一一查看其实现。

    View.Width 占其 Superview.Width 的百分比

    该功能实现很简单,以一个居中的按钮 Button 为例,首先将按钮相对于父容器添加 Equal Width 的 constraint,然后将它的 multiplier 设成 0.2,这样就可实现 Button1 的宽度为父容器宽度的 0.2 倍。操作步骤如下:

    View.Leading 与 Superview.Leading 间距占 Superview.Width 的百分比

    该功能实现其实是使 View.Leading 相对于 Superview.Trailing 布局,然后再调整 multiplier 参数实现,如下操作步骤实现了将 Button 的左边距离父视图左边界的距离站父视图宽度的0.2倍,如下:

    View.Trailing 与 Superview.Trailing 间距占 Superview.Width 的百分比

    该需求实现是使 View.Trailing 相对于 Superview.Trailing 布局,然后再调整 multiplier 参数,需要注意的是使用 Reverse First And Second Item 调整如下表达式中 item1 和 item2 在等式中两边的位置。

    item1.attribute1 = multiplier × item2.attribute2 + constant

    以下步骤实现 Button 的 Trailing 距离父视图右边距为父视图宽度的0.2倍,需要注意的是,此时的 multiplier 是 (1-0.2=0.8),在修改 Button 约束值时,可以从顶部导航中看到约束表达式的变化:

    View.Leading 与 Superview.CenterX 间距占父视图 Superview.Width 的百分比

    有时间需要将 UI 组件相对于父视图的中线进行布局,比如将 View.Leading 与父视图中线的距离设定为父视图宽度20%, 即相对于父视图 CenterX 的 multiplier 值为 1.4

    限定View的宽高比

    有时候我们需要保持视图的宽高比不变进行缩放,此时可以设定其 Aspect Ratio 保持其在进行缩放时宽高比固定。

    以 Superview.Width 宽度的某一百分比为 View 之间的间隔

    要实现这个需求就没有之前那么简单了,这需要添加一个间距视图,设置每个视图与相邻间距视图的边缘间距约束,然后给所有的间距视图添加相对于其父视图的等宽约束,设置合适的比例即可。这里借用 为iPhone 6设计自适应布局 文中一图:

    关于文中所涉及到的方法,可在 AutoLayoutMultiplier 工程中查看。

    参考:

    为iPhone 6设计自适应布局Autolayout 中的百分比宽度

    如果觉得本文对你有帮助,就请用微信打赏我吧^_^


    如果觉得本文对你有帮助,就请用微信打赏我吧^_^

    顶 2 踩 0     下一篇线性链表的基本算法

    我的同类文章

    iOS(14) http://blog.csdn.net •Xcode使用xcconfig文件配置环境2016-05-29阅读3503 •iOS如何为NSMutableArray添加KVO2016-11-26阅读2778 •iOS限制UITextField的输入字符数2015-10-20阅读497 •iOS绘制渐变背景滑动条2015-10-20阅读863 •iOS为UIView添加虚线边框2015-10-20阅读6269 •iOS自动打包并发布脚本2015-12-08阅读860 •iOS初探+load和+initialize2015-10-20阅读1451 •iOS KVC 集合操作2015-10-20阅读456 •iOS获取UIView上某点的颜色值2015-10-20阅读2939 •iOS NSLayoutConstraint priority2015-10-20阅读1184 更多文章
    转载请注明原文地址: https://ju.6miu.com/read-969738.html

    最新回复(0)