APP页面的三种基本实现方式:storyboard,xib,代码实现 与自动布局

简介: APP页面的三种基本实现方式:storyboard,xib,代码实现 与自动布局

APP页面的三种基本实现方式:storyboard,xib,代码实现。

当然在不采用页面自动布局的情况下,代码实现可以和storyboard,xib混合使用,咱们只说只采用基本实现方式,不说混合实现页面,你们可以自己在心里混合下吧。

采用storyboard实现的APP页面安装包最大,你想采用他强大功能(页面组织逻辑,可见既可得等),那么你的APP包的大小只有忍痛长瘤子了,采用他你对安装包的大小别太奢望了。不过很多老码农写APP习惯,不喜欢这类现代化的工具,还在用代码实现页面,或用XIB实现页面,它的使用率确实不怎么高。

采用XIB实现的APP页面安装包比storyboard也小不到那里去。很多老码农还衷爱着它,毕竟它最早实现了可见既可得的页面布局。我以前遇到过通过willappear函数跳了几个页面结果从其它页面返回那个中间页面时,那个页面开始出现白屏,过了10多秒才出来的问题。后来我把哪个用XIB实现的页面换成用代码实现才解决这个问题。所以XIB现在使用的人确实很多,对包的大小也别太苛求了。

采用代码代码实现的APP页面安装包可以很小。实现页面十分灵活,不过你要一个机型一个机型的适配,你运行起来才看到效,需要写大量代码,大量适配,不 像storyboard,xib可见既可得。但是仍旧有很多老码在使用,毕竟完全代码实现可以多个人更改同一个文件,利于大团队开发。当多人同时开发一个storyboard或xib页面时,你很容易冲突,要解决冲突就要比较他们的那个不好看懂的类似脚本的文件了。并且打开storyboard,xib文件不写修改,上传配置库时都提示有冲突需要上传。所以代码实现还老而弥坚。

当iponet6和ipone6 plus没有出现时只需要适配两个手机屏幕,用代码适配并非很麻烦。

当iponet6和ipone6 plus出现时需要适配四个手机屏幕,用代码适配并非很麻烦,大量重复的劳动。

所以苹果提倡自动布局,storyboard,xib都支持自动布局,但是一旦采用了自动布局,就不能用代码实现控件了,不然编译器会报错。

自动布局能够实现可见既可得,不需要一个一个屏幕的去适配,缺点是要使用storyboard,xib,会造成安装包变大,没有代码实现那么灵活,多人修改一个文件很容易冲突,不利于大团队协作。现在流量越来越便宜,大部分人下载应用或更新应用是在WIFI环境下,APP更新频率不是很高。所以对APP安装包不是那么敏感,除非你的应用主要使用人群是父老乡亲(他们在外面打工,不那么容易用WIFI)。自动布局是APP开发的一个大趋势,利于快速开发APP,把你从重复的适配工作中解放出来。我们这个新项目采用自动布局,一个月就把APP做出来了,没有那么多繁琐的页面适配问题,我写业务逻辑还远没有写页面的同事写的快,真的感觉自动布局是个大杀器,能大大提高开发效率。看来他对得其浪费的那点包的大小。毕竟流量越来越便宜,IOS的程序猿的人力成本持续提高。

经过实践证明,一个项目用自动布局,一般一个月就能搞定页面问题,只需要进行三种类型的适配,三倍图(iphone 6 plus, iphone 6s plus)手机的一种,二倍图(iphone 6, iphone 5s, iphone 5c,iphone 5)手机中的一种,一倍图(iphone 4,iphone 4s)手机中的一种。不需要手写代码那样对所有手机都需要买过来适配,只需要三种典型手机适配就可以。模拟器可以替换部分手机的测试,不能代表真机的测试,有的模拟器测试正常,用真机测试问题很明显。可见自动布局又给你省了一笔钱。

要实现自动布局:

1.首先对storyboard,xib设置自动布局。

2.要对控件(如按钮)设置2到4个约束条件。

3.对约束中的尺寸大小要设置为大于等于你约束数值。

下面是开发中用到的iphone,ipod,ipad对应的实际像素点和图片倍率:

iphont4实际像素点:

3.5英寸屏(320*480)

iphont5实际像素点:

4英寸屏 (320*568)

iphont6实际像素点:

4.7英寸屏(375*667)

iphont6 plus实际像素点:

5.5英寸屏 (414*736)

ipod4实际像素点:

4英寸屏(320*568)

所有的Ipad的实际像素点都相同:

768*1024

矢量图的图片倍率

iphont4 1倍图

iphont4s 2倍图

iphont5 2倍图

iphont5s 2倍图

iphont6 2倍图

iphont6 plus 3倍图

ipod4 2倍图


目录
相关文章
|
1月前
|
存储 移动开发 JavaScript
uni-app页面数据传参方式
uni-app页面数据传参方式
150 4
|
1月前
|
移动开发 JavaScript 前端开发
如何识别app中的页面是否是js(h5)页面
如何识别app中的页面是否是js(h5)页面
34 2
|
1月前
|
移动开发 网络协议 安全
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
87 4
|
1月前
|
Java Unix Shell
苹果app代码行数统计
苹果app代码行数统计
18 1
|
1月前
|
JSON 数据格式
点击app系统消息打开app并进入指定页面
点击app系统消息打开app并进入指定页面
35 0
|
1月前
|
定位技术
如何让app多个页面只用一个地图实例
如何让app多个页面只用一个地图实例
14 0
|
1月前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
28 0
|
1月前
|
小程序
深入理解 uni-app 页面生命周期(四)onShareAppMessage
深入理解 uni-app 页面生命周期(四)onShareAppMessage
|
1月前
|
C++
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
|
1月前
|
JavaScript
深入理解 uni-app 页面生命周期(二):onReady()
深入理解 uni-app 页面生命周期(二):onReady()