目录

容器布局（BOX）

容器布局支持三种方式VBOX、HBOX、RELATIVE，通过设置不同布局及相关的样式来达到任意风格手机界面的展示效果，使用BOX布局架构可以更容易更方便的适配不同分辨率不同屏幕尺寸的手机。

VBOX布局即纵向布局

其特点是竖直方向自顶向下依次排列
顾名思义box布局就是一个个的box组成的，结合对齐方式
VBOX根据其水平方向和垂直方向属性决定控件的位置:
依次效果如下：


HBOX布局即横向布局

其特点是水平方向自左向右依次排列
顾名思义box布局就是一个个的box组成的，结合对齐方式
HBOX根据其水平方向和垂直方向属性决定控件的位置:
依次效果如下：

RELATIVE布局即自由布局

支持控件拖拽到任意位置，RELATIVE的位置由坐标X和坐标Y来决定。坐标X为自页面左边距 到控件左边距的距离，坐标Y为自页面上边距到控件上边距的距离

案例

经典九宫格效果

首先拖三个布局容器在页面上，为了示意区别给具体控件设置了颜色：

为适配不同的手机屏幕大小充满手机屏幕，把比重设置成1：1：1
对每一个容器控件设置如下属性：

在每个容器控件中拖入三个自由布局容器控件,设置每个布局容器控件高度为100，每个div控件中拖入一个Button，如下图所示

Button属性设置如下
设置文本属性

设置宽和高属性为92，边框宽度和颜色设置如下

不同的Button文本属性设置成1-9如下图

如需把正方形变成圆形
设置边框半径属性

设计器效果如下

代码

  1. <div id="viewPage0" onload="this.viewPage0_onload()">
  2.     <div id="panel0">
  3.         <div id="panel3">
  4.             <input id="button2" value="3" type="button"/>
  5.         </div>
  6.         <div id="panel4">
  7.             <input id="button1" value="2" type="button"/>
  8.         </div>
  9.         <div id="panel5">
  10.             <input id="button0" value="1" type="button"/>
  11.         </div>
  12.     </div>
  13.     <div id="panel1">
  14.         <div id="panel8">
  15.             <input id="button3" value="4" type="button"/>
  16.         </div>
  17.         <div id="panel7">
  18.             <input id="button4" value="5" type="button"/>
  19.         </div>
  20.         <div id="panel6">
  21.             <input id="button5" value="6" type="button"/>
  22.         </div>
  23.     </div>
  24.     <div id="panel2">
  25.         <div id="panel9">
  26.             <input id="button8" value="9" onclick="this.button8_onclick()" type="button"/>
  27.         </div>
  28.         <div id="panel10">
  29.             <input id="button7" value="8" type="button"/>
  30.         </div>
  31.         <div id="panel11">
  32.             <input id="button6" value="7" type="button"/>
  33.         </div>
  34.     </div>
  35. </div>
  1.  #New_window5 {
  2.  halign:center;
  3.  height:fill;
  4.  layout:vbox;
  5.  width:fill;
  6.  valign:TOP;
  7.  }
  8.   #viewPage0 {
  9.  halign:left;
  10.  height:0;
  11.  weight:1;
  12.  background:#F5F5F5;
  13.  layout:vbox;
  14.  width:fill;
  15.  valign:TOP;
  16.  }
  17.   #panel0 {
  18.  halign:CENTER;
  19.  height:0;
  20.  weight:1;
  21.  layout:hbox;
  22.  background:#c0c0c0;
  23.  width:fill;
  24.  valign:center;
  25.  }
  26.   #panel3 {
  27.  halign:CENTER;
  28.  height:100;
  29.  weight:1;
  30.  layout:hbox;
  31.  width:0;
  32.  valign:center;
  33.  }
  34.   #button2 {
  35.  border-bottom-width:2;
  36.  border-radius:46;
  37.  width:92;
  38.  border-bottom-color:#000000;
  39.  border-top-width:2;
  40.  border-left-color:#000000;
  41.  border-top-color:#000000;
  42.  height:92;
  43.  color:#0080ff;
  44.  border-right-color:#000000;
  45.  font-size:22;
  46.  border-right-width:2;
  47.  border-left-width:2;
  48.  }
  49.   #panel4 {
  50.  halign:CENTER;
  51.  height:100;
  52.  weight:1;
  53.  layout:hbox;
  54.  width:0;
  55.  valign:center;
  56.  }
  57.   #button1 {
  58.  border-bottom-width:2;
  59.  border-radius:46;
  60.  width:92;
  61.  border-bottom-color:#000000;
  62.  border-top-width:2;
  63.  border-left-color:#000000;
  64.  border-top-color:#000000;
  65.  height:92;
  66.  color:#0080ff;
  67.  border-right-color:#000000;
  68.  font-size:22;
  69.  border-right-width:2;
  70.  border-left-width:2;
  71.  }
  72.   #panel5 {
  73.  halign:CENTER;
  74.  height:100;
  75.  weight:1;
  76.  layout:hbox;
  77.  width:0;
  78.  valign:center;
  79.  }
  80.   #button0 {
  81.  border-bottom-width:2;
  82.  border-radius:46;
  83.  width:92;
  84.  border-bottom-color:#000000;
  85.  border-top-width:2;
  86.  border-left-color:#000000;
  87.  border-top-color:#000000;
  88.  height:92;
  89.  color:#0080ff;
  90.  border-right-color:#000000;
  91.  font-size:22;
  92.  border-right-width:2;
  93.  border-left-width:2;
  94.  }
  95.   #panel1 {
  96.  halign:CENTER;
  97.  height:0;
  98.  weight:1;
  99.  layout:hbox;
  100.  background:#ffffff;
  101.  width:fill;
  102.  valign:center;
  103.  }
  104.   #panel8 {
  105.  halign:CENTER;
  106.  height:100;
  107.  weight:1;
  108.  layout:hbox;
  109.  width:0;
  110.  valign:center;
  111.  }
  112.   #button3 {
  113.  border-bottom-width:2;
  114.  border-radius:46;
  115.  width:92;
  116.  border-bottom-color:#000000;
  117.  border-top-width:2;
  118.  border-left-color:#000000;
  119.  border-top-color:#000000;
  120.  height:92;
  121.  color:#0080ff;
  122.  border-right-color:#000000;
  123.  font-size:22;
  124.  border-right-width:2;
  125.  border-left-width:2;
  126.  }
  127.   #panel7 {
  128.  halign:CENTER;
  129.  height:100;
  130.  weight:1;
  131.  layout:hbox;
  132.  width:0;
  133.  valign:center;
  134.  }
  135.   #button4 {
  136.  border-bottom-width:2;
  137.  border-radius:46;
  138.  width:92;
  139.  border-bottom-color:#000000;
  140.  border-top-width:2;
  141.  border-left-color:#000000;
  142.  border-top-color:#000000;
  143.  height:92;
  144.  color:#0080ff;
  145.  border-right-color:#000000;
  146.  font-size:22;
  147.  border-right-width:2;
  148.  border-left-width:2;
  149.  }
  150.   #panel6 {
  151.  halign:CENTER;
  152.  height:100;
  153.  weight:1;
  154.  layout:hbox;
  155.  width:0;
  156.  valign:center;
  157.  }
  158.   #button5 {
  159.  border-bottom-width:2;
  160.  border-radius:46;
  161.  width:92;
  162.  border-bottom-color:#000000;
  163.  border-top-width:2;
  164.  border-left-color:#000000;
  165.  border-top-color:#000000;
  166.  height:92;
  167.  color:#0080ff;
  168.  border-right-color:#000000;
  169.  font-size:22;
  170.  border-right-width:2;
  171.  border-left-width:2;
  172.  }
  173.   #panel2 {
  174.  halign:CENTER;
  175.  height:0;
  176.  weight:1;
  177.  layout:hbox;
  178.  background:#c0c0c0;
  179.  width:fill;
  180.  valign:center;
  181.  }
  182.   #panel9 {
  183.  halign:CENTER;
  184.  height:100;
  185.  weight:1;
  186.  layout:hbox;
  187.  width:0;
  188.  valign:center;
  189.  }
  190.   #button8 {
  191.  border-bottom-width:2;
  192.  border-radius:46;
  193.  width:92;
  194.  border-top-width:2;
  195.  height:92;
  196.  color:#0080ff;
  197.  font-size:22;
  198.  border-right-width:2;
  199.  border-left-width:2;
  200.  }
  201.   #panel10 {
  202.  border-bottom-width:2;
  203.  halign:CENTER;
  204.  height:100;
  205.  weight:1;
  206.  layout:hbox;
  207.  width:0;
  208.  border-right-width:2;
  209.  valign:center;
  210.  border-left-width:2;
  211.  border-top-width:2;
  212.  }
  213.   #button7 {
  214.  border-bottom-width:2;
  215.  border-radius:46;
  216.  width:92;
  217.  border-top-width:2;
  218.  height:92;
  219.  color:#0080ff;
  220.  font-size:22;
  221.  border-right-width:2;
  222.  border-left-width:2;
  223.  }
  224.   #panel11 {
  225.  halign:CENTER;
  226.  height:100;
  227.  weight:1;
  228.  layout:hbox;
  229.  width:0;
  230.  valign:center;
  231.  }
  232.   #button6 {
  233.  border-bottom-width:2;
  234.  border-radius:46;
  235.  width:92;
  236.  border-top-width:2;
  237.  height:92;
  238.  color:#0080ff;
  239.  font-size:22;
  240.  border-right-width:2;
  241.  border-left-width:2;
  242.  }
文档更新时间: 2018-01-15 14:25