约束布局按钮文本居中对齐答案

【问题标题】：Constraint layout button text center alignment约束布局按钮文本居中对齐
【发布时间】：2020-06-11 22:23:23
【问题描述】：

我正在使用新的Constraint 布局来构建我的布局。我需要Button，它几乎占据了整个屏幕宽度，并且很容易使用约束。

正如您在图片中看到的，我将宽度设置为 0dp（任何大小），但文本不会粘在中心，这通常是按钮文本的正常值。

我试过了： - 将重力设置为中心 - 将 textAlignment 设置为居中

看起来此属性不适用于 0dp 宽度（任何大小）。

所以我尝试使用重心将宽度设置为match_parent。

在右边一点。

有谁知道如何解决这种行为？

请注意，我使用的是 alpha4

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha4'

XML 代码

<android.support.constraint.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/content_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="br.com.marmotex.ui.LoginActivityFragment"
    tools:showIn="@layout/activity_login">

    <Button
        android:text="Log in"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/btLogin"
        android:layout_marginTop="48dp"
        app:layout_constraintTop_toBottomOf="@+id/textView6"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="@+id/content_login"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/content_login"
        android:layout_marginLeft="16dp"
        android:textColor="@android:color/white"
        android:background="@color/BackgroundColor" />

</android.support.constraint.ConstraintLayout>

编辑这是ConstraintLayout alpha4 中的一个错误。

更新谷歌发布了alpha5，上面的代码现在可以工作了。 Release note

【问题讨论】：

标签： android android-constraintlayout

【解决方案1】：

在右边一点点。

我认为margin(s) 是造成这些的原因。根据我的经验，它不仅影响按钮。 Margin 也搞砸了 TextInputEditText。

以下是工作代码，但请注意按钮上的android:layout_width="match_parent"。每当我在编辑器中单击时，它都会更改为android:layout_width="0dp"，并破坏按钮对齐。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button_survey"
        android:layout_width="match_parent" 
        android:layout_height="52dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="@+id/activity_main"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        app:layout_constraintTop_toTopOf="@+id/activity_main"
        tools:text="@string/main_activity_btn_survey"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp" />


</android.support.constraint.ConstraintLayout>

受 Hobo joe 解决方案的启发，以下是我喜欢的方式。他的解决方案有效，但仍需要使用填充来创建间距。如果改为使用边距，则按钮文本的对齐方式将略微向右。所以我在LinearLayout（或ConstraintLayout）上使用了填充而不是按钮上的边距。

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

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        app:layout_constraintTop_toTopOf="@+id/activity_main"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        app:layout_constraintBottom_toBottomOf="@+id/activity_main"
        android:padding="16dp">
        <Button
            android:text="Button"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:id="@+id/button_survey"
            android:layout_weight="1"
            tools:text="@string/main_activity_btn_survey"
            />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

【讨论】：

Google 已发布 alpha5，更新它，您将不再需要此工作。

【解决方案2】：

你试过了吗？

android:textAlignment="center"

这对我有用。

【讨论】：

【解决方案3】：

这是一个错误。但是，您可以通过将按钮放置在 LinearLayout（或其他标准 ViewGroup）中来解决此问题。将父视图和按钮宽度设置为match_parent，并将按钮上的任何约束移动到父布局。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@+id/parent_left"
    app:layout_constraintTop_toTopOf="@+id/parent_top"
    app:layout_constraintRight_toRightOf="@+id/parent_right">

    <Button
        android:id="@+id/test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Centered Text"/>

</LinearLayout>

【讨论】：

你能发布你的布局代码吗？我刚刚用我发布的 XML 进行了测试，它工作正常。

【解决方案4】：

我认为是因为这些限制应用程序：layout_constraintRight_toRightOf app:layout_constraintLeft_toLeftOf

用这个替换你当前的按钮：

    <Button
    android:text="Log in"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:id="@+id/btLogin"
    android:textColor="@android:color/white"
    android:background="@color/BackgroundColor"
    android:gravity="center"
    android:textAlignment="center"
    android:layout_marginTop="100dp"
    tools:layout_editor_absoluteX="-1dp"
    app:layout_constraintTop_toBottomOf="@+id/textView6" />

希望这会有所帮助。

【讨论】：

【解决方案5】：

在ConstraintLayout 内部使用时，问题似乎出在android:layout_width="match_parent" 上。只需设置android:layout_width="0dp" 并添加约束app:layout_constraintStart_toStartOf="parent" 和app:layout_constraintEnd_toEndOf="parent"，就可以正常工作。

<Button
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:text="Continue"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent" />

【讨论】：