Android版式– LinearLayout，RelativeLayout

In this tutorial, we will provide an overview of android layout. We will also explore some of the specific layout controls available for organising the screen content namely – Android LinearLayout and Android RelativeLayout.

在本教程中，我们将概述android布局。我们还将探讨一些可用于组织屏幕内容的特定布局控件，即Android LinearLayout和Android RelativeLayout。

Android布局 (Android Layout)

The basic building block for user interface is a View object that is created from the View class and occupies a rectangular area on the screen. Views are the base class for UI components like TextView, Button, EditText etc.

用户界面的基本构建块是一个View对象，该View对象是从View类创建的，并且在屏幕上占据一个矩形区域。视图是UI组件（如TextView，Button，EditText等）的基类。

The ViewGroup is a subclass of View. One or more Views can be grouped together into a ViewGroup. A ViewGroup provides the android layout in which we can order the appearance and sequence of views. Examples of ViewGroup are LinearLayout, FrameLayout, RelativeLayout etc.

ViewGroup是View的子类。可以将一个或多个视图组合到一个视图组中。 ViewGroup提供了android布局，我们可以在其中排列视图的外观和序列。 ViewGroup的示例是LinearLayout ， FrameLayout ， RelativeLayout等。

Android布局类型 (Android Layout Types)

Android provides the following ViewGroups or layouts:

Android提供以下ViewGroup或布局：

LinearLayout : is a ViewGroup that aligns all children in a single direction, vertically or horizontallyLinearLayout ：是一个ViewGroup，可在单个方向上垂直或水平对齐所有子级
RelativeLayout : is a ViewGroup that displays child views in relative positionsRelativeLayout ：是一个ViewGroup，它在相对位置显示子视图
AbsoluteLayout : allows us to specify the exact location of the child views and widgetsAbsoluteLayout ：允许我们指定子视图和小部件的确切位置
TableLayout : is a view that groups its child views into rows and columnsTableLayout ：是将其子视图分为行和列的视图
FrameLayout : is a placeholder on screen that is used to display a single viewFrameLayout ：是屏幕上的占位符，用于显示单个视图
ScrollView : is a special type of FrameLayout in that it allows users to scroll through a list of views that occupy more space than the physical display. The ScrollView can contain only one child view or ViewGroup, which normally is a LinearLayoutScrollView ：是FrameLayout的一种特殊类型，它使用户可以滚动浏览比物理显示器占用更多空间的视图列表。 ScrollView只能包含一个子视图或ViewGroup，通常为LinearLayout
ListView : is a view group that displays a list of scrollable itemListView ：是一个视图组，显示可滚动项的列表
GridView : is a ViewGroup that displays items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this viewGridView ：是一个ViewGroup，用于在二维滚动网格中显示项目。网格中的项目来自与此视图关联的ListAdapter

In this tutorial we’ll focus on the two most used android layout:

在本教程中，我们将重点介绍两个最常用的android布局：

LinearLayout线性布局
RelativeLayout相对布局

Android布局属性 (Android Layout Attributes)

android:id : This is the ID which uniquely identifies the viewandroid：id ：这是唯一标识视图的ID
android:layout_width : This is the width of the layoutandroid：layout_width ：这是布局的宽度
android:layout_height : This is the height of the layoutandroid：layout_height ：这是布局的高度
android:layout_margin : This is the extra space outside of the view. For example if you give android:marginLeft=20dp, then the view will be arranged after 20dp from leftandroid：layout_margin ：这是视图外部的额外空间。例如，如果您提供android:marginLeft=20dp ，则视图将从左20dp之后排列
android:layout_padding : This is similar to android:layout_margin except that it specifies the extra space inside the viewandroid：layout_padding ：这类似于android：layout_margin，不同之处在于它指定了视图内部的额外空间
android:layout_gravity : This specifies how child Views are positionedandroid：layout_gravity ：这指定子视图的位置
android:layout_weight : This specifies how much of the extra space in the layout should be allocated to the viewandroid：layout_weight ：这指定应将布局中多少额外空间分配给视图
android:layout_x : This specifies the x-coordinate of the layoutandroid：layout_x ：这指定布局的x坐标
android:layout_y : This specifies the y-coordinate of the layoutandroid：layout_y ：这指定布局的y坐标

android:layout_width=wrap_content tells the view to size itself to the dimensions required by its content.

android：layout_width = wrap_content告知视图将其自身调整为其内容所需的尺寸。

android:layout_width=match_parent tells the view to become as big as its parent view.

android：layout_width = match_parent告诉视图变得与其父视图一样大。

查看识别 (View Identification)

The syntax for an ID, inside an XML tag is:

XML标记内的ID的语法为：

The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource字符串开头的符号（@）表示XML解析器应解析并扩展ID字符串的其余部分，并将其标识为ID资源。
The plus-symbol (+) means that this is a new resource name that must be created and added to our resources加号（+）表示这是必须创建并添加到我们资源中的新资源名称

Android LinearLayout (Android LinearLayout)

Android LinearLayout organizes elements along a single line. We can specify whether that line is vertical or horizontal using android:orientation. The orientation is horizontal by default.

Android LinearLayout沿一行组织元素。我们可以使用android:orientation指定该行是垂直还是水平。默认情况下方向是水平的。

A vertical LinearLayout will only have one child per row (so it is a column of single elements), and a horizontal LinearLayout will only have one single row of elements on the screen.

垂直LinearLayout每行只有一个子元素（因此它是一列单个元素），而水平LinearLayout在屏幕上将只有一行元素。

android:layout_weight attribute depicts the importance of the element. An element with larger weight occupies more screen space. Here is a sample Layout XML using LinearLayout:

android：layout_weight属性描述了元素的重要性。重量较大的元素占用更多的屏幕空间。这是使用LinearLayout的示例布局XML：

layout_linear.xml

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_margin="@dimen/activity_horizontal_margin"><Buttonandroid:id="@+id/backbutton"android:text="Back"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="Row 2"android:layout_width="wrap_content"android:textSize="18sp"android:layout_margin="10dp"android:layout_height="wrap_content" /><TextViewandroid:text="Row 3"android:textSize="18sp"android:layout_margin="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="Row 4"android:textSize="18sp"android:layout_margin="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="Row 5"android:textSize="18sp"android:layout_margin="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><LinearLayoutandroid:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"><Buttonandroid:id="@+id/next_button"android:text="next"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="Row 6b"android:textSize="18sp"android:layout_margin="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="Row 6c"android:textSize="18sp"android:layout_margin="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="Row 6d"android:textSize="18sp"android:layout_margin="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout></LinearLayout>

In this layout we have a Parent LinearLayout which has a vertical orientation and contains buttons, textviews and a nested Linear Layout(having a horizontal orientation) as child views.

在此布局中，我们有一个Parent LinearLayout ，它具有垂直方向，并包含按钮，文本视图和嵌套的Linear Layout（水平方向）作为子视图。

Note: Nested layouts don’t have to be of one type. We could, for example, have a LinearLayout as one of the children in a RelativeLayout and vice-versa.

注意：嵌套布局不必是一种类型。例如，我们可以将LinearLayout作为RelativeLayout中的子级之一，反之亦然。

Android RelativeLayout (Android RelativeLayout)

Android RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is one of the most complicated layout and we need several properties to actually get the layout we desire.

Android RelativeLayout根据元素之间的关系以及与父容器的关系来布局元素。这是最复杂的布局之一，我们需要几个属性才能实际获得所需的布局。

That is, using RelativeLayout we can position a view to be toLeftOf, toRightOf, below or above its siblings.

也就是说，使用RelativeLayout我们可以将视图定位为toLeftOf ， toRightOf ，位于其同级之下或之上。

We can also position a view with respect to its parent such as centered horizontally, vertically or both, or aligned with any of the edges of the parent RelativeLayout. If none of these attributes are specified on a child view then the view is by default rendered to the top left position.

我们还可以相对于父视图放置视图，例如水平，垂直或同时居中或与父视图RelativeLayout任何边缘对齐。如果在子视图上未指定这些属性，则默认情况下将视图渲染到左上角。

Android RelativeLayout属性 (Android RelativeLayout attributes)

The following are the major attributes used across RelativeLayout. They lay across three different categories:

以下是在RelativeLayout中使用的主要属性。它们分为三个不同的类别：

相对于集装箱 (Relative To Container)

android:layout_alignParentBottom : Places the bottom of the element on the bottom of the containerandroid：layout_alignParentBottom：将元素的底部放在容器的底部
android:layout_alignParentLeft : Places the left of the element on the left side of the containerandroid：layout_alignParentLeft：将元素的左侧放置在容器的左侧
android:layout_alignParentRight : Places the right of the element on the right side of the containerandroid：layout_alignParentRight：将元素的右侧放置在容器的右侧
android:layout_alignParentTop : Places the element at the top of the containerandroid：layout_alignParentTop：将元素放置在容器的顶部
android:layout_centerHorizontal : Centers the element horizontally within its parent containerandroid：layout_centerHorizontal：将元素在其父容器中水平居中
android:layout_centerInParent : Centers the element both horizontally and vertically within its containerandroid：layout_centerInParent：将元素在容器内水平和垂直居中
android:layout_centerVertical : Centers the element vertically within its parent containerandroid：layout_centerVertical：将元素在其父容器内垂直居中

相对于兄弟姐妹 (Relative to Siblings)

android:layout_above : Places the element above the specified elementandroid：layout_above：将元素放置在指定元素上方
android:layout_below : Places the element below the specified elementandroid：layout_below：将元素放置在指定元素的下方
android:layout_toLeftOf : Places the element to the left of the specified elementandroid：layout_toLeftOf：将元素放置在指定元素的左侧
android:layout_toRightOf : Places the element to the right of the specified elementandroid：layout_toRightOf：将元素放置在指定元素的右边

“@id/XXXXX” is used to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error so @+id/ should be used in such cases.

“ @ id / XXXXX”用于通过元素ID引用元素。要记住的一件事是，在声明元素之前先引用它会产生错误，因此在这种情况下应使用@ + id /。

与其他元素的一致性 (Alignment With Other Elements)

android:layout_alignBaseline : Aligns baseline of the new element with the baseline of the specified elementandroid：layout_alignBaseline：将新元素的基线与指定元素的基线对齐
android:layout_alignBottom : Aligns the bottom of new element in with the bottom of the specified elementandroid：layout_alignBottom：将新元素的底部与指定元素的底部对齐
android:layout_alignLeft : Aligns left edge of the new element with the left edge of the specified elementandroid：layout_alignLeft：将新元素的左边缘与指定元素的左边缘对齐
android:layout_alignRight : Aligns right edge of the new element with the right edge of the specified elementandroid：layout_alignRight：将新元素的右边缘与指定元素的右边缘对齐
android:layout_alignTop : Places top of the new element in alignment with the top of the specified elementandroid：layout_alignTop：将新元素的顶部与指定元素的顶部对齐

The following xml layout uses RelativeLayout:

以下xml布局使用RelativeLayout ：

layout_relative.xml

<RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"xmlns:android="https://schemas.android.com/apk/res/android"><Buttonandroid:id="@+id/backbutton"android:text="Back"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/firstName"android:text="First Name"android:textSize="18sp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/backbutton" /><TextViewandroid:id="@+id/editFirstName"android:text="JournalDev"android:textSize="18sp"android:layout_width="wrap_content"android:layout_marginLeft="10dp"android:layout_height="wrap_content"android:layout_toRightOf="@id/firstName"android:layout_below="@id/backbutton"/><TextViewandroid:id="@+id/editLastName"android:text="Layout Tutorial Example"android:textSize="18sp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignTop="@+id/lastName"android:layout_toRightOf="@+id/lastName"android:layout_toEndOf="@+id/lastName" /><TextViewandroid:id="@+id/lastName"android:text="Last Name"android:textSize="18sp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="48dp"android:layout_below="@+id/firstName"android:layout_alignParentLeft="true"android:layout_alignParentStart="true"android:layout_marginRight="10dp"android:layout_marginLeft="40dp"android:layout_marginStart="40dp" /><Buttonandroid:id="@+id/next"android:text="Next"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/editLastName"android:layout_alignLeft="@+id/editLastName"android:layout_alignStart="@+id/editLastName"android:layout_marginTop="37dp" />
</RelativeLayout>

As you can see we can rearrange elements based on their relative positions.

如您所见，我们可以根据元素的相对位置重新排列元素。

The following xml layout represents a custom layout having nested linear and relative layouts.

以下xml布局表示具有嵌套线性和相对布局的自定义布局。

layout_mixed.xml

<RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"xmlns:android="https://schemas.android.com/apk/res/android"><TextViewandroid:id="@+id/parent_rl"android:text="Parent RelativeLayout"android:textSize="18sp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><LinearLayoutandroid:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/linearLayout"android:layout_below="@id/parent_rl"android:layout_alignParentRight="true"android:layout_alignParentEnd="true"><TextViewandroid:text="Nested Horizontal"android:textSize="18sp"android:layout_margin="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="LL"android:textSize="18sp"android:layout_margin="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><LinearLayoutandroid:orientation="vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"><TextViewandroid:text="Double Nested"android:textSize="18sp"android:layout_margin="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="Vertical"android:textSize="18sp"android:layout_margin="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:text="LL"android:textSize="18sp"android:layout_margin="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout></LinearLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/linearLayout"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textAppearance="?android:attr/textAppearanceMedium"android:text="Nested Relative Layout"android:id="@+id/textView"android:layout_alignParentTop="true"android:layout_centerHorizontal="true" /><Buttonandroid:id="@+id/back_button_pressed"android:text="back"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/textView"android:layout_centerHorizontal="true"android:layout_marginTop="66dp" /></RelativeLayout></RelativeLayout>

Android布局项目结构 (Android Layout Project Structure)

This project consists of three activities and the respective layouts that were discussed above.

该项目包括三个活动和上面讨论的各个布局。

Android布局代码 (Android Layout Code)

The application launches into the MainActivity which loads the layout_linear.xml contents by the following code:

该应用程序启动进入MainActivity，它通过以下代码加载layout_linear.xml内容：

package com.journaldev.layouts;import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;public class MainActivity extends AppCompatActivity {Button back,next;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_linear);back=(Button)findViewById(R.id.back_button);next=(Button)findViewById(R.id.next_button);next.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent=new Intent(MainActivity.this,SecondActivity.class);intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);startActivity(intent);}});back.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {finish();}});}}

The SecondActivity and ThirdActivity load the layout_relative.xml and layout_mixed.xml layouts respectively as shown below:

SecondActivity和ThirdActivity加载layout_relative.xml和layout_mixed.xml布局，如下所示：

package com.journaldev.layouts;import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;public class SecondActivity extends Activity {Button back,next;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_relative);back=(Button)findViewById(R.id.backbutton);next=(Button)findViewById(R.id.next);next.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent=new Intent(SecondActivity.this,ThirdActivity.class);intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);startActivity(intent);}});back.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent=new Intent(SecondActivity.this,MainActivity.class);intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);startActivity(intent);}});}
}

package com.journaldev.layouts;import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;public class ThirdActivity extends Activity {Button back;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_mixed);back=(Button)findViewById(R.id.back_button_pressed);back.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent=new Intent(ThirdActivity.this,SecondActivity.class);intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);startActivity(intent);}});}
}

The image outputs of the three layout files are shown below:

三个布局文件的图像输出如下所示：

layout_linear.xml

As you can see the Parent LinearLayout consists of 6 child elements in a single vertical column among which one is a nested LinearLayout child view containing 4 components in horizontal orientation.

如您所见，Parent LinearLayout在单个垂直列中包含6个子元素，其中一个是嵌套的LinearLayout子视图，其中包含4个水平方向的组件。

layout_relative.xml

The arrows pointing in the image above depict how siblings are positioned relative to each other and relative to the container.

上图中指向的箭头描述了兄弟姐妹如何相对于彼此以及相对于容器定位。

layout_mixed.xml

This Relative Layout consists of a Vertical LinearLayout within a Nested Horizontal LinearLayout along with a Child RelativeLayout.

此相对布局由嵌套水平LinearLayout中的Vertical LinearLayout以及子RelativeLayout组成。

Note: Components belonging to different layouts are not siblings and hence can’t be positioned relative to each other. It’s their container layouts that are siblings and can be positioned relative to each other.

注意：属于不同布局的组件不是同级组件，因此不能相对放置。它们的容器布局是同级的并且可以彼此相对放置。

If you are wondering about the blue lined rectangles and arrows, it’s because the images are from xml layouts in graphical view. When you will run the app, these blue lines and rectangles will not be shown.

如果您想知道蓝色的矩形和箭头，那是因为图像来自图形视图中的xml布局。当您运行应用程序时，这些蓝线和矩形将不会显示。

This brings an end to android layout tutorial. We’ll cover the other android layouts in the next tutorials. You can download the final Android Layout Project from the link below.

这结束了android布局教程。在接下来的教程中，我们将介绍其他android布局 。您可以从下面的链接下载最终的Android Layout Project 。

Download Android LinearLayout RelativeLayout Example Project下载Android LinearLayout RelativeLayout示例项目

Reference: API Doc

参考： API文档

翻译自: https://www.journaldev.com/9495/android-layout-linearlayout-relativelayout