如何在 android studio 中以线性布局将按钮并排放置?

How do I put buttons next to each other in linear layout in android studio?

您好,我想在 android 工作室中使用线性布局将两个按钮并排放置:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="222dp"
    android:layout_height="237dp"
    app:srcCompat="@drawable/ic_launcher_background"
    tools:layout_editor_absoluteX="246dp"
    tools:layout_editor_absoluteY="322dp" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/cameraBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="@string/camera"
    android:layout_marginTop="8dp"
    app:strokeColor="@color/teal_700"
    app:cornerRadius="100dp"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>

<com.google.android.material.button.MaterialButton
    android:id="@+id/galleryBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Gallery"
    android:layout_marginTop="8dp"
    app:cornerRadius="100dp"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    />

目前的输出是:

我尝试过使用相对布局 - 没有用,而且还在线性布局中使用了水平布局。

我也试过将 android:layout_weight 设为 1,但按钮消失了。

我想让imageview在中间,下面有两个按钮,两个按钮是挨着的。

如果您打算将此视图保留在 LinearLayout 中,这就是您要做的。您将在 ImageView 下方添加一个新的 LinearLayout 并设置其方向或水平。然后在该 LinearLayout 中添加您的按钮。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background" />

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

        <com.google.android.material.button.MaterialButton
            android:id="@+id/cameraBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/camera"
            android:layout_marginTop="8dp"
            app:strokeColor="@color/teal_700"
            app:cornerRadius="100dp"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/galleryBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Gallery"
            android:layout_marginTop="8dp"
            app:cornerRadius="100dp"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            />

    </LinearLayout>

</LinearLayout>

如果您有兴趣使用 ConstraintLayout,您可以这样做:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/cameraBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/camera"
        android:layout_marginTop="8dp"
        app:strokeColor="@color/teal_700"
        app:cornerRadius="100dp"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toStartOf="@+id/galleryBtn"
        app:layout_constraintStart_toStartOf="parent"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/galleryBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gallery"
        android:layout_marginTop="8dp"
        app:cornerRadius="100dp"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/cameraBtn"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

您可以在父布局中使用另一个 Linear Layout 并将其方向设置为水平以获得所需的输出。

所需输出代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="222dp"
    android:layout_height="237dp"
    app:srcCompat="@drawable/ic_launcher_background"
    tools:layout_editor_absoluteX="246dp"
    tools:layout_editor_absoluteY="322dp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center"
    android:gravity="center">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/cameraBtn"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="@string/camera"
        app:cornerRadius="100dp"
        app:strokeColor="@color/teal_700" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/galleryBtn"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:text="Gallery"
        app:cornerRadius="100dp" />
</LinearLayout>

在您当前的布局中,所有元素都在一个容器中,即您的 LinearLayout。

使用 LinearLayout 实现您想要的效果的一个想法是将图像和按钮分隔在 2 个不同的 LinearLayouts 中。 承载按钮的 LinearLayout 的方向应该是水平的。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background"
        tools:layout_editor_absoluteX="246dp"
        tools:layout_editor_absoluteY="322dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/cameraBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:gravity="center"
            android:text="@string/camera"
            app:cornerRadius="100dp"
            app:strokeColor="@color/teal_700" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/galleryBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Gallery"
            app:cornerRadius="100dp" />
    </linearLayout>
</LinearLayout>

如果LinearLayout不是硬性要求,我建议使用ConstraintLayout。通过使用它,您可以更好、更轻松地定位所有内容。

您需要使用另一种线性布局将两个按钮并排放置, 这是代码。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background"
        tools:layout_editor_absoluteX="246dp"
        tools:layout_editor_absoluteY="322dp" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/cameraBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_marginTop="8dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Camera"
            app:cornerRadius="100dp"
            app:strokeColor="@color/teal_700" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/galleryBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_marginTop="8dp"
            android:layout_weight="1"
            android:text="Gallery"
            app:cornerRadius="100dp" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</LinearLayout>

这是所需输出的屏幕截图。 您可以提供所需的边距来设置布局中的按钮。