写在前面
越来越觉得知识点是这样的 ，知道了是一回事，总结起来，又是另外一回事。有时候，明明知道了，感觉已经掌握了这个知识点，但是总结起来却很难，甚至都不知道从何下手，也许还是知识点没掌握牢固的缘故。（以下都是小虾小结，大咖请绕行哦😀）
正题
整个项目主要功能基本完成，测试也接近尾声，UI还在不断的细调中。关于UI发现的几个问题，特此记录下来。
- 操作类button宽度以及默认和点击状态
- 小图标失真
- 背景大图片尺寸
以上问题，下面会依次给以详述，首先简单介绍下什么是2倍图，3倍图（也就是常见的@2x和@3x）？
iOS开发中，因为有普通屏和高清屏的原因，所以需要在应用中放置三套图，一套是for普通屏的，另外两套是for高清屏的（高清屏里又有分辨率不同的区别）。for高清屏的命名方式:@2x.png，@3x.png。使用的时候只要使用for普通屏的图片，系统在高清屏时会自动调用for高清屏的图片
4以前例如iPone4，iPhone3，iPhone等都是普通屏，4s，5/5s/5c,6/6s,7都是2倍，6p/6sp/7p是3倍（通过这个api就能知道你当前设备是几倍的[UIScreen mainScreen].scale）2倍图3倍图参考链接
UI设计：
给你们的UI，我们这边做的是2倍图，5s适配的
开发这边可以理解成下面几点：
- 边距，间隔或者是图片大小尺寸，用的时候统一除以2（3倍图的话除以3）
- 5s适配，说明UI设计的时候都是以5s为参照标准
问题1：操作类button宽度适配
针对button默认和点击状态，分别切了3套图。2倍图宽度规定是576（/2.0之后也就是288个像素），3倍图规定是864（/3.0 之后也是288个像素）。这样会发现以5s适配，也就是2倍图并且5s宽度为320 ，button这个宽度，看上去还行，但是6p 宽度414，显然感觉宽度不够。因为UI设计的时候是按照5s来适配的，按照设计来的话5s当然是效果最好的。问题来了，像这种宽度固定是不行的，假如想统一设备效果的话，最好用masonry布局（当然也可以用其它的布局方式），两边间距保持一样就好了。
注意点：button设置normal和selected两种状态图片，不起作用问题。（原因是button初始化的时候要设置成custom而不是系统的）
问题2：小图标失真
多个cell直接cell.imageView设置图片，cell.titleLable.text设置title，会发现，文字不会对齐，因为切的小图标的大小不一致，自己手动改变大小的话，之后会发现失真。解决方法是：自定义imageview和label，之后添加到cell的contentview上，以及设置图片内容模式（icon.contentMode = UIViewContentModeScaleAspectFit），其实也可以叫设计那边切套大小相同的小图标，应该也是可以解决的。
问题3：背景大图片尺寸
加载一张背景图片，类似问题1，UI那边切的三套图，其实宽度都是一样的，在大屏设备上（除了5s，UI是以5s来设计的），例如6，6p上原图显示的话，宽度都是不够的，当然这个时候等比例拉伸的话，是可以解决的（我们就是这样解决的iv.contentMode = UIViewContentModeScaleToFill），但是假如是人物或者图片要求比较高的，很显然就会发生失真的问题，这个时候也许就需要设计一套针对不同设备的2倍3倍图了。
end
其实，本来想说的很简单，不知道咋的就啰嗦了这么多，恩，以后还是要多想，多总结~😝
网友评论