了解 Android 线性布局

Question

在广泛搜索线性布局以及如何使用线性布局完成定位任务后，我发现了很多问题，其中流行的答案是 "Use a relative layout"。

我想深入了解线性布局，但很难找到解决我认为应该很简单的任务的解释。一个有意义的解决方案似乎也是合理的。

如果我将屏幕想象成一个井字游戏板，并且想在每个位置放置一个按钮，我该怎么做而不依赖于前一个按钮的宽度来进行堆叠或边距。

例如，如果我想跳过正方形中的一个位置，我跳过的位置将保持为空。

{1} {2} {3}
{4} {5} {6}
{7} {8} {9}

根据我的阅读，我的 XML 应该将我的按钮定位在 1 3 5 7 9 但这不是那个结果。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/myLayout" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button1"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top|left"
            android:text="@string/btn1" />

        <Button
            android:id="@+id/Button2"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:text="@string/btn2" />
</LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <Button
            android:id="@+id/Button3"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/btn3" />

</LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button4"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|left"
            android:text="@string/btn4" />

        <Button
            android:id="@+id/Button5"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:text="@string/btn5" />
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/background"
        android:background="@drawable/background"/>

</LinearLayout>

我的结果是，

{1} {2} { }
{ } {5} { }
{7} {8} { }

我快要放下了！（我觉得...）

将 2 和 8 移到右边 space 我错过了什么？我没有按照指示使用线性布局吗？

这是我的objective。

{1} { } {2}
{ } { } { }
{ } { } { }
{ } {3} { }
{ } { } { }
{ } { } { }
{4} { } {5}

Answer 1

对于井字游戏，您需要为每个按钮保留 space，但文本将包含 X 或 O 或 space。这将解决任何格式问题。

我不清楚你的 objective 是什么。

您是否正在尝试为 X x X 网格做井字游戏？如果是这样，我上面的观点仍然适用。

Answer 2

如您所知，您可以水平和垂直使用线性布局。此外，您可以应用布局权重来使布局具有相同的尺寸以覆盖全屏。对于这种情况，您可以使用 3 个具有全高和相同权重的垂直线性布局来覆盖屏幕。然后你可以根据你想要的数字用相同重量的全宽按钮填充它们的内部。

Answer 3

你没有得到一个直接答案的原因真的是因为 LinearLayout 不是做你想做的事情的好方法。

由于您的 objective 是理解 LinearLayout 而不是真正实现最终结果，我将对我注意到的一些事情发表评论。

这里的一个关键点是layout_gravity的使用。它不会做你想做的事。在 LinearLayout 中，layout_gravity 一次只能在一个方向上工作。在水平 LinearLayout 中 layout_gravity 仅影响元素垂直的放置，而在垂直 LinearLayout 中 layout_gravity 仅影响元素水平位置。所以你不能做一个水平的LinearLayout，放两个按钮在里面然后用layout_gravity让一个留左一个留右

在 LinearLayout 中，子项总是按照它们在 xml 布局中输入的顺序一个接一个地直接放置（从左到右或从上到下）。那么如何制造差距呢？

spring要注意的主要有两种方式：

您可以使用 layout_margin。这定义了 space 的数量以在特定元素（如按钮）之外保持清晰。因此，如果您希望按钮 1 和按钮 2 之间有 100dp 的间隙，您可以将 android:layout_marginRight="100dp" 添加到按钮 1，或者您可以将 50dp 添加到按钮 1 的右侧，将 50dp 添加到按钮 2 的左侧。

另一种方法是包含一个宽度为 100dp 的空白视图以保留 space。这是您修改后的布局，以在实践中显示这两种方法：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/myLayout" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/Button1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn1" 
        android:layout_marginRight="100dp"/>

    <Button
        android:id="@+id/Button2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn2" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <View
        android:layout_width="100dp"
        android:layout_height="0dp"/>
    <Button
        android:id="@+id/Button3"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn3" />

</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/Button4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn4" />
    <View
        android:layout_width="100dp"
        android:layout_height="0dp"/>

    <Button
        android:id="@+id/Button5"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn5" />
</LinearLayout>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/background"
    android:background="@drawable/background"/>

</LinearLayout>

最后，ImageView。没有特别提到它，所以我对此可能是错误的，但由于可绘制名称是背景，我猜测这可能是为了让这些按钮显示在 ImageView 前面。如果是这样，那么值得一提的是 LinearLayouts 中的子项不会重叠 。该 ImageView 将始终位于带有按钮的布局之后。如果你确实想要按钮后面的背景，你可以通过将 android:background="@drawable/background" 添加到父 LinearLayout 的开始标记（尽管它可能被拉伸）来为父 LinearLayout 本身添加背景，或者你可以使用不同类型的允许重叠的布局。

Answer 4

试试这个：

是xml:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{1}"
            android:layout_weight="1"
            android:id="@+id/b1" />

        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/b2"
            android:visibility="invisible"/>

        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{2}"
            android:layout_weight="1"
            android:id="@+id/b3" />

    </LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/b4"
        android:visibility="invisible"/>

    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b5" />

    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b6" />

</LinearLayout><LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b7" />

<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b8" />

<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b9" />
</LinearLayout><LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b10" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="{3}"
    android:id="@+id/b11" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b12" />   </LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b13" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:clickable="false"
    android:visibility="invisible"
    android:id="@+id/b14" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b15" /></LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b16" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b17" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b18" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{4}"
        android:id="@+id/b19" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b20" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{5}"
        android:id="@+id/b21" /> </LinearLayout></LinearLayout>

还有：

为其 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">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{1}"
            android:layout_weight="1"
            android:id="@+id/b1" />
       <android.support.v4.widget.Space
           android:layout_width="@dimen/btnwidth"
           android:layout_height="wrap_content" />

        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{2}"
            android:layout_weight="1"
            android:id="@+id/b3" />
    </LinearLayout>  <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
  <android.support.v4.widget.Space
      android:layout_width="@dimen/btnwidth"
      android:layout_height="wrap_content" />
  <Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="{3}"
    android:id="@+id/b11" />
  <android.support.v4.widget.Space
      android:layout_width="@dimen/btnwidth"
      android:layout_height="wrap_content" />  </LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{4}"
        android:id="@+id/b19" />
    <android.support.v4.widget.Space
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{5}"
        android:id="@+id/b21" />
</LinearLayout>

第 1 和第 2 的区别 b/w 是：首先我们使用不可见的按钮.. 在 2nd 我们使用 space ... 首先，我们不能对整行使用 space（这意味着所有 3 个按钮都不能被 space 替换。如果我们这样做，那么它将堆叠在页面末尾，空白 spce..it不会将 space 放在 b/w 两行中。

了解 Android 线性布局

Understanding Android Linear Layouts

xml

android

android-layout

android-linearlayout