国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > php开源 > 综合技术 > 屏幕适配的那些坑

屏幕适配的那些坑

来源:程序员人生   发布时间:2015-04-15 08:57:34 阅读次数:2614次

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

1
2
3
UILabel *infoLabel [[UILabel alloc] initWithFrame:CGRectMake(0, 241, 320, 28)];
 
...

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

集大成者莫过于此:

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

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

屏幕适配的分享

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

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

公道设计

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

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

数据语义

如果我想让宽度为100的按钮位于屏幕3分之1处,我可以设置它的 x 值为 57 轻松完成任务。这样虽然简单,但是过段时间再回来保护代码的时候会对这样的奇异数字手足无措,如果要调剂布局更是寸步难行。我觉得比较好的方法是把数据由来列出来,像这样:

1
float kScreenWidth btnWidth 2;

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

相对布局

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

1
2
3
CGRect rect1 CGRectMake(0,0,100,44);
CGRect rect2 CGRectMake(0,54,100,44);
CGRect rect3 CGRectMake(0,108,100,44);

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

1
2
3
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);

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

层次关系

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

灵活精准

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

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生