Question

我想用屏幕右侧的编辑按钮创建一个以TextView为中心的用户名。如果我指定TextView以匹配父级的开始/结束，它将居中。但是，文本将溢出并在按钮上绘制。我可以将文本的一侧链接到按钮，但是文本不会居中。这是我的示例代码，其中tvName由于水平链中的按钮而未居中：

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/pt_name_font_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@id/tvUserMsisdn"
            app:layout_constraintEnd_toStartOf="@id/ibChangeName"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/aivProfile"
            tools:text="B"/>

        <TextView
            android:id="@+id/tvName2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/pt_name_font_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@id/tvUserMsisdn"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tvName"
            tools:text="A"/>

        <ImageButton
            android:id="@+id/ibChangeName"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_marginEnd="@dimen/default_margin"
            app:layout_constraintBottom_toBottomOf="@id/tvName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/tvName"
            android:background="@android:color/black"/>

这是它的样子：

我不能使用水平偏置，因为按钮必须保持静态大小，并且屏幕的宽度以及字体的大小可能会有所不同。理想情况下，我可以指定两个app:layout_constraintEnd_toStartOf属性，一个用于屏幕的整个宽度，因此文本保持居中，另一个用于按钮，因此不会溢出。

Answer 1

理想情况下，我可以指定两个app:layout_constraintEnd_toStartOf属性

我确定您已经知道这一点，但这是不可能的。

您唯一可以做的就是使用Barrier，但这在这里无济于事，因为（在这种情况下）在功能上等同于简单地将{的末尾约束为{ {1}}。

在我看来，您可以在这里做的最好的事情是将ImageButton的开始和结束约束到父级，然后使用填充来确保长文本不与{{ 1}}。该按钮具有固定的宽度（28dp）和固定的边距（TextView），因此您可以给ImageButton的左/右填充等于28dp + 2x @dimen/default_margin。这样可以确保文本与TextView的左边缘至少缠绕default_margin。

Answer 2

将TextView和ImageButton都放在RelativeLayout中：

<RelativeLayout
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tvName2"
        android:layout_alignParentStart="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@+id/ibChangeName"
        android:textSize="@dimen/pt_name_font_size"
        android:textStyle="bold"
        tools:text="A"/>

    <ImageButton
        android:id="@+id/ibChangeName"
        android:layout_alignParentEnd="true"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:layout_marginEnd="@dimen/default_margin"
        android:background="@android:color/black"/>

</RelativeLayout>

TextView的此属性
android:layout_toStartOf="@+id/ibChangeName"
确保TextView不会与ImageButton重叠
现在您必须将相对布局居中

Answer 3

如果ImageButton始终具有固定大小（在这种情况下为28dp），则可以使用与按钮尺寸相同的Space小部件，并将其放置在父级的左边缘。然后，您可以将三个Views链接在一起，并将链接的样式设置为spread_inside。 TextView's的宽度可以设置为match_constraint，其重力可以居中，也可以使用wrap_content和app:layout_constrainedWidth="true"使其不与其他Views重叠太大。

示例XML以获得大致思路：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Space
        android:id="@+id/space"
        android:layout_width="28dp"
        android:layout_height="28dp"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintEnd_toStartOf="@id/textview"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Textview"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toStartOf="@id/button"
        app:layout_constraintStart_toEndOf="@id/space" />

    <ImageButton
        android:id="@+id/button"
        android:layout_width="28dp"
        android:layout_height="28dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textview" />

</android.support.constraint.ConstraintLayout>

如何将文本相对于整个屏幕定位在链的中央？

3 个答案: