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


目录
相关文章
|
7月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1283 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
539 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
7月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
346 0
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
992 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
529 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
11月前
《仿盒马》app开发技术分享-- 个人中心页面(19)
上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口
164 4
|
12月前
|
人工智能 前端开发 JavaScript
打造了一个未来感十足的图书管理 App 个人页面
打造了一个未来感十足的图书管理 App 个人页面
343 25
|
11月前
|
消息中间件 缓存 小程序
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
767 8
|
10月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
563 0
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
522 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章