iOS 自动布局实现四等分且宽高比例是1:1

今天朋友发消息过来让我帮写个demo,效果图如下:

这其实就是一个典型的四等分布局,同时为了保证圆圈图片的不变形且离上下左右的距离都为10,为了达到这种效果,我的解决思路如下:

@:要保证图片的不变形,只需要保证加完约束后,其宽度和高度的比例关系是1:1即可。

要实现图片的不变形,保证图片的比例关系不变是一种方式,而另外一种方式也是我们经常用到的设置图片的contentModel属性为Aspect Fit。而如果设置其属性为Aspect Fit的话,想要满足离上下左右的距离都为10就无法满足了。所以为了实现这种效果,我先用四个view来实现四等分,并且保证view的比例关系是1:1。这样再向每个view里面添加UIImageView,给其加上上下左右的约束,值为10。通过这样一种方式就实现了上面的效果。

我们先创建一个view,view距离底部、左边、右边的距离都是0,高度为120。

然后我们添加四个view到view里面,并设置四个view等高等宽,如图:

这一步完成后,我们给view1添加上、下、左的约束,值都为0。给view2、view3添加上、下约束,值都为0。给view4添加上、下、右的约束,值都为0,如图:

view2、view3、view4也是同样的道理,这里就不在重复了。

在Xcode7上,发现了一个新的现象,当选中view1与view2,在选择Editor,会发现没有pin这个选项了,也就找不到经常会使用到的horizontally space这个约束条件了。其实,苹果并没有把这个属性给去掉了,它被隐藏在这里:我们先选中view2,然后按住control键,使其指向view1就会看到该属性了。如图:

并修改horizontal spacing的值,使其为0(也就是修改Leading Space to:)。view1与view2之间的间距就设置为0了。如图:

用同样的方法来进行设置,使view2与view3、view3与view4之间的间距为0。到这一步位置,我们已经实现了四等分的布局,此时也没有红色的错误提示了。为了使其看起来更加容易区别,我们给四个view设置不同的背景色,最后的效果如下图:

前面我们已经实现了四等分的布局,接下来就是实现四个view的比例关系是1:1。这个也很好实现的,选中view1,设置其aspect ration的值为1:1,因为前面添加的约束四个view是等高等宽的,所以剩下的三个view的比例关系也随之变成1:1。如下图:

这个时候如果我们看其比例关系并不是1:1,让其改为1:1即可。如下图:

当我们完成了这一步后,会发现布局发生错误了,错误如下:

为什么会出现这样的错误呢?其实是布局发生了冲突,因为给view1、view2、view3、view4添加的约束,其高度是和它们的父视图的高度相等(父视图view)。对于父视图view,我们添加约束的时候固定其高度为120。这个时候,我们给view1添加比例关系是1:1,其高度是要随宽度的变化而发生变化。在3.5屏幕、4.0屏幕其宽度和高度是80,在4.7屏幕宽度和高度是94,在5.5屏幕宽高是103。由于存在两个约束条件都对其高度做了限制,而两个的优先级又是相同的,系统不知道选择哪个来进行布局计算,所以就发生了约束冲突。解决这个布局冲突,只需要降低其中一个的优先级即可。很显然,我们要改变父视图view高度的优先级,将其高度调整为>=50。这样就不会发生约束冲突了,因为比例关系的优先级高于>=的优先级。另外,为什么将其改为>=50,而不是>=120呢?这是因为如果设置为>=120。在手机屏幕上最大的高度是103,比120还小,这样就会造成view1的高度还是120,而不是我们想要的103。为了保证其比例关系是1:1,我们取的数值要比80小。这一步完成后的效果图如下:

通过上图,我们可以看到已经没有错误信息了。接下来就是添加UIImageView到四个view中了。并给UIImageView添加上、下、左、右的约束,其值都为10,如下图:

至此,我们已经实现了四等分布局且比例关系是1:1,最后的效果图如下:

3.5屏幕的效果图:

4.0屏幕的效果图:

4.7屏幕上的效果图:

5.5屏幕上的效果图:

Demo链接地址:https://github.com/guoshimeihua/QuarteringDemo.git

时间: 2024-08-28 22:02:37

iOS 自动布局实现四等分且宽高比例是1:1的相关文章

iOS 自动布局详细介绍

1. 自动布局的理解 iOS自动布局很有用,可以在不同size的屏幕上运行,原先看的头痛,还是习惯用最蠢的[UIScreen mainScreen].bounds.size.width等来布局,后来实在不行了,开始好好地看自动布局,发现理解后真的很好用,现在就来分享分享我的心得吧. 首先要明白一个控件在屏幕上的位置怎么样才能真正地确定.最简单的情况是: 1. 例如一个矩形,只要知道它左上角点的坐标,宽,高,那么位置就固定了. 2. 例如一个圆,只要知道它的圆心坐标,半径,那么位置就固定了. 自动

iOS 自动布局

自动布局框架 Masonry PureLayout FLKAutoLayout KeepLayout UIView+Autolayout 相关教程: iOS 开发实践之 Auto Layout Masonry介绍与使用实践(快速上手Autolayout) IOS自动布局之Autoresizing iOS中的相对布局:AutoLayout

iOS自动布局——Masonry详解

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环.代码的布局是设计语言与用户视觉感受沟通的桥梁,不论它看起来多么简单或是琐碎,但不得不承认,绝大部分软件开发的问题,都是界面问题.那么,如何高效的完成UI开发,也是软件行业一直在克服的问题. 所以,软件界面开发的核心点即是:如何减少UI设计稿的建模难度和减少建模转化到代码的实现难度 最初iOS提供了

掌握iOS自动布局

1,自动布局是一种基于约束的布局(constraint-based layout)引擎,它可以根据开发者在对象上的约束自动调整大小与位置. 2.在iOS 6之前使用的布局模型是“spring&struts”模型.虽然大部分情况下运行很有效率,但旋转时仍然需要写代码为子视图自定义布局. 3.布局代码在layouSubviews方法中编写. 4.在Xcode 5中使用自动布局时第一个引人注目的变化是Xcode 5不会自动添加约束,除非你明确的要求Xcode添加. Xcode 5让开发者控制布局,不会

iOS自动布局(autolayout)下图片编辑器的实现

在大部分APP(尤其是社交类的,如qq)经常会有更换头像的场景:点击用户加载头像,加载出系统图片,用户点击选中某张图片之后,可以对图片进行放缩和拖动,已更改圆形裁剪框圈定的图片部分.如下图即为qq的头像选取编辑界面: 图1.qq照片编辑界面 界面中可以对图片进行放大.缩小,拖动,白色圆环区域表示点击确定时将要裁剪的范围.留意上图的动画,qq总是能够确保圆环完全被图片所覆盖,如果拖动或者放缩使得图片以外的黑色区域进入了圆环,图片会自动弹回刚好能够完全覆盖的状态,鉴于CSDN上传图片2M的限制,上面

iOS 自动布局教程

springs和struts的问题 你肯定很熟悉autosizing masks-也被认为是springs&struts模式.autosizing mask决定了当一个视图的父视图大小改变时,其自身需要做出什么改变.它有一个灵活的或固定不变的margins(struts)吗?它的宽和高要做出什么改变(springs)? 举个例子,一个宽度灵活的视图,如果其父视图边框,那么它也会相应的变宽.一个视图右边拥有固定的margin,那么它的右边缘将会一直粘住其父视图的右边缘. autosizing系统在

IOS 自动布局-UIStackPanel和UIGridPanel(四)

为什么说scrollview的自动化布局是难点? 对scrollview做自动化布局,无非就是想对scrollview里面的subviews来做自动化布局.但是scrollview里面的subviews的自动化布局不是由scrollview的高宽来决定的,而是由scrollview的contentSize共同决定的,这样就出现一个问题了,就算scrollview的高宽是改变了,但是只要contentSize不变,那么对于scrollview里面的subviews的高宽其实是没有影响的.而实现自动

IOS 自动布局-UIStackPanel和UIGridPanel(三)

在这一篇了我将继续讲解UIGridPanel. 在iphone的app里面可以经常看到一些九宫格布局的应用,做过html开发的对这类布局应该是很熟悉的.在IOS中要实现这样的布局方法还是蛮多的,但是我这次主要是讲解直接通过控件来实现,我直接指定某个subview处于gridpanel的某行某列.甚至我要求该subview跨多行多列来显示. 要实现以上的需求,那么首先就得要求该panel具有行和列的属性,也就是该panel可以被拆分成多少行多少列.用代码表示如下: @interface UIGri

iOS 自动布局扩展应用:代码中动态调整布局常量

一.设计需求 iOS Storyboard 自动布局技术,是iOS 6才出来的新技术,相当于多屏幕分辩率下自适应的技术. 但是一些复杂情况还是难处理. 比如有一个界面需求,进度条上显示标签,这个需求不难,难的是显要在显示表格框内,在各种机型显示正常. 最初设定是垂直居中向上偏15个像素 这是iPhone 4S 显示效果,下面与滑块还有错位 但是在iPhone 6下显示,下面有错位,但是上面留空太多 但如果把偏移量设为21.则出现另一种情况. 大屏幕的手机显示完美. 但是iPhone 4S下就错位