web-dev-qa-db-fra.com

marginTop ne fonctionne pas avec ConstraintLayout et wrap_content

Dans mon fragment, j'ai un texte ConstraintLayout avec layout_height="wrap_content" et j'aimerais avoir une marge entre mes deux boutons au bas de la vue.

Lorsque j'ajoute cette marge en tant que layout_marginBottom au bouton supérieur ( button_welcome_signup ), cela semble fonctionner correctement. Cependant, si j'essaie de l'ajouter au bouton du bas ( button_welcome_signin ) en tant que layout_marginTop, cela ne fonctionne pas.

Quelqu'un sait-il quels sont les problèmes ici/si je fais quelque chose de mal?

(Veuillez noter qu'il existe une raison pour laquelle j'utilise wrap_content et que j'aimerais sérieusement utiliser la marge sur le bouton du bas afin de pouvoir l'ajouter à son style pour une meilleure cohérence de l'interface utilisateur dans mon projet).

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:MyAppApp="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center_vertical"
    Android:background="@color/white"
    Android:minHeight="@dimen/min_height_welcome_frame"
    Android:padding="@dimen/margin_all_frame_inner">

    <ImageView
        Android:id="@+id/imageview_welcome_logo"
        Android:layout_width="wrap_content"
        Android:layout_height="50dp"
        Android:adjustViewBounds="true"
        Android:scaleType="fitCenter"
        Android:src="@drawable/logo_header"
        MyAppApp:layout_constraintTop_toTopOf="parent"
        MyAppApp:layout_constraintLeft_toLeftOf="parent"
        MyAppApp:layout_constraintRight_toRightOf="parent" />

    <TextView
        Android:id="@+id/textiew_welcome_title"
        style="@style/MyAppTextViewTitle"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="@dimen/margin_all_component_l"
        Android:text="@string/welcome_title"
        MyAppApp:layout_constraintTop_toBottomOf="@id/imageview_welcome_logo" />

    <TextView
        Android:id="@+id/textview_welcome_text"
        style="@style/MyAppTextViewText"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:text="@string/welcome_message"
        MyAppApp:layout_constraintTop_toBottomOf="@id/textiew_welcome_title" />

    <Button
        Android:id="@+id/button_welcome_signin"
        style="@style/MyAppSubButton"
        Android:layout_width="match_parent"
        Android:layout_height="46dp"
        Android:layout_marginTop="@dimen/margin_all_component_s" 
        Android:text="@string/welcome_sign_in"
        MyAppApp:layout_constraintBottom_toBottomOf="parent" />

    <Button
        Android:id="@+id/button_welcome_signup"
        style="@style/MyAppButton"
        Android:layout_width="match_parent"
        Android:layout_height="46dp"
        Android:layout_marginTop="@dimen/margin_all_component_l"
        Android:text="@string/welcome_sign_up"
        MyAppApp:layout_constraintBottom_toTopOf="@id/button_welcome_signin"
        MyAppApp:layout_constraintTop_toBottomOf="@id/textview_welcome_text"
        MyAppApp:layout_constraintVertical_bias="1" />

</Android.support.constraint.ConstraintLayout>

styles.xml:

<style name="MyAppButton" parent="Widget.AppCompat.Button">
    <item name="Android:background">@drawable/button_selector_blue</item>
    <item name="Android:textSize">@dimen/textsize_all_l</item>
    <item name="Android:textColor">@color/white</item>
    <item name="fontFamily">@font/my_sans_serif_regular</item>
</style>

<style name="MyAppSubButton" parent="Widget.AppCompat.Button">
    <item name="Android:background">@drawable/button_selector_transparent</item>
    <item name="Android:textSize">@dimen/textsize_all_l</item>
    <item name="Android:textColor">@color/turquoise_blue</item>
    <item name="fontFamily">@font/my_sans_serif_regular</item>
</style>

Merci d'avance pour votre aide.

androidandroid-layoutandroid-xmlandroid-constraintlayoutwrap-content
7
g-mac

Dans une ConstraintLayout, les marges latérales d'une vue enfant ne prendront effet que si ce côté est contraint à une autre vue. Dans votre exemple d'origine, la marge inférieure du bouton du haut fonctionne car le bouton du haut a une contrainte inférieure:

MyAppApp:layout_constraintBottom_toTopOf="@id/button_welcome_signin"

Toutefois, la marge supérieure du bouton du bas ne fonctionne pas car le bouton du bas ne présente aucune contrainte pour son sommet.

Si vous souhaitez utiliser la marge supérieure du bouton du bas, ajoutez cette contrainte:

MyAppApp:layout_constraintTop_toBottomOf="@+id/button_welcome_signup"

Notez que vous devrez aussi mettre à jour le style de chaîne (puisque cette nouvelle contrainte crée une chaîne) en ajoutant cet attribut au bouton du haut:

MyAppApp:layout_constraintVertical_chainStyle="packed"
14
Ben P.

essaye ça

<Button
    Android:id="@+id/button_welcome_signin"
    style="@style/MyAppSubButton"
    Android:layout_width="match_parent"
    Android:layout_height="46dp"
    Android:layout_marginTop="16dp"
    Android:text="@string/welcome_sign_in"
    MyAppApp:layout_constraintBottom_toBottomOf="parent"
    MyAppApp:layout_constraintEnd_toEndOf="parent"
    MyAppApp:layout_constraintStart_toStartOf="parent"
    MyAppApp:layout_constraintTop_toBottomOf="@+id/button_welcome_signup" />
1
Israr Ansari
<Button
        Android:id="@+id/SaveBtnId"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:text="@string/Save"
        Android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        Android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        Android:layout_marginRight="16dp"
        app:layout_constraintRight_toRightOf="parent"
         />

 enter image description here

0
akbar khan

La première image est supprimée des marges sur votre code,

 enter image description here

La deuxième image a ajouté une marge à gauche, à droite, en haut et en bas

 enter image description here

0
Poovarasan Selvaraj