Autolayout -- 视图等宽 && 间距等宽

原创 2016年06月01日 09:38:49

      在storyboard/xib中添加约束实现如下效果:



    绿色视图为间距等宽,橙色为视图等宽。

    1.视图等宽


    添加左边距与右边距为30,视图之间宽度20,视图高度固定为75,垂直中心位于0.6倍屏幕高度处。最后将三个视图等宽设置即可。


    2.间距等宽

    需要添加4个辅助间距视图,在实际项目中可将其hidden设置为Yes

    将视图与辅助间距视图的垂直中心位于0.35倍屏幕高度处,将四个辅助视图高度固定(此图为50),将视图的宽高固定(此图为75),将相邻视图的间距均设为0。最后将四个辅助视图等宽设置即可。

版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS AutoLayout自动布局开发教程(3)-等宽等高等中心

iOS 开发 autolayout 如何让任意的 视图控件 等宽,等高,等中心呢?待我给你细细道来!...
  • yangbingbinga
  • yangbingbinga
  • 2015年01月23日 23:36
  • 4265

iOS AutoLayout 百分比布局

本文记录如何在 UIStoryboard 或者 xib 中进行百分比布局,包括 * View.Width 占其 Superview.Width 的百分比 * View.Leading 与 Super...
  • CaryaLiu
  • CaryaLiu
  • 2015年10月20日 21:51
  • 13400

AutoLayout适配教程(一)控件的等比例伸缩

AutoLayout适配教程(一)控件的等比例伸缩在Storyboard开发(Xib)中,控件的等比例伸缩适配是iPhone不同机型屏幕适配的一个难点也是重要。这边以一个首界面的4个button等比例...
  • IDOshi201109
  • IDOshi201109
  • 2016年06月04日 14:52
  • 3256

AutoLayout 布局技巧-等宽子视图

所谓等宽子视图,也就是对一个有 n 个子视图的父视图来说,无论父视图的宽度怎么变化,所有子视图的宽度是相等的。这里给出一种等宽子视图布局的情况(n = 4),如下图(效果图): 分 析一...
  • nuaner627
  • nuaner627
  • 2016年05月19日 10:45
  • 112

如何用自动布局实现等宽等高等间距

1. 基础篇 -目的:用自动布局(StoryBoard中)实现几个View等分屏幕 -效果图: Snip20151130_3.png -实现方法: a.设置第一个view的约...
  • yishengzhiai005
  • yishengzhiai005
  • 2016年06月29日 18:55
  • 652

CSS实现三列图片等宽等间距布局

每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% 三列图片等宽布局 * {     ...
  • qianqianstd
  • qianqianstd
  • 2016年08月20日 11:26
  • 2138

Autolayout和代码设置等间距

首先,来看一下做成后的效果: 实现步骤如下: 1、在storyboard中放置四个按钮,并同时选中它们。 2、设置好宽、高、supview下边界的距离等约束 3、设置完成 ...
  • u012655309
  • u012655309
  • 2015年01月20日 16:52
  • 1359

iOS AutoLayout自动布局中级开发教程(3)-等宽等高等中心

前面讲到了一些关于边界约束的知识,但那些基础知识来解决一些实际问题还是会有点力不从心的;所以我们需要更高级的设置约束的办法,设置等高等宽等中心: 见下图: 图中有3...
  • u013705509
  • u013705509
  • 2015年09月30日 14:34
  • 301

iOS AutoLayout自动布局中级开发教程(3)-等宽等高等中心

前面讲到了一些关于边界约束的知识,但那些基础知识来解决一些实际问题还是会有点力不从心的;所以我们需要更高级的设置约束的办法,设置等高等宽等中心: 见下图: 图中有3...
  • u013705509
  • u013705509
  • 2015年09月30日 14:24
  • 315

iOS Autolayout -- 模块化、等宽高

模块化: 相关的控件放一个view里面,方便管理和显示层次。 布局和添加约束如下示例: 下面的密码和输入框同理。等宽高:...
  • u014116643
  • u014116643
  • 2015年12月31日 11:54
  • 217
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Autolayout -- 视图等宽 && 间距等宽
举报原因:
原因补充:

(最多只允许输入30个字)