• home > OS > Android > Develop >

    Android XML/iOS-StoryBoard/HTML5 排布布局分析与对比—style的异同

    Author:zhoulujun Date:

    H5 Android iOS开发主要工作还是App GUI开发,以此来说属于大前端,对XML样式布局。虽然 xcode storyboard 可以可视化布局,但是根本都是XML的子集。本篇主要以web开发css样式布局对比Android开发xml 布局。

    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样式对比表格

    cssandroid
    colortextColor
    font-weighttextstyle="bold" 不能直接设置多粗
    font-sizetextSize
    text-align:centergravity="center_horizontal" center是水平垂直都居中
    margin:0 autolayout_gravity="center_horizontal"(FrameLayout和LinearLayout中);layout_centerHorizontal="true" (RelativeLayout中)
    transitionanimateLayoutChanges="true" 部分有效果
    position:absolute;
    left: 5px;
    <b>FrameLayout和LinearLayout中:</b>
    layout_gravity="left";
    margin_left="5px";
    <b>RelativeLayout中:</b>
    align_parentLeft="true";
    margin_left="5px";
    background-imagebackground="@drawable/xxx"
    text-overflow:ellipsisandroid:maxEms="12";
    android:singleLine="true";
    android:ellipsize="end";
    vertical-align: middlegravity="center_vertical"


    h5标签与Android控件对比

    htmlandroid
    h1~h6,pTextView
    a,button,input[type=button]Button
    imgImageView
    videoVideView(基本上很少用,采用第三方控件)
    div,header,section…LinearLayout,FrameLayout,RelativeLayout中的一个
    ulRecyclerView,ListView
    input[type=checkbox]CheckBox,Switch
    input[type=radio]RadioButton
    input[type=range]SeekBar
    input[type=select]Spinner(基本上用第三方)
    input  autocomplete="on"AutoCompleteTextView
    textareaEditText
    iframeWebView

    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标准的一个子集。算法逻辑如下图所示:

    3146026-207fffe178325068.png



    参考文章:

    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 排布布局分析与对比—style的异同》,
    请注明出处:https://www.zhoulujun.cn/html/OS/Android/AndroidDevelop/2020_0626_8480.html