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倍图


目录
相关文章
|
3月前
|
IDE 网络安全 开发工具
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
|
3月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
|
14天前
|
机器人 Shell Linux
【Azure Bot Service】部署Python ChatBot代码到App Service中
本文介绍了使用Python编写的ChatBot在部署到Azure App Service时遇到的问题及解决方案。主要问题是应用启动失败,错误信息为“Failed to find attribute 'app' in 'app'”。解决步骤包括:1) 修改`app.py`文件,添加`init_func`函数;2) 配置`config.py`,添加与Azure Bot Service认证相关的配置项;3) 设置App Service的启动命令为`python3 -m aiohttp.web -H 0.0.0.0 -P 8000 app:init_func`。
|
27天前
|
前端开发 UED 开发者
uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)
本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。
|
3月前
|
应用服务中间件 Linux 网络安全
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
|
3月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
3月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
3月前
|
缓存
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
|
3月前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
3月前
|
存储 Linux 网络安全
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Linux/Linux Container)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Linux/Linux Container)