当前位置:   article > 正文

Android Studio开发学习(六)———TableLayout(表格布局)、FrameLayout(帧布局)_androidstudio tablayout

androidstudio tablayout

目录

前言

一、Tablelayout

(一)Tablelayout的相关简介

(二)TableLayout使用方法

1. 当TableLayout下面写控件、则控件占据一行的大小。(自适应一行,不留空白)

2.多个组件占据一行,则配合TableRow实现

(三)三个常用属性

 1.collapseColumns(隐藏列)

 2.stretchColumns(拉伸列)

 3.shrinkColumns(收缩列)

(四)总结

 二、FrameLayout(帧布局)

(一)FrameLayout的相关简介

(二)常用属性

(三)实例演示

1.最简单的例子

前言

前面已经学习了平时实际开发中用得较多的线性布局(LinearLayout)相对布局(RelativeLayout), 其实学完这两个基本就够用了,小编在实际开发中用得比较多的也是这两个,虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢! 你说是吧,学多点东西没什么的,又不吃亏!好了,就扯到这里,开始这一节的学习吧,这一节我们会学习 Android中的第三个局:TableLayout(表格布局)

一、Tablelayout(表格布局)

(一)Tablelayout的相关简介

学过HTML的朋友都知道,可以通过< table >< tr >< td >就可以生成一个HTML的表格, 而Android中也允许使用表格的方式来排列组件,就是行与列的方式,就说这节的TableLayout 。

(二)TableLayout使用方法

        1. 当TableLayout下面写控件、则控件占据一行的大小。(自适应一行,不留空白)

如下设置三个button,其宽度为match_parent、按道应该不占据一行,而却一个button占了一整行

  1. <TableLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent">
  4. <Button
  5. android:layout_width="match_parent"/>
  6. <Button
  7. android:layout_width="match_parent"/>
  8. <Button
  9. android:layout_width="match_parent"/>
  10. </TableLayout>

2.多个组件占据一行,则配合TableRow实现

添加TableRow,使其成表格状

一个TableRow代表一行

  1. <TableLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent">
  4. <TableRow>
  5. <TextView
  6. android:background="#E0E0E0"
  7. android:padding="8dp"
  8. android:text="Cell 1" />
  9. <TextView
  10. android:background="#E0E0E0"
  11. android:padding="8dp"
  12. android:text="Cell 2" />
  13. <TextView
  14. android:background="#E0E0E0"
  15. android:padding="8dp"
  16. android:text="Cell 3" />
  17. </TableRow>
  18. <TableRow>
  19. <Button
  20. android:layout_width="match_parent"
  21. android:text="第一列" />
  22. <Button
  23. android:layout_width="match_parent"
  24. android:text="第二列" />
  25. <Button
  26. android:layout_width="match_parent"
  27. android:text="第三列" />
  28. <TextView
  29. android:background="#E0E0E0"
  30. android:padding="8dp"
  31. android:text="第四列" /> <TextView
  32. android:background="#E0E0E0"
  33. android:padding="8dp"
  34. android:text="第五列" />
  35. </TableRow>
  36. <TableRow>
  37. <Button
  38. android:layout_width="match_parent"
  39. android:text="第一列"/>
  40. </TableRow>
  41. </TableLayout>

(三)三个常用属性

        1.collapseColumns(隐藏列)

        在TableRow中定义5个按钮后,接着在最外层的TableLayout中添加以下属性: android:collapseColumns = "0,2",就是隐藏第一与第三列,代码如下:

  1. <TableLayout
  2. android:id="@+id/TableLayout2"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:collapseColumns="0,2"
  6. tools:ignore="MissingConstraints">
  7. <TableRow>
  8. <Button
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:text="one" />
  12. <Button
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:text="two" />
  16. <Button
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:text="three" />
  20. <Button
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:text="four" />
  24. <Button
  25. android:layout_width="wrap_content"
  26. android:layout_height="wrap_content"
  27. android:text="five" />
  28. </TableRow>
  29. </TableLayout>

 2.stretchColumns(拉伸列)

        在TableLayout中设置了四个文本框,在最外层的TableLayout中添加以下属性: android:stretchColumns = "1"

设置第二列为可拉伸列,让该列填满这一行所有的剩余空间,代码如下:

  1. <TableLayout
  2. android:id="@+id/TableLayout2"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:stretchColumns="1">
  6. <TableRow>
  7. <TextView
  8. android:background="#E0E0E0"
  9. android:padding="8dp"
  10. android:text="one" />
  11. <TextView
  12. android:background="#E0E0E0"
  13. android:padding="8dp"
  14. android:text="two" />
  15. <TextView
  16. android:background="#E0E0E0"
  17. android:padding="8dp"
  18. android:text="three" />
  19. <TextView
  20. android:background="#E0E0E0"
  21. android:padding="8dp"
  22. android:text="four" />
  23. </TableRow>
  24. </TableLayout>

 3.shrinkColumns(收缩列)

设置4个文本框和一个按钮,在最外层的TableLayout中添加以下属性: android:shrinkColumns = "1"

设置第二个列为可收缩列,代码如下:

  1. <TableLayout
  2. android:id="@+id/TableLayout2"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:shrinkColumns="1">
  6. <TableRow>
  7. <TextView
  8. android:background="#E0E0E0"
  9. android:padding="8dp"
  10. android:text="one" />
  11. <TextView
  12. android:background="#E0E0E0"
  13. android:padding="8dp"
  14. android:text="two" />
  15. <TextView
  16. android:background="#E0E0E0"
  17. android:padding="8dp"
  18. android:text="three" />
  19. <TextView
  20. android:background="#E0E0E0"
  21. android:padding="8dp"
  22. android:text="four" />
  23. <Button
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:text="----------- one--------------- " />
  27. </TableRow>
  28. </TableLayout>

(四)总结

 二、FrameLayout(帧布局)

(一)FrameLayout的相关简介

        这个布局直接在屏幕上开辟出一块空白的区域,往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个组件,后续添加的控件会覆盖前一个,虽然默认会将控件放置在左上角,但是可以通过layout_gravity属性,指定到其他的位置。

(二)常用属性

FrameLayout的属性很少就两个,但是在说之前先介绍一个东西:

前景图像:永远处于帧布局最上面,直接面对用户的图像,就是不会被覆盖的图片。

两个属性:

        1.android:foreground:设置改帧布局容器的前景图像

        2.android:foregroundGravity:设置前景图像显示的位置

(三)实例演示

简单的例子
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:id="@+id/main"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent"
  8. tools:context=".SixthActivity"
  9. android:foreground="@mipmap/knowledge"
  10. android:foregroundGravity="right|bottom"
  11. >
  12. <TextView
  13. android:layout_width="200dp"
  14. android:layout_height="200dp"
  15. android:background="#2eaa0f" />
  16. <TextView
  17. android:layout_width="150dp"
  18. android:layout_height="150dp"
  19. android:background="#bdaccc" />
  20. <TextView
  21. android:layout_width="100dp"
  22. android:layout_height="100dp"
  23. android:background="#77b8ff" />
  24. </FrameLayout>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/642647
推荐阅读
相关标签
  

闽ICP备14008679号