元素之间的Android布局间距
Posted
技术标签:
【中文标题】元素之间的Android布局间距【英文标题】：Android layout spacing between elements 【发布时间】：2021-10-16 18:13:18 【问题描述】：我有以下 xml 布局：
我目前的结果：
我想要的结果：
我必须确保将 currentTime 和 endTime 放在左侧，而不是将 screenRotationButton 放在右侧。
使用下面的 FocusAwareSeekBar，如图所示。
你建议我如何出行？
编辑：
<LinearLayout
android:id="@+id/bottomControls"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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>
【问题讨论】：
【参考方案1】：如你所见here
android:gravity设置使用它的View的内容（即其子视图）的比重。android:layout_gravity设置View或Layout相对于其父级的重力。
使用LinearLayout 上的android:gravity="center"，您可以处理内部所有元素的重力，因此请摆脱它。
相反，将android:layout_gravity 设置为内部元素，start 用于左侧，end 用于右侧。
另一种方法请检查ConstraintLayout
【讨论】：
我编辑了帖子，添加了更多信息。通过更好地修复代码。如果可能的话，我可以请你审查此事。【参考方案2】：您可以通过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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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之后定义的所有东西都会放在右边
【讨论】：
我按照您所说的进行了尝试，但它给了我中心放置的播放结束时间的问题。我编辑了帖子，更多信息也清理了代码，你能帮我吗？ @Paul ，我已经更新了答案。请检查 这是我从你的代码中得到的结果：i.stack.imgur.com/L9fQU.png【参考方案3】：修改@anatoli 的答案，你可以试试下面的代码来达到你想要的结果。我在 3 个 textView 之间创建了一个链，以便它们始终粘在一起。另外，还有一个 textView 我不明白它的用法，所以我暂时没有将它包含在链中，并且默认全屏按钮始终粘在右侧。
另外，我认为 fullScreen 按钮的高度和宽度应为 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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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>
【讨论】：
以上是关于元素之间的Android布局间距的主要内容，如果未能解决你的问题，请参考以下文章
css 田字布局，子元素之间，子元素和父元素之间间距10，自适应