web-dev-qa-db-fra.com

Alignement du centre du texte du bouton de disposition des contraintes

J'utilise la nouvelle disposition Constraint pour construire ma mise en page. J'ai besoin de Button qui occupe presque toute la largeur de l'écran et qui était facile à utiliser avec des contraintes.

 enter image description here

Comme vous pouvez le voir sur l'image, je règle la largeur sur 0dp (toute taille), mais le texte ne colle pas au centre, ce qui est généralement normal pour un texte de bouton.

J'ai essayé: - mettre la gravité au centre - mettre textAlignment au centre

On dirait que ces propriétés ne peuvent pas fonctionner avec 0dp width (toute taille).

J'ai donc essayé de régler la largeur sur match_parent en utilisant le centre de gravité.

 enter image description here

C'est un peu à droite.

Est-ce que quelqu'un sait comment résoudre ce problème? 

Notez que j'utilise alpha4

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

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

EDITC'était un bogue dans ConstraintLayout alpha4.

UPDATEGoogle a publié alpha5 , le code ci-dessus fonctionne maintenant. Note de version

androidandroid-constraintlayoutconstraint-layout
4
Clayton Oliveira

C'est un peu à droite.

Je pense que la (les) marge (s) en est la cause. Et ce n’est pas seulement affectant les boutons, selon mon expérience. La marge est en train de visser TextInputEditText aussi.

Vous trouverez ci-dessous un code fonctionnel, mais faites attention à Android:layout_width="match_parent" sur le bouton. Chaque fois que j'ai cliqué dans l'éditeur, il sera remplacé par Android:layout_width="0dp" et gâchera l'alignement des boutons. 

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

Inspiré par la solution de Hobo joe, voici la façon dont je préfère le faire. Sa solution fonctionne mais doit encore utiliser un rembourrage pour créer un espacement. Si margin a été utilisé à la place, l'alignement du texte du bouton ira légèrement à droite. J'ai donc utilisé padding sur LinearLayout (ou ConstraintLayout) au lieu de margin sur 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>
5
Marchell Imanuel

As-tu essayé ? 

Android:textAlignment="center"

Cela fonctionne pour moi.

3
SoH

C'est un bug. Cependant, vous pouvez contourner ce problème en plaçant le bouton dans un LinearLayout (ou un autre ViewGroup standard). Définissez la vue parent et la largeur du bouton sur match_parent et déplacez les contraintes que vous aviez sur le bouton vers la présentation 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>
0
Hobo Joe

Eh bien, je pense que c’est en raison de ces contraintes App: layout_constraintRight_toRightOf App: layout_constraintLeft_toLeftOf

remplacez votre bouton actuel par celui-ci:

    <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" />

J'espère que cela aidera.

0
Mohanad ALKHOULI