自动布局第一篇

最近看到一篇博客介绍自动布局,顺便用SB 简单快速实现。下面是博客链接http://tutuge.me/2015/05/23/autolayout-example-with-masonry/


例子一:并排两个label,宽度由内容决定。父级View宽度不够时,优先显示左边label的内容.

思路可以看博客里面的思路,主要是Autolayout中的两个重要的属性“Content Compression Resistance”和“Content Hugging”。


效果图


左边的Label,注意红色箭头
右边的Label,注意比左边优先级低


例子二:四个ImageView整体居中,可以任意显示、隐藏。上面博客是自己实现的容器View,其实我们可以更简单快速UIStackView来实现。


效果图

思路是四个ImageView设置约束宽高。放进UIStackView,然后隐藏或者改变宽度约束为零。设置容器UIStackView 的约束即可。


每个Image约束


外层UIStackView的约束

有个技巧在View动画块里设置会有自然的过渡。


关键代码

例子三:子View的宽度始终是父级View或者本身的一半(或者任意百分比)。


效果图


思路是第一确定一个View 的宽度,然后View 和 父View 设置等宽度,然后设置约束的比例即可。

如果是同一个View则,确定高或者宽,然后设置Aspect Ratio。


看红色箭头


看红色箭头

代码地址:https://github.com/renmoqiqi/AutolayoutDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容