热门标签 | 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的步骤就可以完成了。效果图如下

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



推荐阅读
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • 本文详细探讨了Android Activity中View的绘制流程和动画机制,包括Activity的生命周期、View的测量、布局和绘制过程以及动画对View的影响。通过实验验证,澄清了一些常见的误解,并提供了代码示例和执行结果。 ... [详细]
  • 在 Android 开发中,通过 Intent 启动 Activity 或 Service 时,可以使用 putExtra 方法传递数据。接收方可以通过 getIntent().getExtras() 获取这些数据。本文将介绍如何使用 RoboGuice 框架简化这一过程,特别是 @InjectExtra 注解的使用。 ... [详细]
  • 本文详细介绍了如何在 Android 中使用值动画(ValueAnimator)来动态调整 ImageView 的高度,并探讨了相关的关键属性和方法,包括图片填充后的高度、原始图片高度、动画变化因子以及布局重置等。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • Logback使用小结
    1一定要使用slf4j的jar包,不要使用apachecommons的jar。否则滚动生成文件不生效,不滚动的时候却生效~~importorg.slf ... [详细]
  • 探讨如何在 iOS 开发中通过添加 NSLayoutConstraint 来使 UICollectionView 自适应其内容的高度,特别是在复杂布局如模拟微信朋友圈发布界面时遇到的问题。 ... [详细]
  • 深入解析Android中的SQLite数据库使用
    本文详细介绍了如何在Android应用中使用SQLite数据库进行数据存储。通过自定义类继承SQLiteOpenHelper,实现数据库的创建与版本管理,并提供了具体的学生信息管理示例代码。 ... [详细]
  • 本文介绍如何在Windows Forms应用程序中使用C#实现DataGridView的多列排序功能,包括升序和降序排序。 ... [详细]
  • 本文详细介绍了如何在Android应用中使用GridView组件以网格形式展示数据(如文本和图像)。通过行列布局,实现类似矩阵的数据展示效果。 ... [详细]
  • 本文介绍了如何通过Unity的UGUI系统创建一个可滚动的页面,包括创建Scroll面板、添加ScrollView面板并配置ScrollRect组件等步骤。 ... [详细]
  • 本文介绍了在Android项目中实现时间轴效果的方法,通过自定义ListView的Item布局和适配器逻辑,实现了动态显示和隐藏时间标签的功能。文中详细描述了布局文件、适配器代码以及时间格式化工具类的具体实现。 ... [详细]
  • Android中实现复合旋转动画效果
    本文将探讨如何在Android应用中实现动态且吸引人的旋转动画。通过结合多种动画类型,如透明度变化、旋转、缩放和位移,可以创造出更为复杂的视觉效果。我们将从XML布局和Java代码两个方面进行详细介绍。 ... [详细]
  • Android商城应用开发指南(第二部分):创建启动欢迎页
    大多数商城应用程序在启动时会显示一个欢迎页面,以提升用户体验。本文将指导您如何实现一个基本的欢迎页,该页面会在用户打开应用后短暂展示,随后自动跳转至主界面。 ... [详细]
  • MainActivityimportandroid.app.Activity;importandroid.os.Bundle;importandroid.os.Handler;im ... [详细]
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社区 版权所有