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


目录
相关文章
|
9天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
137 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
23 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
22天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
73 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
27天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
75 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
6月前
|
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代码的问题
|
24天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
25 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
6月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
|
3月前
|
缓存 数据处理 UED
App加载页面的等待体验设计技巧
App加载页作为整个用户体验的一部分,直接影响用户对于产品服务的忠诚度和满意度。
73 13

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    微信小程序 app.json 配置文件解析与应用
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作