iOS DeveloperiOS开发首页投稿(暂停使用,暂停投稿)

iOS ,StoryBoard竖屏适配(二)UITablevie

2016-11-18  本文已影响251人  厘子先生

首先,我在这里展示一下这次要适配UITableview的原始模型

FC6F9ABF-17DA-4979-B2CD-9E2D33D4FCCB.png

此次适配的UItableview的复杂程度 ,也算是一般性复杂.
第一,我要说一下这次适配的基本想法
(1)我把本次要适配的cell分成两部分,第一部分是货款单号部分,第二部分是贷款人以及下边的地址电话部分,分别用了两个view来作为这连个部分的父视图(当然这个分部分是没有必要的,还会增加cell的负担,在这里之所以要这么做只是让读者更明显的看出约束之间的关系)
注意事项:cell是我们做项目中经常用的,Storyboard xib本身就是对控件的再编译,所以我们在用Storyboard构建项目时,把该做的UIKit控件优化尽量都给做了,也看了很多关于优化的文章,平时的几个简单操作就会让你的项目更流畅


95C45969-F097-4FB0-A51A-08FEE57A637E.png

如图我们在创建Label时把这几个选项勾选上,背景色设置成和父视图一样的颜色,在你对你的项目进行测试的时候(command + i -> Core Animation)你会发现你设置的过的控件都是绿颜色的.

第二,开始我们的适配,我们先对两个父视图的view,我这里简称view1和view2(如果不用这两个父视图我们可以直接依据contentview进行约束)这里要先把 UITableview的约束加好

A4F68BAD-5E05-4D28-B4F8-50FA4EDFB3F6.png

如上图我们给view1加了上,左,右和高度的适配,这里我们为什么不直接加上下左右的这样的约束呢,这样也可以确定view1的位置,不加下这个约束是因为下这个约束是依据view2的.view2的位置不确定编译器就不能确定view1的位置就会报错


258D2556-162E-4418-BF4F-537E8BB4F620.png

如图 我们给view1加了上下左右的适配,编译器却报了view2的适配错误,如果不注意的话,对于适配新手来说的话,一定会很苦恼这个报错
然后我们按正确的方法吧view1是配好,在对view1上的第一个Label进行适配,这里由于货款单号的长度不会超过屏幕的宽度,我们打算给他定宽,定高,X以及上下居中四个约束,来对他进行适配


![9F1D6F12-180F-4C09-8082-F80B32876C1D.png](https://img.haomeiwen.com/i2165173/40a5f8a55d431f29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
和这个居中加上之后,报错就消失了,第一个Label就适配好了,已完成我们做同样的约束给他 左边距X 定宽 定高 上下居中的适配
A67A6CFA-732A-44CA-88FD-AC52FCBEC859.png

这样view1的适配就做完了,适配做的不是很熟的小伙伴可以运行一下试试看看效果小编这里用的7的模板,在5s模拟器上运行一下,结果如下

98957365-DCA9-4275-9B0A-650103192CE8.png

如图view2已经是配好,view2还是没有做适配,出现超出屏幕外的部分

第三 我们来做view2的适配view2上的控件稍有特殊,view2上有一个地址Label他的长度是可能超过过屏幕本身的宽度的.我们先中规中矩的吧贷款人和联系电话等控件的约束给设置好.这次我们设置view2的约束就要稍微讲究一点,我们给view2设置上下左右四个约束


4B8F033C-B515-44E2-B0B3-E196E12FDCE1.png

如图view2距离上下左右的距离都是0,因为这里cell的高度可能会产生变化,因此要把view2随着cell的高度变化变化,不能像view1那样给他一个定高,下边我们先把不需要太注意的空间约束设置好,贷款人,个人贷款,联系电话我们一次给予 上 左 定宽 定高 四个约束

828DC52D-7627-4DD9-BB85-68DDF4250B2E.png

如图我们先给这个地址Label上左右定高四个约束然后在右边的约束详情中这样改动


67BAD2B5-7092-4AE0-B934-AC687597BFA4.png

把原先设置的定高改>=这个高度,然后我们再把其他的约束加好先,我们来运行一下 看看适配的结果


B939C540-F6C8-4BC4-BA4F-6FBAF629FD27.png
结果上来看适配结果还是很不错的,别忘了我们对地址的Label做了特殊的适配,那我们修改下地址文字的长度,看看会有什么变化
88E189DE-8A89-45DB-996E-67BFA716121D.png

如图所示地址的Label的高度随着文字的高而变高了,但是他下边的空间却只有贷款Label下移了,其他的都没有改变,这是因为只有这个Label的Y约束是依据地址Label来添加的,其他的并不是,这里呢我们可以把下边的那一部分作为一个整体来进行适配,这里小编就不在图文实例的,大家可以试一试,希望这次写的适配能对大家有所帮助.

上一篇下一篇

猜你喜欢

热点阅读