美文网首页自动布局
自动布局第一篇

自动布局第一篇

作者: 人魔七七 | 来源:发表于2017-11-29 16:01 被阅读112次

最近看到一篇博客介绍自动布局,顺便用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

相关文章

  • Auto Layout的使用

    这是关于自动布局的第一篇文章。>> Stack View的使用 自动布局(Auto Layout)能够根据对视图的...

  • iOS开发之 自动布局

    iOS开发之自动布局AutoLayout 目录: 1 iOS自动布局简介2 iOS自动布局AutoLayout(代...

  • 【OC梳理】自动布局

    自动布局基础篇 关于自动布局的基本使用,参考网上的文章即可,如:iOS开发-自动布局篇:史上最牛的自动布局教学! ...

  • iOS 布局方案

    布局方案 绝对布局 自动布局

  • 自动布局第一篇

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

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • 通过storyboard来自动布局ScrollView(不依靠代

    在做自动布局之前首先大家都知道一个自动布局,自动布局在我理解就是为了适配任何的屏幕。每一个控件的自动布局都是为了确...

  • iOS原生布局简介

    自动布局核心公式 自动布局构造函数 自动布局类函数 VFL可视化格式语言 H 水平方向 V 垂直方向 | 边界 [...

  • Flex——告别CSS布局

    Flex 布局可以实现空间自动分配、自动对齐Flex 适用于简单的线性布局,复杂布局使用 Grid 布局注意:设为...

  • 最轻巧的自动布局--ZXPAutoLayout框架

    最轻巧的自动布局--ZXPAutoLayout框架 最轻巧的自动布局--ZXPAutoLayout框架

网友评论

    本文标题:自动布局第一篇

    本文链接:https://www.haomeiwen.com/subject/inzubxtx.html