热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

[autoLayout]自动布局下的纯storyboard添加约束--四个imageView平分一个屏幕的宽度

刚开始进入iOS开发领域,所以很多东西都是一直在学习,找资料,找Demo。然后自己总结了一下做一下笔记。在自己做项目的时候,遇到过很多次一个屏幕的宽度会并排好几个控件平分整个屏幕的宽度。一

刚开始进入iOS开发领域,所以很多东西都是一直在学习,找资料,找Demo。然后自己总结了一下做一下笔记。

在自己做项目的时候,遇到过很多次一个屏幕的宽度会并排好几个控件平分整个屏幕的宽度。一开始之间我是不知道怎么去实现的,问了一些前辈,然后他们就给我推荐了一个前辈写的封装好了的方法:使用masonary, 参考: http://www.cocoachina.com/ios/20141219/10702.html在这里我也贴上或许以后有用,或者有像我一样的刚进入iOS开发领域的人找的时候能一同作为参考。

我现在是要记录的是自己在这方面思考过后成功实现的方法,不知道会不会跟别人的一样。我是想要在storyboard上直接添加约束进行布局的。所以并没有代码封装。

主要思路:四个控件平分整个屏幕的宽是吧,那么就可以想做是两个两个控件分别平分半个屏幕。所以我门现在就是要划分两个半个屏幕,这就可以使用两个View进行划分了。得到了两个大小一样的半个屏幕,这样接下来我们就可以在各自的半个屏幕里再进行平分了,然后再拉两个控件进入一个View中,划分的方式和我们划分屏幕的方式一样就好。下面进行详细步骤的说明:

step1:先拉进来两个View,大小调好并排放着先,这样能方便我们添加约束的时候找到相应的参考点

step2:然后全选中两个View,这时候就可以对他们进行其中的一个约束了,就是给他们添加等宽的约束Equal Widths

step3:对左边的View做的约束就是固定到顶端的距离&固定到左边的距离&固定到右边View的距离为0&设定View的高度,如果是做一个tableView的Cell的话,那么可以不设定View的高度,应该是根据Cell的高度来改变我们的高度,这样的话就可以是固定到底部的距离。

step4:对右边的View做的约束跟左边的有一点不同而已,就是这时候View固定到左边View的距离为0,其他的固定到顶部,固定到右边,固定到View的高度也是参考step3步骤

step5:当完成了前面的所有步骤之后就可以进行约束的更新了。发现得到下面这样的样子了

做好了上面这个之后,我们就可以做四个控件并排着的了

step1:现在左边的View中放置两个imageView,为什么呢?因为布局是相对于一个父视图做的,所以我们不能一下子在两个VIew中分别放入四个imageView进行一起布局,所以只能两个两个的来。在左边的View中,先选中两个iamgeView,然后对他们添加约束:1⃣️对两个imageView同时添加的约束是等宽等高,然后比例设置为1:1 再把它们同时固定在竖直方向上的中间(Vertical Center in Container);2⃣️这时候就可以分别对每个imageView进行添加约束了,左边的imageView约束为:固定到左边父视图左边距的距离为多少,固定到右边imageView的距离为多少。右边的imageView约束为:固定到左边父视图右边距的距离为多少,固定到右边imageView的距离为多少(这个固定的距离一定要跟上面imageView固定的距离一样,不然会出错)

step2:右边VIew中的两个imageView的布局就和上面step1一样了,只要重复step1的步骤就可以完成了。效果图如下

这样就可以做出一个由多空间等宽等高平分屏幕的界面了。



推荐阅读
  • 使用nodejs爬取b站番剧数据,计算最佳追番推荐
    本文介绍了如何使用nodejs爬取b站番剧数据,并通过计算得出最佳追番推荐。通过调用相关接口获取番剧数据和评分数据,以及使用相应的算法进行计算。该方法可以帮助用户找到适合自己的番剧进行观看。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • IhaveconfiguredanactionforaremotenotificationwhenitarrivestomyiOsapp.Iwanttwodiff ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar)
    转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一,为我们带来了全新的界面风格和设计语言。看起来很受欢迎࿰ ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • Go GUIlxn/walk 学习3.菜单栏和工具栏的具体实现
    本文介绍了使用Go语言的GUI库lxn/walk实现菜单栏和工具栏的具体方法,包括消息窗口的产生、文件放置动作响应和提示框的应用。部分代码来自上一篇博客和lxn/walk官方示例。文章提供了学习GUI开发的实际案例和代码示例。 ... [详细]
  • 在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤,包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读,读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
  • 本文介绍了一款名为TimeSelector的Android日期时间选择器,采用了Material Design风格,可以在Android Studio中通过gradle添加依赖来使用,也可以在Eclipse中下载源码使用。文章详细介绍了TimeSelector的构造方法和参数说明,以及如何使用回调函数来处理选取时间后的操作。同时还提供了示例代码和可选的起始时间和结束时间设置。 ... [详细]
  • 本文详细介绍了Android中的坐标系以及与View相关的方法。首先介绍了Android坐标系和视图坐标系的概念,并通过图示进行了解释。接着提到了View的大小可以超过手机屏幕,并且只有在手机屏幕内才能看到。最后,作者表示将在后续文章中继续探讨与View相关的内容。 ... [详细]
  • 带添加按钮的GridView,item的删除事件
    先上图片效果;gridView无数据时显示添加按钮,有数据时,第一格显示添加按钮,后面显示数据:布局文件:addr_manage.xml<?xmlve ... [详细]
author-avatar
郑青青11_875
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有