Android布局元素之间的间距

Question

我有以下的xml布局：

我目前的结果：

我想要的结果：

我必须确保将currentTime和endTime放在左边，而将screenRotationButton放在右边。

如下所示，使用FocusAwareSeekBar，如图所示。

您建议我如何解决？

编辑：

<LinearLayout
                android:id="@+id/bottomControls"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="center"
                android:minHeight="40dp"
                android:orientation="horizontal"
                android:paddingLeft="@dimen/player_main_controls_padding"
                android:paddingRight="@dimen/player_main_controls_padding">

                <TextView
                    android:id="@+id/playbackCurrentTime"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:minHeight="30dp"
                    android:text="-:--:--"
                    android:textColor="@android:color/white"
                    tools:ignore="HardcodedText"
                    tools:text="1:06:29" />

                <TextView
                    android:id="@+id/separated"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:paddingLeft="4dp"
                    android:paddingRight="4dp"
                    android:minHeight="30dp"
                    android:text="/"
                    android:textColor="@android:color/white"
                    tools:ignore="HardcodedText"
                    tools:text="/" />

                <TextView
                    android:id="@+id/playbackEndTime"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="-:--:--"
                    android:textColor="@android:color/white"
                    tools:ignore="HardcodedText"
                    tools:text="1:23:49" />

                <org.schabi.newpipe.views.FocusAwareSeekBar
                    android:id="@+id/playbackSeekBar"
                    style="@style/Widget.AppCompat.SeekBar"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="2dp"
                    android:layout_weight="1"
                    tools:progress="25"
                    tools:secondaryProgress="50" />

                <TextView
                    android:id="@+id/playbackLiveSync"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:background="?attr/selectableItemBackground"
                    android:gravity="center"
                    android:paddingLeft="4dp"
                    android:paddingRight="4dp"
                    android:text="@string/duration_live"
                    android:textAllCaps="true"
                    android:textColor="@android:color/white"
                    android:visibility="gone"
                    tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />

                <androidx.appcompat.widget.AppCompatImageButton
                    android:id="@+id/screenRotationButton"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginStart="4dp"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true"
                    android:padding="@dimen/player_main_buttons_padding"
                    android:scaleType="fitCenter"
                    android:visibility="gone"
                    app:srcCompat="@drawable/ic_fullscreen"
                    app:tint="@color/white"
                    tools:ignore="ContentDescription,RtlHardcoded"
                    tools:visibility="visible" />
            </LinearLayout>

- Paul

Answer 1

你可以使用 ConstraintLayout 来实现它

   <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:id="@+id/bottomControls"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:minHeight="40dp"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/player_main_controls_padding"
    android:paddingRight="@dimen/player_main_controls_padding">

    <TextView
        android:id="@+id/playbackCurrentTime"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/separated"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:text="1:06:29" />

    <TextView
        android:id="@+id/separated"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="/"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/playbackEndTime"
        app:layout_constraintStart_toEndOf="@+id/playbackCurrentTime"
        tools:ignore="HardcodedText"
        tools:text="/" />

    <TextView
        android:id="@+id/playbackEndTime"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintStart_toEndOf="@+id/separated"
        app:layout_constraintEnd_toStartOf="@+id/playbackLiveSync"
        tools:ignore="HardcodedText"
        tools:text="1:23:49" />

    <org.schabi.newpipe.views.FocusAwareSeekBar
        android:id="@+id/playbackSeekBar"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/screenRotationButton"
        android:layout_gravity="center"
        android:layout_marginTop="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/playbackCurrentTime"
        android:layout_weight="1"
        tools:progress="25"
        tools:secondaryProgress="50" />

    <TextView
        android:id="@+id/playbackLiveSync"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="@string/duration_live"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/screenRotationButton"
        app:layout_constraintStart_toEndOf="@+id/playbackEndTime"
        tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/screenRotationButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="4dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:padding="@dimen/player_main_buttons_padding"
        android:scaleType="fitCenter"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/playbackLiveSync"
        app:srcCompat="@drawable/ic_fullscreen"
        app:tint="@color/white"
        tools:ignore="ContentDescription,RtlHardcoded"
        tools:visibility="visible" />

</androidx.constraintlayout.widget.ConstraintLayout>

通过在playbackEndTime上使用android:layout_width="0dp"，您告诉组件占用其所在视图中的整个空白空间。因此，在playbackEndTime之后定义的所有内容都将位于右侧。

- anatoli

---

我按照你说的尝试了，但是播放结束时间（playbackEndTime）出现了问题，因为它位于中心位置。我编辑了帖子，并提供了更多信息，还清理了代码，你能帮我一下吗？ - Paul

@Paul，我已经更新了一个答案，请查看。 - anatoli

这是您的代码运行后得到的结果： https://i.stack.imgur.com/L9fQU.png - Paul

Answer 2

修改@anatoli的答案，您可以尝试下面的代码来实现您想要的结果。我创建了一个包含3个textView的链，以便它们始终粘在一起。此外，还有另一个textView，我不理解其用途，因此暂时没有将其包含在链中，并将全屏按钮默认为始终粘在右侧。

此外，我认为全屏按钮应该具有24dp的高度和宽度，因为这样看起来更像所需的截图。

<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:id="@+id/bottomControls"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:minHeight="40dp"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/player_main_controls_padding"
    android:paddingRight="@dimen/player_main_controls_padding">

    <TextView
        android:id="@+id/playbackCurrentTime"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/separated"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:text="1:06:29" />

    <TextView
        android:id="@+id/separated"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="/"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/playbackEndTime"
        app:layout_constraintStart_toEndOf="@+id/playbackCurrentTime"
        tools:ignore="HardcodedText"
        tools:text="/" />

    <TextView
        android:id="@+id/playbackEndTime"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintStart_toEndOf="@+id/separated"
        tools:ignore="HardcodedText"
        tools:text="1:23:49" />

    <org.schabi.newpipe.views.FocusAwareSeekBar
        android:id="@+id/playbackSeekBar"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="2dp"
        app:layout_constraintTop_toBottomOf="@+id/playbackCurrentTime"
        tools:progress="25"
        tools:secondaryProgress="50" />

    <TextView
        android:id="@+id/playbackLiveSync"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="@string/duration_live"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/screenRotationButton"
        app:layout_constraintStart_toEndOf="@+id/playbackEndTime"
        tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/screenRotationButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="4dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:padding="@dimen/player_main_buttons_padding"
        android:scaleType="fitCenter"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@id/playbackCurrentTime"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/playbackCurrentTime"
        app:srcCompat="@drawable/ic_fullscreen"
        app:tint="@color/white"
        tools:ignore="ContentDescription,RtlHardcoded"
        tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>

- Kartik

Answer 3

正如您可以在这里阅读的那样

• android:gravity设置View中内容（即其子视图）的重力。
• android:layout_gravity设置View或Layout相对于其父级的重力。

使用android:gravity="center"在LinearLayout上处理所有元素内部的重力，因此将其删除。

相反，将android:layout_gravity设置为元素内部，左侧为start，右侧为end。

另一种方法是查看ConstraintLayout

- Stefano Sansone

---

我编辑了帖子，添加了更多信息。 通过更好地修复代码。 如果可能的话，我可以请您审核此事。 - Paul