Android 布局组件

浅浅的花香味﹌ 2022-09-24 12:27 179阅读 0赞

###  **布局介绍** ###

布局用于定义Activity中UI元素的排列结构，Android提供了LinearLayout线性布局、RelativeLayout相对布局 、FrameLayout帧布局 、TableLayout表格布局、AbsoluteLayout坐标布局 共五种布局，可以通过两种方式声明布局：

• 在 XML 中声明 UI 元素。Android 提供了对应于 View 类及其子类的XML 元素

• 运行时实例化布局元素。可以通过编程创建 View 对象和 ViewGroup 对象（并操纵其属性）。

在 XML 中声明 UI 的优点在于，可以更好地将应用的外观与控制应用行为的代码隔离。UI 描述位于应用代码外部，这意味着在修改或调整描述时无需修改您的源代码并重新编译。例如，可以创建适用于不同屏幕方向、不同设备屏幕尺寸和不同语言的 XML 布局。此外，在 XML 中声明布局还能更轻松地显示 UI 的结构，从而简化问题调试过程。因此，Android应用中普遍采用在XML中布局UI元素。

### **1.编写布局文件** ###

布局文件都必须只包含一个根元素，并且该元素必须是视图对象或 ViewGroup 对象。定义根元素之后，即可再以子元素的形式添加其他布局对象或UI元素，从而逐步构建定义布局的视图层次结构

<table style="font-size:18px"> 
 <tbody> 
  <tr> 
   <td style="background:rgb(190,190,190)"> <p>程序清单2.3-1<span style="font-family:宋体">布局文件的定义</span></p> </td> 
  </tr> 
 </tbody> 
</table>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

android:orientation="vertical" >

<TextView android:id="@+id/text"

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:text="Hello, I am a TextView" />

<Button android:id="@+id/button"

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:text="Hello, I am a Button" />

</LinearLayout>

在 XML 中声明布局后，请在您的 Android 项目 res/layout/ 目录中以 .xml 扩展名保存文件，以便其能够正确编译。

### **2.加载布局文件** ###

当编译应用时，每个 XML 布局文件都会编译到一个 View 资源中。应该在 Activity.onCreate() 回调方法中使用应用代码加载布局资源。通过调用 setContentView()，以 R.layout.layout\_file\_name 形式向其传递对布局资源的引用来执行此操作。

<table style="font-size:18px"> 
 <tbody> 
  <tr> 
   <td style="background:rgb(190,190,190)"> <p>程序清单2.3-2<span style="font-family:宋体">布局文件的定义</span></p> </td> 
  </tr> 
 </tbody> 
</table>

public void onCreate(Bundle savedInstanceState) \{

super.onCreate(savedInstanceState);

setContentView(R.layout.main\_layout);

**3.线性布局**

线性布局常用属性

<table> 
 <tbody> 
  <tr> 
   <td> <p>XML<span style="font-family:宋体">属性</span></p> </td> 
   <td> <p>值</p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:orientation </p> </td> 
   <td> <p>horizontal</p> <p>vertical </p> <p>&nbsp;</p> </td> 
   <td> <p>决定横向排列，还是纵向排列</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_weight</p> </td> 
   <td> <p>int </p> </td> 
   <td> <p>将父布局中剩余的尺寸按各兄弟元素的weight值比例进行分配，与“wrap_content”配合使用</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_margin </p> <p>&nbsp;</p> </td> 
   <td> <p>dp </p> <p>&nbsp;</p> </td> 
   <td> <p>设置对象边缘与父布局的边缘之间的空白</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:padding </p> <p>&nbsp;</p> </td> 
   <td> <p>dp </p> <p>&nbsp;</p> </td> 
   <td> <p>设置自身内部元素距离自身边缘的距离</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:background </p> </td> 
   <td> <p>color/drawable</p> </td> 
   <td> <p>设置整个布局画面的背景</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:gravity </p> </td> 
   <td> <p>Top,bottom,left,right,center </p> <p>&nbsp;</p> </td> 
   <td> <p>元素在自身所属区域内的对齐方式</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_gravity </p> <p>&nbsp;</p> </td> 
   <td> <p>Top,bottom,left,right,center </p> <p>&nbsp;</p> </td> 
   <td> <p>元素在布局中的对齐方式</p> <p></p> </td> 
  </tr> 
 </tbody> 
</table>

练习：利用线性布局实现下图所示效果。  
![Image 1][]

**代码如下：**

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="10dip"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户名称"
            android:id="@+id/textView"
            android:textSize="18sp"
            android:textStyle="bold"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:id="@+id/etUserName" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码"
            android:id="@+id/textView2"
            android:textSize="18sp"
            android:layout_marginBottom="10dip"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/etPassword" />
    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录"
                android:id="@+id/btLogin"
                android:textSize="18dp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="注册"
                android:id="@+id/btReg"
                android:textSize="18dp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                />
        </LinearLayout>
    </LinearLayout>

**4.FrameLayout布局**

<table> 
 <tbody> 
  <tr> 
   <td> <p>XML<span style="font-family:宋体">属性</span></p> </td> 
   <td> <p>值</p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_margin </p> <p>&nbsp;</p> </td> 
   <td> <p>dp </p> <p>&nbsp;</p> </td> 
   <td> <p>设置对象边缘与父布局的边缘之间的空白</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:padding </p> <p>&nbsp;</p> </td> 
   <td> <p>dp </p> <p>&nbsp;</p> </td> 
   <td> <p>设置自身内部元素距离自身边缘的距离</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:background </p> </td> 
   <td> <p>color/drawable</p> </td> 
   <td> <p>设置整个布局画面的背景</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:gravity </p> </td> 
   <td> <p>Top,bottom,left,right,center </p> <p>&nbsp;</p> </td> 
   <td> <p>元素在自身所属区域内的对齐方式</p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_gravity </p> <p>&nbsp;</p> </td> 
   <td> <p>Top,bottom,left,right,center </p> <p>&nbsp;</p> </td> 
   <td> <p>元素在布局中的对齐方式</p> <p></p> </td> 
  </tr> 
 </tbody> 
</table>

练习：完成如下图所示效果

**代码：**

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/movie"
            android:scaleType="centerCrop"
            android:layout_gravity="center"
            />
        <ImageView
            android:layout_width="48dip"
            android:layout_height="48dip"
            android:src="@mipmap/play"
            android:scaleType="fitCenter"
            android:layout_gravity="center"
            />
    </FrameLayout>

**5.相对布局RelativeLayout**

一种非常灵活的布局方式，通过指定界面元素与其他元素的相对位置关系，确定界面中所有元素的布局位置。特点：能够最大程度保证在各种屏幕类型的手机上正确显示界面布局表.

相对布局属性比较多，为了便于理解和记忆通常我们把属性分为三类：

第一类：属性值为true或false

RelativeLayout的常用属性

<table> 
 <tbody> 
  <tr> 
   <td> <p>XML<span style="font-family:宋体">属性</span></p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_centerHrizontal</p> </td> 
   <td> <p>水平居中 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_centerVertical</p> </td> 
   <td> <p>垂直居中 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_centerInparent</p> </td> 
   <td> <p>相对于父元素完全居中 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_alignParentBottom </p> </td> 
   <td> <p>贴紧父元素的下边缘 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_alignParentLeft </p> </td> 
   <td> <p>贴紧父元素的左边缘 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_alignParentRight </p> </td> 
   <td> <p>贴紧父元素的右边缘 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_alignParentTop</p> </td> 
   <td> <p>贴紧父元素的上边缘 </p> </td> 
  </tr> 
 </tbody> 
</table>

第二类：属性值必须为id的引用名“@id/id-name”,

RelativeLayout的常用属性

<table> 
 <tbody> 
  <tr> 
   <td> <p>XML<span style="font-family:宋体">属性</span></p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_below</p> </td> 
   <td> <p>在某元素的下方</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_above</p> </td> 
   <td> <p>在某元素的的上方</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_toLeftOf</p> </td> 
   <td> <p>在某元素的左边</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_toRightOf</p> </td> 
   <td> <p>在某元素的右边</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_alignTop</p> </td> 
   <td> <p>本元素的上边缘和某元素的的上边缘对齐</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_alignLeft</p> </td> 
   <td> <p>本元素的左边缘和某元素的的左边缘对齐</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_alignBottom</p> </td> 
   <td> <p>本元素的下边缘和某元素的的下边缘对齐</p> </td> 
  </tr> 
 </tbody> 
</table>

第三类：属性值为具体的像素值,主要是调整ui元素之间的间距，如表2.3-5所示

表2.3-5RelativeLayout的常用属性

<table> 
 <tbody> 
  <tr> 
   <td> <p>XML<span style="font-family:宋体">属性</span></p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_marginBottom </p> </td> 
   <td> <p>离某元素底边缘的距离 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_marginLeft</p> </td> 
   <td> <p>离某元素左边缘的距离 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_marginRight</p> </td> 
   <td> <p>离某元素右边缘的距离 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_marginTop </p> </td> 
   <td> <p>离某元素上边缘的距离 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_marginBottom </p> </td> 
   <td> <p>离某元素底边缘的距离 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_marginLeft</p> </td> 
   <td> <p>离某元素左边缘的距离 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_marginRight</p> </td> 
   <td> <p>离某元素右边缘的距离&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

练习：完成如下图所示效果  
![Image 1][]

**代码：**

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        >
        <ImageView
            android:id="@+id/ivLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            android:layout_marginRight="5dp"
            />
        <TextView
            android:id="@+id/tvTitle"
            android:layout_toRightOf="@id/ivLogin"
            android:layout_alignTop="@id/ivLogin"
            android:layout_alignBottom="@id/ivLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录" android:textSize="18sp"
            android:gravity="center"
            />
        <TextView
            android:id="@+id/tvSummary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvTitle"
            android:text="欢迎加入杰瑞教育"
            android:layout_toRightOf="@+id/tvTitle"
            />
        <EditText
            android:id="@+id/etName"
            android:hint="账户/邮箱/手机号码"
            android:layout_below="@+id/tvSummary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <EditText
            android:id="@+id/etPwd"
            android:hint="密码"
            android:layout_below="@+id/etName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="登录"
            android:textSize="16sp"
            android:layout_alignParentBottom="true"
            />
    
    </RelativeLayout>

**6.表格布局TableLayout**

**Tablelayout以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。当TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列。有多少个子控件就有多少列;当为View时，该View将独占一行。**

TableLayout的常用属性

<table> 
 <tbody> 
  <tr> 
   <td> <p>XML<span style="font-family:宋体">属性</span></p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_colum </p> </td> 
   <td> <p>指定该单元格在第几列显示</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_span</p> </td> 
   <td> <p>指定该单元格占据的列数（未指定时，为1）</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:stretchColumns</p> </td> 
   <td> <p>设置可伸展的列。该列可向行方向伸展，最多可占据一整行</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:shrinkColumns</p> </td> 
   <td> <p>设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_colum </p> </td> 
   <td> <p>指定该单元格在第几列显示</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:layout_span</p> </td> 
   <td> <p>指定该单元格占据的列数（未指定时，为1）</p> </td> 
  </tr> 
  <tr> 
   <td> <p>android:stretchColumns</p> </td> 
   <td> <p>设置可伸展的列。该列可向行方向伸展，最多可占据一整行</p> </td> 
  </tr> 
 </tbody> 
</table>

练习：完成今日头条界面。

**需要完成效果 已完成效果**

![Center][]![20160731160211948][]

**代码：**

<?xml version="1.0" encoding="utf-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,1,2,3"
        >
    
        <TextView
            android:text="今日头条"
            android:textColor="#ffffff"
            android:textSize="30sp"
            android:gravity="center"
            android:background="#ff0000" />
        <TableRow>
            <TextView
                android:text="我的频道"
                android:textSize="20sp"
                android:id="@+id/pindao" />
            <TextView
                android:text="编辑"
                android:textColor="#ff00"
                android:gravity="end"
                android:layout_span="2" />
            <TextView 
                android:text="^"
                android:layout_gravity="center"
                android:textSize="20sp"
                android:gravity="end" />
        </TableRow>
    
        <TableRow>
    
            <Button android:text="健康" />
            <Button android:text="正能量"/>
            <Button android:text="特卖"/>
            <Button android:text="彩票"/>
        </TableRow>
        <TableRow>
            <Button android:text="旅游"/>
        </TableRow>
        <TextView
            android:text="点击添加频道"
            android:textSize="20sp" />
        <TableRow>
            <Button android:text="电影"/>
            <Button android:text="数码"/>
            <Button android:text="时尚"/>
            <Button android:text="辟谣"/>
        </TableRow>
        <TableRow>
            <Button android:text="奇葩"/>
            <Button android:text="游戏"/>
            <Button android:text="育儿"/>
            <Button android:text="减肥"/>
        </TableRow>
        <TableRow>
            <Button android:text="养生"/>
            <Button android:text="美食"/>
            <Button android:text="政务"/>
            <Button android:text="历史"/>
        </TableRow>
        <TableRow>
            <Button android:text="探索"/>
            <Button android:text="故事"/>
            <Button android:text="美文"/>
            <Button android:text="情感"/>
        </TableRow>
        <TableRow>
            <Button android:text="语录"/>
            <Button android:text="美团"/>
            <Button android:text="房产"/>
            <Button android:text="家居"/>
        </TableRow>
        <TableRow>
            <Button android:text="搞笑"/>
            <Button android:text="星座"/>
            <Button android:text="文化"/>
            <Button android:text="毕业生"/>
        </TableRow>
    </TableLayout>

**7.绝对布局AbsoluteLayout**

AbsoluteLayout是根据元素指定的x/y坐标值在屏幕上进行显示的布局。容器的坐标系是以左上角为(0, 0)点，当垂直向下为y轴和水平向右为x轴。AbsoluteLayout 没有页边框，允许元素之间互相重叠。

因为需要为元素固定坐标点，使界面代码太过刚性，以导致在不同的设备上兼容性差，开发中我们通常不推荐使用 AbsoluteLayout ，只需简单了解即可。

**代码：**

<?xml version="1.0" encoding="utf-8"?>
    <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_x="280px"
            android:layout_y="200px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
        />
        </AbsoluteLayout>

**7.GridLayout布局**

![Image 1][]

**GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API，只不过是修改了一下相关的标签而已。GridLayout的布局策略简单分为以下三个部分：**

**　　首先它与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即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。**

**练习：完成如下图所示效果**

需要完成效果 已完成效果

![1355725079_4446.jpg][]![20160731162258112][]

<?xml version="1.0" encoding="utf-8"?>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:rowCount="5"
        android:columnCount="4"
        >
    <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:text="0"
            android:layout_columnSpan="2"
            android:layout_gravity="fill"
            />
        <Button
            android:id="@+id/point"
            android:text="."
            />
        <Button
            android:id="@+id/plus"
            android:text="+"
            android:layout_rowSpan="2"
            android:layout_gravity="fill"
            />
        <Button
            android:id="@+id/erual"
            android:text="="
            android:layout_columnSpan="3"
            android:layout_gravity="fill"
            />
    </GridLayout>

[Image 1]: 
[Center]: https://img-blog.csdn.net/20160731160052502?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[20160731160211948]: /images/20220719/2b39e708ae1149ee961d4c34787797bd.png
[1355725079_4446.jpg]: https://img-my.csdn.net/uploads/201212/17/1355725079_4446.jpg
[20160731162258112]: /images/20220719/ff3bdbb56d154e7ea67f76fdca6914f4.png