约束布局按钮文本中心对齐 [英] Constraint layout button text center alignment

问题描述

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

I'm using the new Constraint layout to build my layout. I need to have Button that occupies almost the entire screen width and that was easy using constraints.

正如您在图像中看到的那样，我将宽度设置为0dp(任何大小)，但是文本不会停留在中间，这通常是按钮文本的正常显示.

As you can see in the image I am setting the width to 0dp (Any size), but the text don't stick at the center what's usually the normal for a button text.

我尝试过: -将重力设置为中心 -将textAlignment设置为居中

I've tried: - set gravity to center - set textAlignment to center

看起来像此属性不能在0dp宽度(任何大小)下使用.

Looks like this properties can't work with 0dp width (Any size).

因此，我尝试使用重心将宽度设置为match_parent.

So I've tried to set the width to match_parent using gravity center.

在右边.

有人知道如何解决该问题吗?

Does any one know how to fix that behavior ?

请注意，我使用的是alpha4

Note that i'm using 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中的错误.

EDIT It was a bug in ConstraintLayout alpha4.

更新 Google已发布 alpha5 ，以上代码现已生效. 发布说明

UPDATE Google has released alpha5, the above code now Works. Release note

推荐答案

在右边.

我认为是由利润引起的.根据我的经验，它不仅影响Buttons.保证金也搞砸了TextInputEditText.

I think margin(s) is causing these. And its not only affecting Buttons, in my experience. Margin is screwing TextInputEditText too.

以下是有效代码，但请注意按钮上的android:layout_width="match_parent".每当我在编辑器中单击时，它将更改为android:layout_width="0dp"，并破坏按钮的对齐方式.

Below is a working code but please pay attention to android:layout_width="match_parent" on the Button. Any time I clicked in the editor, it will change to android:layout_width="0dp", and ruin the button alignment.

<?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解决方案的启发，以下是我更喜欢这样做的方式.他的解决方案有效，但仍需要使用填充来创建间距.如果改用margin，则按钮文本的对齐方式将稍微向右移动.因此，我在LinearLayout(或ConstraintLayout)上使用了填充，而不是按钮上的了空白.

Inspired by Hobo joe's solution, below is the way i prefer to did it. His solution is working but still need to use padding to create spacing. If margin was used instead, the alignment of button's text will go slightly to the right. So I used padding on LinearLayout(or ConstraintLayout) instead of margin on button.

<?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>

这篇关于约束布局按钮文本中心对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！