Android教程-03 常见布局的总结

来源：互联网发布：临床医学英国留学知乎编辑：程序博客网时间：2024/06/16 07:16

常见的布局

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

Android的图形用户界面是由多个View和ViewGroup构建出来的。View是通用的UI窗体小组件，比如按钮(Button)或者文本框(text field)，而ViewGroup是不可见的，是用于定义子View布局方式的容器，比如网格部件(grid)和垂直列表部件(list)。
这里写图片描述

Android提供了一个对应于View和ViewGroup子类的一系列XMl标签，我们可以在XML里使用层级视图元素创建自己的UI。

我们常见的布局包括:

LinearLayout ( 线性布局 )
RelativeLayout ( 相对布局 )
FrameLayout ( 帧布局 )
GridLayout(网格布局 Android4.0 引入的)

不常见的布局：

Tablelayout(表格布局)
AbsoluteLayout(绝对布局废弃了)

我们接下来重点讲下常见的布局，对于不常见的布局，大家了解就可以

LinearLayout

即一行展开或者一列展开，也可以嵌套
重要的属性 android：orentation 方向,包括Vertical(垂直) 和horizontal 水平
这里写图片描述

参考代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity">    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button1" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button2" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button3" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button4" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <!--layout_weight  比重-->        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="button1" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="button2" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="button3" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="button4" />    </LinearLayout></LinearLayout>

RelativeLayout

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

控件显示都是相对于其它布局或者控件
常见的属性:
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

当我们实现下图的界面, 采用相对布局要方便很多
这里写图片描述

参考代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <!--red green blue-->    <TextView        android:layout_alignParentTop="true"        android:layout_alignParentLeft="true"        android:layout_width="100dp"        android:layout_height="100dp"        android:background="#cc0000"        android:text="red"        android:gravity="center"        />    <TextView        android:layout_alignParentTop="true"        android:layout_alignParentRight="true"        android:layout_width="100dp"        android:layout_height="100dp"        android:background="#ffff00"        android:text="yellow"        android:gravity="center"        />    <TextView        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"        android:layout_width="100dp"        android:layout_height="100dp"        android:background="#ff1100"        android:text="orange"        android:gravity="center"        />    <TextView        android:id="@+id/tv_center"        android:layout_centerInParent="true"        android:layout_width="100dp"        android:layout_height="100dp"        android:background="#ff1100"        android:text="center"        android:gravity="center"        />    <TextView        android:layout_alignTop="@+id/tv_center"        android:layout_toLeftOf="@+id/tv_center"        android:layout_width="100dp"        android:layout_marginRight="10dp"        android:layout_height="100dp"        android:background="#88ff00"        android:text="left"        android:gravity="center"        />    <TextView        android:layout_alignTop="@+id/tv_center"        android:layout_toRightOf="@+id/tv_center"        android:layout_width="100dp"        android:layout_height="100dp"        android:background="#ff8800"        android:layout_marginLeft="10dp"        android:text="right"        android:gravity="center"        />    <TextView        android:layout_alignParentBottom="true"        android:layout_width="match_parent"        android:layout_height="100dp"        android:background="#771122"        android:text="bottom"        android:gravity="center"        /></RelativeLayout>

FrameLayout

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

帧布局，即一层层叠起来，最先在xml总定义的都在最底下,入下图
这里写图片描述

需要注意的是 5.0以上的系统,按钮控件无论定义在前面还是后面,默认都是显示在最上面,不会被遮挡

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent"    >    <!--5.0之前 后添加的控件在之前添加控件的上面  5.0之后 如果有按钮 按钮默认都是在最前面-->    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="button"        />    <ProgressBar        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/progressBar"        android:layout_gravity="left|top" /></FrameLayout>

GridLayout

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

网格布局
取代TableLayout
GridLayout优势可以避免Linearlayout多层嵌套

需要注意的是,GridLayout是Android4.0引入的布局,如果使用此布局,需要保证当前程序最低兼容版本14

首先它与LinearLayout布局一样，也分为水平和垂直两种方式，默认是水平布局，一个控件挨着一个控件从左到右依次排列。

但是通过指定android:columnCount设置列数的属性后，控件会自动换行进行排列。另一方面，对于GridLayout布局中的子控件，默认按照wrap_content的方式设置其显示，这只需要在GridLayout布局中显式声明即可。

其次，若要指定某控件显示在固定的行或列，只需设置该子控件的android:layout_row和android:layout_column属性即可，但是需要注意：android:layout_row=”0”表示从第一行开始，android:layout_column=”0”表示从第一列开始，这与编程语言中一维数组的赋值情况类似。

最后，如果需要设置某控件跨越多行或多列，只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值，再设置其layout_gravity属性为fill即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。

这里写图片描述
这个界面建议大家使用GridLayout

参考代码：

<?xml version="1.0" encoding="utf-8"?><GridLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:columnCount="4"    android:orientation="horizontal"    android:rowCount="5">    　　    <Button        android:id="@+id/one"        android:text="1" />    　　    <Button        android:id="@+id/two"        android:text="2" />    　　　    <Button        android:id="@+id/three"        android:text="3" />    <Button        android:id="@+id/devide"        android:text="/" />    <Button        android:id="@+id/four"        android:text="4" />    <Button        android:id="@+id/five"        android:text="5" />    　　    <Button        android:id="@+id/six"        android:text="6" />    <Button        android:id="@+id/multiply"        android:text="×" />    <Button        android:id="@+id/seven"        android:text="7" />    <Button        android:id="@+id/eight"        android:text="8" />    <Button        android:id="@+id/nine"        android:text="9" />    <Button        android:id="@+id/minus"        android:text="-" />    <Button        android:id="@+id/zero"        android:layout_columnSpan="2"        android:layout_gravity="fill"        android:text="0" />    　　    <Button        android:id="@+id/point"        android:text="." />    <Button        android:id="@+id/plus"        android:layout_gravity="fill"        android:layout_rowSpan="2"        android:text="+" />    <Button        android:id="@+id/equal"        android:layout_columnSpan="3"        android:layout_gravity="fill"        android:text="=" /></GridLayout>

视频建议采用超清模式观看, 欢迎点击订阅我的优酷

2 0