Android XML/iOS-StoryBoard/HTML5-CSS页面布局对比分析—style的异同

html5 Android IOS(xib实际是个xml文件，xib = XML nib，xib编译之后就得到nib文件，nib= NeXT Interface Builder，storyboard可以视作其升级版) 都是XML的子集。

不过IOS方面，storyboard真香（与纯代码UI相比可以节省很多调试的时间，所见即所得是高效的重要方式）。基本不用考虑啥布局问题。Android 与Html5 布局，这里做写对比

Web开发CSS 页面布局

css的元素位置主要有这5个属性决定

1. CSS 框模型 (Box Model) 规定了元素框处理元素内容(Content)、内边距(Padding)、边框(Border) 和 外边距(Margin) 的方式。

2. 框的类型，display: table table-cell block inline-block inline flex
   

3. CSS 定位有 由 position ：static relative absolute fixed sticky

4. float：left right none

5. transform：scale translate skew 
   

iOS开发页面布局

在storyboard/xib文件中实现自动布局，没有过多地去深入学习，反正普通的UI都可以拖曳出来，比当年的dreawave好用

storyboard和xib在界面和操作上大体相同，这里聊下它们之间的差别（欢迎进行补充）

• storyboard更注重于多个场景（页面）的层级关系及跳转，而xib更注重于单个页面的布局和复用性，这可以作为选择使用storyboard还是xib的参考。

• storyboard上只能使用VC，不能单独使用UIview，UIView只能基于VC上进行使用，而xib同时支持两者。这一点也印证了上面提到的两者的不同倾向。

• storyboard上没有file’s Owner的概念，默认通过VC的class的指定其拥有者。

• storyboard上可以通过segue实现无需代码的界面跳转，而xib由于管理的是单个界面，因此只能通过代码来实现界面的切换。

觉得这些没有啥好说的，不如看 官方文档：https://help.apple.com/xcode/mac/8.0/#/dev1a26b4fb4

Android开发页面布局

4种基本布局

LinearLayout

android:orientation 指定线性布局的排列方式，horizontal 和 vertical ；android:layout_gravity指定布局中的对齐方式。

android:layout_weight 指定控件的分布比例

Android Xml 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout "
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical ">
    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />
</LinearLayout>

css 布局代码

<div id="LinearLayout"><input id="input_message"></div>
<style type="text/css">
#LinearLayout {
    display: flex;
    flex-direction: column;/*row*/
    width: 100%;
    height: 100%;
}

#input_message {
    flex: 1;
    width: 100%;
}
</style>

这些对比很容易

RelativeLayout

通过属性去控制组件的相对位置

android:layout_alignParentLeft、android:layout_alignParentTop、android:layout_alignParentRight、android:layout_centerInParent、android:layout_alignParentBottom

android:layout_above  android:layout_below android:layout_toLeftOf android:layout_toRightOf 

这些只有通过组合css实现

FrameLayout

这个可以理解为iframe，一般用的比较少。做局部刷新界面

PercentFrameLayout 和 PercentRelativeLayou

百分比布局可以直接指定控件在布局所占的百分比。由于LinearLayout本身已经支持按比例指定控件的大小了，因此百分比布局只对FrameLayout和RelativeLayout这两个布局进行了功能扩展

因为百分比布局属于新增布局，所以我们需要在项目的build.gradle中添加百分比布局库的依赖。

h5与Android样式对比表格

h5标签与Android控件对比

h5与Android对比总结

• h5的dom树类似android的xml，用来布局界面，h5的样式基本都在css里面，android的一般都写在layout.xml里面，复用的写在style.xml里面；

• js通过选择器或者id获取到元素后来操作dom，android在java类里面通过xml中的id找到控件来赋值，js也会直接通过代码输出标签，android也会在一些情况下使用代码编写布局并添加到界面上；

• jquery和css的选择器用来选择dom元素，可以是单个或者数组，android中不存在选择器，每个元素都是通过id来引用，没有id的控件代码中基本不会用到；

• js可以给dom元素添加多个事件，android多个会覆盖，最后一个有效，他们一般都会把事件写到代码里面而不是dom里，这样易于修改，js的事件冒泡类似于android的事件分发，子元素优先获取事件，自己消费完之后如果拦截则停止，屏蔽掉父元素的点击事件，不拦截则向上传递给父元素，return true相当于e.stopPropagation（）；

• h5的列表一般是通过代码输出，有多少个输出多少个，所以删除修改编辑等方式操作的都是那个对象，android是使用adapter给列表赋值，经过优化重用了布局，会导致错位，数组越界等问题，需要配合实体类和标志来解决；

• h5的一个router 模板文件类似于android的一个activity，通过路由跳转，android通过intent可以传递基本数据类型和序列化的对象；

• h5的标签类似android的控件，如img标签对应ImageView，h1~h6和p对应TextView，a和button对应Button等，许多h5的控件android需要第三方库来支持，android的ImageView不能加载网络图片，但是有个缩放属性scaleType，可以设置很多个值，居中裁剪，拉伸，居中适应等，这个属性h5中没有；

• h5内容溢出有个overflow属性，android默认是根据高度截断的，如果想滚动，需要嵌套一个ScrollView，并且他只能有一个子View，和列表嵌套的时候还会出问题；

• h5的宽高可以根据百分来写，android需要一个百分比库来支持；

• h5的localStorage类似android的sharepreference，sessionStorage有点像静态变量，webworker类似android的handler；

• css3的动画类似android的属性动画，而非补间动画；

• css3的transition自动添加动画这一属性android可以部分实现，在容器中添加animateLayoutChanges="true"；

• css的padding默认是会增加元素的宽高，android的padding如果宽高是具体的数字，那么将不会增加元素宽高，而会向内挤压元素，可能导致遮挡部分内容，应该像是css3中设置了box-sizing:border-box，如果宽或高是wrap_content那么就会增加宽或高；

• css的margin和android类似，但是android的margin合并是叠加的，css是上下取最大，都可以用负间距；

• css的absolute定位类似于android的FrameLayout帧布局，就像是ps的图层叠加，css中可以通过z-index来控制摆放顺序，android则通过书写顺序从下往上，css的top|left|bottom|right="5px"相当于在FrameLayout中子元素设置layout_gravity="top|left|bottom|right"，并加上
  layout_margin(top|left|bottom|right)="5px"；

• css设置字体可以通过font-family直接引用浏览器中的字体，服务器的字体可以通过@font-face来引用，android定义字体可以使用TextView的setTypeface，并把字体拷贝到assert目录下，一般都是设置非系统的字体，所以都用代码设置；

• css设置全局字体可以通过继承，android设置全局字体（仅系统自带的）可以通过设置theme，其他字体需要自定义控件或者使用库；

• css中设置宽度并添加margin:0 auto可以把自己水平居中显示，这里我理解的是块级元素可以这么做，且主要用于容器，而子元素要水平居中需要添加text-align:center，android让自己水平居中不需要设置宽度具体数值，显示取决于父容器是什么，如果是RelativeLayout要指定layout_centerHorizontal="true"，如果是LinearLayout和FrameLayout要指定layout_gravity="center"；

• css的文字居中可以设置text-align:center,android的文字居中可以设置gravity="center_horizontal"；

• css的text-align:center是容器给元素设置的，相当于android的LinearLayout，FrameLayout和RelativeLayout设置gravity="center"，android的layout_gravity是设置子元素在父元素中的定位（RelativeLayout中无效），gravity是设置子元素的定位；

• css的文字垂直居中需要设置行高line-height，然后就自动垂直居中了，android的文字垂直居中需要设置gravity="center_vertical"，android文字水平垂直居中只需设置gravity="center"；

• css的border和background可以巧妙的结合做出各种各样的形状和效果，android通过书写drawable.xml来编写shape，比较繁琐，比如圆角，边框，图层叠加等等；

• css按钮按下的状态通过伪类选择器来编写，android的view状态通过selector来编写，每个item指定一种状态或者多种状态的结合，顺序还有要求；

• h5引用的控件框架一般是通过添加class来实现，如bootstrap，android引用第三方控件库一般是通过使用自定义的View，在xml中放置，在代码里面使用api；

Yoga

Yoga 是由C实现的Flexbox布局引擎，目前已经被用于在React Native 和 Weex 等开源项目中，性能和稳定性得到了很好的验证。但不足的是Yoga只实现了W3C标准的一个子集。算法逻辑如下图所示：

参考文章：

iOS Flexbox 布局优化  https://www.jianshu.com/p/1a1f41098c7f

iOS-StoryBoard 布局对比 CSS 的 Box Model 布局 https://blog.csdn.net/Mazy_ma/article/details/73469521

HTML和Android简单对比 https://www.jianshu.com/p/36e9185d38eb

Android详解4种基本布局 https://www.jianshu.com/p/65731b9ab50c

转载本站文章《Android XML/iOS-StoryBoard/HTML5-CSS页面布局对比分析—style的异同》,
请注明出处：https://www.zhoulujun.cn/html/OS/Android/AndroidDevelop/2020_0626_8480.html