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

Android版式

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

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

Android布局类型

Android提供以下ViewGroup或者布局：

• LinearLayout：是一个ViewGroup，它在垂直或者水平方向上将所有子级对齐
• RelativeLayout：是一个ViewGroup，在相对位置显示子视图
• AbsoluteLayout：允许我们指定子视图和小部件的确切位置
• TableLayout：是将其子视图分为行和列的视图
• FrameLayout：是屏幕上的占位符，用于显示单个视图
• ScrollView：是FrameLayout的一种特殊类型，它允许用户滚动视图列表，该视图列表比物理显示器占据更多的空间。
  ScrollView只能包含一个子视图或者ViewGroup，通常为LinearLayout
• ListView：是一个视图组，显示可滚动项的列表
• GridView是一个ViewGroup，它在二维滚动网格中显示项目。
  网格中的项目来自与此视图关联的ListAdapter

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

• 线性布局
• 相对布局

Android布局属性

• android：id：这是唯一标识视图的ID
• android：layout_width：这是布局的宽度
• android：layout_height：这是布局的高度
• android：layout_margin：这是视图外部的另外空间。
  例如，如果您给出android：marginLeft = 20dp，则视图将在从左起20dp之后排列
• android：layout_padding：这类似于android：layout_margin，不同之处在于它指定了视图内的另外空间
• android：layout_gravity：这指定子视图的位置
• android：layout_weight：这指定应将布局中多少另外空间分配给视图
• android：layout_x：这指定布局的x坐标
• android：layout_y：这指定布局的y坐标

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

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

查看识别

XML标记内的ID的语法为：

• 字符串开头的符号(@)表示XML解析器应解析并扩展ID字符串的其余部分，并将其标识为ID资源。

• 加号(+)表示这是必须创建并添加到我们资源中的新资源名称

Android LinearLayout

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

垂直LinearLayout每行只有一个子元素(因此它是一列单个元素)，而水平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">
  <Button
      android:id="@+id/backbutton"
      android:text="Back"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 
  <TextView
      android:text="Row 2"
      android:layout_width="wrap_content"
      android:textSize="18sp"
      android:layout_margin="10dp"
      android:layout_height="wrap_content" 
  <TextView
      android:text="Row 3"
      android:textSize="18sp"
      android:layout_margin="10dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 
  <TextView
      android:text="Row 4"
      android:textSize="18sp"
      android:layout_margin="10dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 
  <TextView
      android:text="Row 5"
      android:textSize="18sp"
      android:layout_margin="10dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <LinearLayout
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <Button
          android:id="@+id/next_button"
          android:text="next"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 
      <TextView
          android:text="Row 6b"
          android:textSize="18sp"
          android:layout_margin="10dp"
          android:layout_gravity="center"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 
      <TextView
          android:text="Row 6c"
          android:textSize="18sp"
          android:layout_margin="10dp"
          android:layout_gravity="center"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 
      <TextView
          android: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>

在此布局中，我们有一个" LinearLayout"父对象，它具有垂直方向，并包含按钮，文本视图和嵌套的线性布局(具有水平方向)作为子视图。

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

Android RelativeLayout

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

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

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

Android RelativeLayout属性

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

相对于Docker

• android：layout_alignParentBottom：将元素的底部放在容器的底部
• android：layout_alignParentLeft：将元素的左侧放置在容器的左侧
• android：layout_alignParentRight：将元素的右侧放置在容器的右侧
• android：layout_alignParentTop：将元素放置在容器的顶部
• android：layout_centerHorizontal：将元素在其父容器中水平居中
• android：layout_centerInParent：将元素在容器内水平和垂直居中
• android：layout_centerVertical：将元素在其父容器内垂直居中

相对于兄弟姐妹

• android：layout_above：将元素放置在指定元素上方
• android：layout_below：将元素放置在指定元素的下方
• android：layout_toLeftOf：将元素放置在指定元素的左侧
• android：layout_toRightOf：将元素放置在指定元素的右边

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

与其他元素的一致性

• android：layout_alignBaseline：将新元素的基线与指定元素的基线对齐
• android：layout_alignBottom：将新元素的底部与指定元素的底部对齐
• android：layout_alignLeft：将新元素的左边缘与指定元素的左边缘对齐
• android：layout_alignRight：将新元素的右边缘与指定元素的右边缘对齐
• android：layout_alignTop：将新元素的顶部与指定元素的顶部对齐

以下xml布局使用RelativeLayout：

layout_relative.xml

<RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  xmlns:android="https://schemas.android.com/apk/res/android">
  <Button
      android:id="@+id/backbutton"
      android:text="Back"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 
  <TextView
      android: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" 
  <TextView
      android:id="@+id/editFirstName"
      android:text="theitroad"
      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"
  <TextView
      android: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" 
  <TextView
      android: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" 

  <Button
      android: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>

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

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

layout_mixed.xml

<RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  xmlns:android="https://schemas.android.com/apk/res/android">

  <TextView
      android:id="@+id/parent_rl"
      android:text="Parent RelativeLayout"
      android:textSize="18sp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <LinearLayout
      android: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">

      <TextView
          android:text="Nested Horizontal"
          android:textSize="18sp"
          android:layout_margin="10dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 

      <TextView
          android:text="LL"
          android:textSize="18sp"
          android:layout_margin="10dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 

      <LinearLayout
          android:orientation="vertical"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content">

          <TextView
              android:text="Double Nested"
              android:textSize="18sp"
              android:layout_margin="10dp"
              android:layout_gravity="center"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" 
          <TextView
              android:text="Vertical"
              android:textSize="18sp"
              android:layout_margin="10dp"
              android:layout_gravity="center"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" 
          <TextView
              android: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>

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_below="@id/linearLayout">

  <TextView
      android: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" 

      <Button
          android: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布局代码

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

package com.theitroad.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;
  @Override
  protected 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() {
          @Override
          public 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() {
          @Override
          public void onClick(View v) {
              finish();
          }
      });

  }

}

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

package com.theitroad.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;
  @Override
  protected 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() {
          @Override
          public 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() {
          @Override
          public void onClick(View v) {
              Intent intent=new Intent(SecondActivity.this,MainActivity.class);
              intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
              startActivity(intent);
          }
      });

  }
}

package com.theitroad.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;
  @Override
  protected 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() {
          @Override
          public void onClick(View v) {
              Intent intent=new Intent(ThirdActivity.this,SecondActivity.class);
              intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
              startActivity(intent);
          }
      });

  }
}

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

layout_linear.xml

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

layout_relative.xml

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

layout_mixed.xml

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

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

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