1. LinearLayout
LinearLayout是线性布局控件,它包含的子控件将以横向或纵向排列。
注:布局之间可以嵌套使用。即布局内既可包含控件,又可包含布局。
两个全局属性:
<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.</span> android:orientation <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--决定其子类控件排布方式</span>
android:orientation=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"horizontal"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--水平排布</span>
android:orientation=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vertical"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--垂直排布</span>
<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.</span> android:gravity <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--决定子类控件位置</span>
android:gravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--底部</span>
android:gravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom|center_horizontal"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--标签可连用(注:竖线左右不能加空格,需要注意逻辑)</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--gravity几个属性值:</span>
center_horizontal <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--水平居中</span>
center_vertical <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--垂直居中</span>
center <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--水平垂直都居中</span>
<span class="hljs-constant" style="box-sizing: border-box;">right</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--子类控件位于当前布局的右边</span>
left <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--子类控件位于当前布局的左边</span>
bottom <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--底部</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul>
子控件常用属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.</span> android:layout_gravity= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--控件本身在当期父容器的位置</span>
<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.</span> android:layout_weight= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--指本身控件占当前父容器的一个比例(n为数字)</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
weight属性示例代码:
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><EditText
android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/text_1"</span>
android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dp"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--注意此处为0dp(勿忘单位)</span>
android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--weight</span>
android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> />
<Button
android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/button1"</span>
android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dp"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--注意此处为0dp(勿忘单位)</span>
android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--weight</span>
android:<span class="hljs-type" style="box-sizing: border-box;">text</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"send"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
注意:两个控件的layout_width属性均为”0dp”,也说明有layout_weight属性的时候,layout_width属性不起作用。而此处指定为0是一种比较规范的写法。
效果如图所示:
注:系统会先把 LinearLayout下所有控件指定的layout_weight 相加,得到一个总值,然后每个控件所占大小的比例就是用该控件的layout_weight 值除以刚才算出的总值。
若代码改为:
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><EditText
android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/text_1"</span>
android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span> />
<Button
android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/button1"</span>
android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
android:<span class="hljs-type" style="box-sizing: border-box;">text</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"send"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>
则效果如下图所示:
这样看起来更加舒服,而且在各种屏幕上的适配效果会更好。
注意:
1. gravity是用于指定文字在控件中的对齐方式;而layout_gravity是用于指定控件在布局中的对齐方式。
2. 当LinearLayout的排列方向是 horizontal时,只有垂直方向上的对齐方式才会生效。因为此时水平方向上的长度是不固定的,每添加一个控件,水平方向上的长度都会改变,因而无法指定该方向上的对齐方式。同理,当 LinearLayout 的排列方向是vertical时,只有水平方向上的对齐方式才会生效。
2. RelativeLayout
RelativeLayout是相对布局控件,它包含的子控件将以控件之间的相对位置或者子类控件相对父类容器的位置的方式排列。
子类控件相对父类容器:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_margin=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40dp"</span> --子控件距父容器的边距
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_marginLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"32dp"</span> --子控件距父容器的左边距
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_marginTop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40dp"</span> --子控件距父容器的顶边距
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> --子控件相对当前父容器靠左边
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentRight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentTop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentBottom=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_centerHorizontal=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> --子控件相对父容器水平居中
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_centerVertical=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_centerInParent=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> --水平、垂直都居中</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
子类控件相对子类控件:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_below=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --给定标签的底部
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_above=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --上面
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_toRightOf=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --右边
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignBaseline=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --该控件与给定控件内容在一条线上
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignTop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --该控件与给定控件顶部对齐
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignBottom=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span>
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --该控件与给定控件左边缘对齐
<span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignRight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
3. FrameLayout
FrameLayout是帧布局中,所有子元素都不能被放置指定位置,默认放在布局左上角。且后面的子元素直接覆盖在前面的子元素之上,可将前面的子元素部分或全部遮挡。
如图所示:
几个属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">android:foreground=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置前景图 ,在所有子视图的前面</span>
android:foregroundGravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置前景图位置</span>
android:layout_gravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置居中</span>
android:background= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#999999"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置背景</span>
android:keepScreenOn=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--保持屏幕唤醒</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
4. TableLayout
TableLayout表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。
如图所示:
TableLayout全局属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">android:collapseColumns=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--隐藏第 n 列</span>
android:stretchColumns= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"m, n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--拉伸第 m,n 列</span>
android:shrinkColumns= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--压缩第 n 列</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
注意:索引从0开始,多个之间用逗号分隔( * 号表示所有列)
TableLayout局部属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">android:layout_column= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--该控件占据第 n 列(注意:从第0列开始算起)</span>
android:layout_span= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--该控件占用 n 列</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
注:TableRow 中的控件不能指定宽度。
5. AbsoluteLayout
AbsoluteLayout是绝对布局,又可叫坐标布局,可直接指定子元素的绝对位置(xy坐标)。由于手机屏幕尺寸差别比较大,故绝对布局适应性差。因此该布局方式用的较少。了解即可。
注:部分图片来自慕课网视频截图。
发现写出一篇高质量的博文很不容易,审视自己写的,总感觉太水,或者说不算,只能算是笔记。何时才能做到写出优质博文?
1. LinearLayout
LinearLayout是线性布局控件,它包含的子控件将以横向或纵向排列。
注:布局之间可以嵌套使用。即布局内既可包含控件,又可包含布局。
两个全局属性:
<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.</span> android:orientation <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--决定其子类控件排布方式</span> android:orientation=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"horizontal"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--水平排布</span> android:orientation=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vertical"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--垂直排布</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.</span> android:gravity <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--决定子类控件位置</span> android:gravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--底部</span> android:gravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom|center_horizontal"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--标签可连用(注:竖线左右不能加空格,需要注意逻辑)</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--gravity几个属性值:</span> center_horizontal <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--水平居中</span> center_vertical <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--垂直居中</span> center <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--水平垂直都居中</span> <span class="hljs-constant" style="box-sizing: border-box;">right</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--子类控件位于当前布局的右边</span> left <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--子类控件位于当前布局的左边</span> bottom <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--底部</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul>
子控件常用属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.</span> android:layout_gravity= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--控件本身在当期父容器的位置</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.</span> android:layout_weight= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--指本身控件占当前父容器的一个比例(n为数字)</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
weight属性示例代码:
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><EditText android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/text_1"</span> android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dp"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--注意此处为0dp(勿忘单位)</span> android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--weight</span> android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> /> <Button android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/button1"</span> android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dp"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--注意此处为0dp(勿忘单位)</span> android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--weight</span> android:<span class="hljs-type" style="box-sizing: border-box;">text</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"send"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
注意:两个控件的layout_width属性均为”0dp”,也说明有layout_weight属性的时候,layout_width属性不起作用。而此处指定为0是一种比较规范的写法。
效果如图所示:
注:系统会先把 LinearLayout下所有控件指定的layout_weight 相加,得到一个总值,然后每个控件所占大小的比例就是用该控件的layout_weight 值除以刚才算出的总值。
若代码改为:
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><EditText android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/text_1"</span> android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span> /> <Button android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/button1"</span> android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> android:<span class="hljs-type" style="box-sizing: border-box;">text</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"send"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>
则效果如下图所示:
这样看起来更加舒服,而且在各种屏幕上的适配效果会更好。
注意:
1. gravity是用于指定文字在控件中的对齐方式;而layout_gravity是用于指定控件在布局中的对齐方式。
2. 当LinearLayout的排列方向是 horizontal时,只有垂直方向上的对齐方式才会生效。因为此时水平方向上的长度是不固定的,每添加一个控件,水平方向上的长度都会改变,因而无法指定该方向上的对齐方式。同理,当 LinearLayout 的排列方向是vertical时,只有水平方向上的对齐方式才会生效。
2. RelativeLayout
RelativeLayout是相对布局控件,它包含的子控件将以控件之间的相对位置或者子类控件相对父类容器的位置的方式排列。
子类控件相对父类容器:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_margin=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40dp"</span> --子控件距父容器的边距 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_marginLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"32dp"</span> --子控件距父容器的左边距 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_marginTop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40dp"</span> --子控件距父容器的顶边距 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> --子控件相对当前父容器靠左边 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentRight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentTop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignParentBottom=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_centerHorizontal=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> --子控件相对父容器水平居中 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_centerVertical=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_centerInParent=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> --水平、垂直都居中</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
子类控件相对子类控件:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_below=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --给定标签的底部 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_above=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --上面 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_toRightOf=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --右边 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignBaseline=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --该控件与给定控件内容在一条线上 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignTop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --该控件与给定控件顶部对齐 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignBottom=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span> --该控件与给定控件左边缘对齐 <span class="hljs-label" style="box-sizing: border-box;">android:</span>layout_alignRight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/bt1"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
3. FrameLayout
FrameLayout是帧布局中,所有子元素都不能被放置指定位置,默认放在布局左上角。且后面的子元素直接覆盖在前面的子元素之上,可将前面的子元素部分或全部遮挡。
如图所示:
几个属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">android:foreground=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置前景图 ,在所有子视图的前面</span> android:foregroundGravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置前景图位置</span> android:layout_gravity=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置居中</span> android:background= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#999999"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--设置背景</span> android:keepScreenOn=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--保持屏幕唤醒</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
4. TableLayout
TableLayout表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。
如图所示:
TableLayout全局属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">android:collapseColumns=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--隐藏第 n 列</span> android:stretchColumns= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"m, n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--拉伸第 m,n 列</span> android:shrinkColumns= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--压缩第 n 列</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
注意:索引从0开始,多个之间用逗号分隔( * 号表示所有列)
TableLayout局部属性:
<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">android:layout_column= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--该控件占据第 n 列(注意:从第0列开始算起)</span> android:layout_span= <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"n"</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--该控件占用 n 列</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
注:TableRow 中的控件不能指定宽度。
5. AbsoluteLayout
AbsoluteLayout是绝对布局,又可叫坐标布局,可直接指定子元素的绝对位置(xy坐标)。由于手机屏幕尺寸差别比较大,故绝对布局适应性差。因此该布局方式用的较少。了解即可。
注:部分图片来自慕课网视频截图。
发现写出一篇高质量的博文很不容易,审视自己写的,总感觉太水,或者说不算,只能算是笔记。何时才能做到写出优质博文?