资讯专栏INFORMATION COLUMN

Swift24/90Days - 屏幕适配的那些坑

hikui / 909人阅读

摘要:屏幕适配的那些坑背景最近在做和及的适配工作。这就给适配带来了莫大的困难。屏幕适配的分享下面和大家聊一聊屏幕适配中需要注意的内容。之所以称之为设计,是因为同样的设计稿可能有很多种实现方式。各有优劣,自行判断。

Swift90Days - 屏幕适配的那些坑 背景

最近在做 iPhone4 和 iPhone6 及 iPhone6 plus 的适配工作。由于历史原因没有用 AutoLayout ,也由于历史原因老代码的布局全是用数字一个一个写死的。这就给适配带来了莫大的困难。比如下面这段代码:

UILabel *infoLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 241, 320, 28)];

0这种数字还好说,241就完全让人摸不着头脑,至于320这个改成屏幕宽度倒也就还好,但是28这种神奇数字又是什么呢。这种代码虽然写起来容易,但是维护困难,可读性极差,尤其是有多个控件布局的时候,依赖关系不明显,如果调整布局需要挨个重新计算并设置值,极难维护。

集大成者莫过于此:

CGRect rect = CGRectMake(12.2+(page-1)*320+42.5*(i%7),((totalRows-1)%3)*55+2,42.5,42.5);

今天早上看到这代码差点就抱着键盘哭了出来。

屏幕适配的分享

下面和大家聊一聊屏幕适配中需要注意的内容。

大前提是:纯粹通过代码设置坐标和大小的布局方案(我觉得还是 xib + autolayout 的组合适配起来更轻松一点)。

合理设计

布局虽说是个体力活,但同时也是个艺术活。之所以称之为设计,是因为同样的设计稿可能有很多种实现方式。UIKit 提供了很多现成可用的控件,如何充分利用这些控件实现自己的布局结果就是一个需要思考的过程了。

举个简单的例子,一个滑动挂断电话的按钮,你可以通过 UIImageView 实现,添加按下的监听然后跟随手指移动,松手之后再动画回到原地即可。你也可以用 UIScrollView 实现,设置 ContentSize 宽于屏幕,从而控制滑块范围。当然你也可以用 UISlider 实现,只需要设置滑块的图像即可。各有优劣,自行判断。

数据语意

如果我想让宽度为100的按钮位于屏幕三分之一处,我可以设置它的 x 值为 57 轻松完成任务。这样虽然简单,但是过段时间再回来维护代码的时候会对这样的神奇数字不知所措,如果要调整布局更是举步维艰。我觉得比较好的方法是把数据由来列出来,像这样:

float x = kScreenWidth / 3 - btnWidth / 2;

这样看起来就轻松多了:屏幕的三分之一处再往左半个宽度,也就是 x 的值。

相对布局

我们常常遇到很多控件同时出现的情况,比如三个从上往下依次间隔10像素的按钮,可以这样实现:

CGRect rect1 = CGRectMake(0,0,100,44);
CGRect rect2 = CGRectMake(0,54,100,44);
CGRect rect3 = CGRectMake(0,108,100,44);

但是如果我们想把这三个按钮同时下移,那我们就需要挨个设置一遍。比较好的方案是通过相对布局来实现。

CGRect rect1 = CGRectMake(0,0,100,44);
CGRect rect2 = CGRectMake(0,rect1.origin.y+rect1.size.height,100,44);
CGRect rect3 = CGRectMake(0,rect2.origin.y+rect2.size.height,100,44);

当然什么场景使用相对布局,针对哪些控件使用相对布局,这些就是我们需要设计的问题了。

层次关系

一般情况下,一个页面内会出现很多控件,如果都通过 addSubview 添加到视图中很容易混乱。可以通过一些 UIView 作为容器辅助布局。个人觉得可以给控件们安排好深度,同个深度的控件再进行分组,有助于管理。

灵活精准

布局代码的灵活性十分重要。比如两个和屏幕等宽的按钮,如果通过160设置宽度,现在iPhone6一出之后就纷纷中枪了。再比如那种 CollectionView 的单元格宽度高度写死了44.5的,最好是通过计算动态获取。虽然有一定的计算量,但是在后期如果遇到设计变更什么的,只需要改个宏定义的 CELLS_PER_ROW 这样的值就可以实现新需求,十分方便。更重要的是,这样的代码往往是有意义的,所有的值和布局结果都是可以语义化表达的,这样会让整个代码鲜活起来,充满生命力。

其他

先睡觉再说。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/15556.html

相关文章

  • 如何通过热修复,搞定开发中那些 Bug?

    摘要:作为程序员,修复终究是绕不开的话题,本期移动开发精英俱乐部讨论的主题便是修复中的,即热修复。王威威对已发布进行修复。王伟我们会在本地测试好,通过验证后才正式发送修复脚本。海不是简单的性能问题,如果要同时修复两个线程的方法就悲剧了。 作为程序员,Bug 修复终究是绕不开的话题,本期移动开发精英俱乐部讨论的主题便是 Bug 修复中的 Hotfix,即热修复。接下来让我们跟随大牛的脚步来了解...

    lcodecorex 评论0 收藏0
  • iOS开发系列--iPhone X和IOS11适配那些

    摘要:类似这样状态栏高度的变化可能导致自定义状态栏背景图片未完全铺满。注意看底部的跳动。那是因为的定位权限中新增了一个字段,需要在中添加相应的代码。定位权限描述,自己可以根据需求修改相应的弹窗也发生了变化暂时想到的只有这些了,后续想到再补充吧 首先贡献几个宏定义,下文也有用到! //动态获取设备宽度 #define IPHONE_WIDTH [UIScreen mainScreen].bou...

    PiscesYE 评论0 收藏0
  • 一起学SpriteKit游戏开发[ 1 ]创建一个SpriteKit项目

    摘要:介绍是苹果平台上独有的游戏框架,可以在上方便的开发游戏应用,其上手简单对语言支持良好。输入我们的游戏名,编程语言选择,游戏技术选择,设备选择。 介绍 SpriteKit是苹果平台上独有的游戏框架,可以在Mac OS X、iOS、tvOS上方便的开发2D游戏应用,其上手简单、对Swift语言支持良好。尽管在跨平台方面不如人气颇高的Cocos2D、Unity等跨平台游戏框架,但是如果只是在...

    cod7ce 评论0 收藏0
  • fir.im Weekly - 如何写出零 bug 代码

    摘要:神兽护体,代码无。那么,如何能写出零的代码呢,来看看码农翻身的这篇手册零的代码是怎么炼成的。写零一定少不了代码审查,推荐下的随笔思考程序员的寄望与哀伤,是否也说出了你的心声。除此之外,叶孤城和其他几个伙伴做了的高效专业代码审核服务。 神兽护体,代码无bug。经常看到代码注释的各种形状,这是一种程序员情怀。那么,如何能写出零 Bug 的代码呢,来看看@码农翻身 的这篇手册——零Bug的代...

    lanffy 评论0 收藏0
  • fir.im Weekly - 如何写出零 bug 代码

    摘要:神兽护体,代码无。那么,如何能写出零的代码呢,来看看码农翻身的这篇手册零的代码是怎么炼成的。写零一定少不了代码审查,推荐下的随笔思考程序员的寄望与哀伤,是否也说出了你的心声。除此之外,叶孤城和其他几个伙伴做了的高效专业代码审核服务。 神兽护体,代码无bug。经常看到代码注释的各种形状,这是一种程序员情怀。那么,如何能写出零 Bug 的代码呢,来看看@码农翻身 的这篇手册——零Bug的代...

    incredible 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<