Android布局-LinearLayout、RelativeLayout

2023-11-04

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

安卓布局

用户界面的基本构建块是View从 View 类创建并占据屏幕上的矩形区域的对象。视图是 UI 组件（如 TextView、Button、EditText 等）的基类。视图组是 View 的子类。一个或多个视图可以组合在一起形成一个视图组。 ViewGroup 提供了 android 布局，我们可以在其中对视图的外观和顺序进行排序。 ViewGroup 的示例有LinearLayout, FrameLayout, RelativeLayout etc.

Android 布局类型

Android 提供以下 ViewGroup 或布局：

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

在本教程中，我们将重点关注两种最常用的 Android 布局：

线性布局
相对布局

Android 布局属性

安卓：id：这是唯一标识视图的ID
机器人：布局宽度：这是布局的宽度
机器人：布局高度：这是布局的高度
机器人：布局边距：这是视图之外的额外空间。例如，如果你给android:marginLeft=20dp，那么视图将被排列在距左侧 20dp 之后
安卓：布局填充: 这类似于机器人：布局边距除了它指定了额外的空间inside风景
机器人：布局重力：指定子视图的定位方式
机器人：布局权重：这指定布局中应将多少额外空间分配给视图
安卓：layout_x：指定布局的 x 坐标
安卓：layout_y：指定布局的 y 坐标

安卓：布局宽度=包装内容告诉视图根据其内容所需的尺寸调整自身大小。安卓：布局宽度=匹配父级告诉视图变得和它的父视图一样大。

查看标识

XML 标记内 ID 的语法为：

字符串开头的 at 符号 (@) 指示 XML 解析器应解析并扩展 ID 字符串的其余部分，并将其标识为 ID 资源
加号 (+) 表示这是一个必须创建并添加到我们的资源中的新资源名称

Android 线性布局

Android LinearLayout 沿单行组织元素。我们可以使用指定该线是垂直还是水平android:orientation。默认情况下方向是水平的。垂直 LinearLayout 每行只有一个子元素（因此它是一列单个元素），水平 LinearLayout 在屏幕上只有一行元素。机器人：布局权重属性描述了元素的重要性。权重较大的元素占据更多的屏幕空间。下面是使用 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它具有垂直方向，包含按钮、文本视图和嵌套线性布局（具有水平方向）作为子视图。Note：嵌套布局不必是一种类型。例如，我们可以将 LinearLayout 作为relativelayout 的子级之一，反之亦然。

Android 相对布局

AndroidrelativeLayout 根据元素之间的关系以及元素与父容器的关系来布局元素。这是最复杂的布局之一，我们需要几个属性才能真正获得我们想要的布局。也就是说，使用RelativeLayout我们可以将视图定位到toLeftOf, 到右边, below or above它的兄弟姐妹。我们还可以相对于其父视图定位视图，例如水平居中, 垂直或两者，或与父级的任何边缘对齐RelativeLayout。如果子视图上没有指定这些属性，则默认情况下该视图将渲染到左上角位置。

Android 相对布局属性

以下是跨领域使用的主要属性相对布局。它们分为三个不同的类别：

相对于容器

android:layout_alignParentBottom ：将元素的底部放置在容器的底部
android:layout_alignParentLeft ：将元素的左侧放置在容器的左侧
android:layoutalignParentRight ：将元素的右侧放置在容器的右侧
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="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"/>
    <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布局项目结构

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

Android布局代码

应用程序启动到 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;
    @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();
            }
        });

    }

}

The SecondActivity and ThirdActivity加载layout_relative.xml and 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;
    @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.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;
    @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);
            }
        });

    }
}

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. 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. 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. 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 LinearLayoutrelativeLayout示例项目

参考：API Doc

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Android