Android精通：View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件

电玩女神 2021-09-16 03:46 363阅读 0赞

![标题图][1240]

## UI的描述 ##

对于`Android`应用程序中，所有用户界面元素都是由`View`和`ViewGroup`对象构建的。`View`是绘制在屏幕上能与用户进行交互的一个对象。而对于`ViewGroup`来说，则是一个用于存放其他`View`和`ViewGroup`对象的布局容器！

![viewgroup.png][]

`Android`为我们提供了`View`和`ViewGroup`的两个子类的集合，提供常用的一些输入控件（比如按钮，图片和文本域等）和各种各样的布局模式（比如线程布局，相对布局，绝对布局，帧布局，表格布局等）。

## 用户界面布局 ##

在你`APP`软件上的，用户界面上显示的每一个组件都是使用层次结构`View`和`ViewGroup`对象来构成的，比如，每个`ViewGroup`都是不可见容器，每个`ViewGroup`视图组用于组织子视图`View`的容器，而它的子视图`View`可能是输入一些控件或者在某块区域的小部件`UI`。如果你有了层次结构树，你可以根据自己的需要，设计出一些布局，但要尽量简单，因为越简单的层次结构最适合性能。

要声明布局，可以在代码中实例化对象并构建，最简单的方法也可以使用`xml`文件。

<?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="TextView" />
        <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />
    </LinearLayout>

## 在`Android`中提供了几个常用布局： ##

1.  `LinearLayout`线性布局
2.  `RelativeLayout`相对布局
3.  `FrameLayout`帧布局
4.  `AbsoluteLayout`绝对布局
5.  `TableLayout`表格布局
6.  `GridLayout`网格布局

## 描述一下几个重要的 ##

**线性布局：**  
指子控件以**水平或垂直**方式排列。

**相对布局：**  
指子控件**以控件之间的相对位置或子控件相对于父容器的位置排列。**

**帧布局：**  
指所有子控件均放在**左上角且后面元素直接覆盖在前面元素之上。**

**绝对布局：**  
指子控件通过绝对定位**x，y位置**来决定其位置摆放。

**表格布局：**  
指以行列的形式放置子控件，每一行是一个**TableRow对象或者View对象。**

![图片][1240 1]

#### LinearLayout线性布局 ####

#### 常用属性： ####

1.  `id:`为该组件添加一个资源`id`
2.  `orientation:`布局中的排列方式，有两种方式：  
    `horizontal`水平  
    `vertical`竖直
3.  `layout_width:`布局的宽度，用`wrap_content`表示组件的实际宽度，`match_parent`表示填充父容器
4.  `layout_height:`布局的长度，用`wrap_content`表示组件的实际长度，`match_parent`表示填充父容器
5.  `gravity:`控制组件所包含的子元素的对齐方式
6.  `layout_gravity:`控制该组件在父容器里的对齐方式
7.  `background:`为该组件添加一个背景图片

`LinearLayout`是一个视图组，可以在一个方向垂直或者水平分布所有子项，用`android:orientation`属性。

<?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" >
        <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="输入账号" />
        <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="输入密码" />
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录" />
    </LinearLayout>

#### `RelativeLayout`相对布局 ####

`RelativeLayout`是一个相对布局的视图组，用来显示相对位置的子视图类，在默认情况下，所有子视图对会分布在左上角。

1.  `layout_alignParentTop:`为`true`,视图的上边界与父级的上边界对齐
2.  `layout_centerVertical:`为`true`,将子类放置在父类中心
3.  `layout_below:`将该视图放在资源`ID`下方
4.  `layout_toRightOf:`将该视图放在资源`ID`右边

<?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" >
        <EditText android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="你的名字" />
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignParentRight="true" android:text="正确" />
    </RelativeLayout>

## `GridView`网格布局 ##

`GridView`其实是一个网格一样的视图组件，是一个`ViewGroup`的二维视图。用适配器可以将布局进行填充。

![gridview.png][]

## ListView列表组件 ##

`ListView`是一个用于显示列表的可以滚动的视图组，列表项也可以用适配器进行添加内容的。

![listview.png][]

## 结语 ##

*  本文主要讲解 **Android精通：View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件**
 *  下面我将继续对`Java`、 `Android`中的其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

![送❤][1240 2]

[1240]: /images/20210724/58cffe193c4b4568b6af672723456435.png
[viewgroup.png]: /images/20210724/5ebbf410f46e46379bef128d4bbca60a.png
[1240 1]: /images/20210724/a0046d7d1f8e4267a6e223776b76579f.png
[gridview.png]: /images/20210724/1242285643974e0a8e5a7430fde947f7.png
[listview.png]: /images/20210724/db871652f04f4cbb97c6e344952ed580.png
[1240 2]: /images/20210724/fffb351410104f39b6875737cb271230.png