如何在ConstraintLayout中使视图居中而不与不对称的相邻视图重叠

Question

如何在ConstraintLayout中使视图居中而不与不对称的相邻视图重叠

androidandroid-constraintlayout

6

我正在使用基于ConstraintLayout的自定义布局来设计标题栏。我需要将标题文本居中，而不会与两侧的按钮重叠。目前，我的标题位于两个按钮之间的中心位置，但由于按钮宽度不同，导致标题并未在父视图中居中。

以下是当前的布局效果（标题位于两个按钮之间而非父视图中心位置）：

有没有办法在父视图中居中标题，同时确保它不会与两侧的按钮文本重叠（因为按钮文本可能会变长）？

更进一步的要求是，如果无法完整显示标题和按钮文本，应该压缩标题文本而不是按钮文本。

如果我将标题约束到父容器的两侧，并设置其宽度为包裹内容，则几乎可以实现我想要的效果，但是当按钮文本变得很长时就会出现问题。

- Andy

不是我们想要的，但我在这里有一个编程解决方案：https://dev59.com/Fr3pa4cB1Zd3GeqPZjMj#63854933 - ianribas

3个回答

1

为了使视图居中，您可以将layout_width =“0dp”赋值给连接视图的两个侧面的视图。然后，中心视图占据视图左侧尽可能多的位置。

更新：

如果您想在父级内居中，则其他视图将成为您的父级。

android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:ellipsize = "end"
android:maxLines = "1"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintBottom_toOf = "parent"

- Jasurbek

2

这是如何在两个视图之间居中，但我正在尝试在父视图中居中。 - Andy

1

@Jasurbek 这可以让元素在父容器中居中，但如果其中任何一个变得太长，它们可能会重叠到按钮文本上。不过还是感谢你的帮助！ - Andy

这就是为什么在父视图中居中时，视图两侧不能有其他视图。在您的情况下，只需将TextView置于两个视图之间，然后将文本对齐到中心即可解决问题。 - Jasurbek

0

您可以使用以下代码：

app:layout_constraintTop_toTopOf
app:layout_constraintStart_toStartOf

如下所示：

<TextView android:id="@+id/nomination" 
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
app:layout_constraintTop_toTopOf="@+id/someId1" 
app:layout_constraintBottom_toBottomOf="@+id/someId2" 
app:layout_constraintStart_toStartOf="@+id/awards" 
app:layout_constraintEnd_toEndOf="parent"/>

- Udara Abeythilake

感谢您的回答。如果我将起始位置对齐到奖励按钮的起始位置，那么如果文本很长，它就无法防止重叠。 - Andy

你可以使用 app:layout_constraintGuide_percent="2" 为视图设置一些权重。 - Udara Abeythilake

当我在非布局指南上使用它时，操作系统会抛出异常。 - Andy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shrikant · Accepted Answer

你应该从中心开始，然后向左和向右移动。

尝试下面的解决方案，它应该按预期工作。

注：Original Answer翻译成“最初的回答”这个要求我没有理解清楚，如果需要修改请告知。

<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_at_the_start"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:gravity="center"
            android:text="Awards"
            app:layout_constraintEnd_toStartOf="@+id/tv_in_the_middle"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.2" />

        <TextView
            android:id="@+id/tv_in_the_middle"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:ellipsize="end"
            android:gravity="center"
            android:textAlignment="center"
            android:padding="5dp"
            android:maxLines="2"
            android:text="Nominations"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.6" />

        <ImageButton
            android:id="@+id/ibtn_at_the_end"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:background="@android:color/transparent"
            android:gravity="center_horizontal"
            android:src="@drawable/ic_add_white"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_in_the_middle"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.2" />
    </android.support.constraint.ConstraintLayout>